以下语法是 ES5 与 ES6 中的区别:

1.require 与 import

// ES5
var React = require('react'); // ES6
import React from 'react';

2.export 与 exports

// ES5
module.exports = Component; // ES6
export default Component;

3.component 和 function

// ES5
var MyComponent = React.createClass({
render: function() {
return
<h3>Hello Edureka!</h3>;
}
}); // ES6
class MyComponent extends React.Component {
render() {
return
<h3>Hello Edureka!</h3>;
}
}

4.props

// ES5
var App = React.createClass({
propTypes: { name: React.PropTypes.string },
render: function() {
return
<h3>Hello, {this.props.name}!</h3>;
}
}); // ES6
class App extends React.Component {
render() {
return
<h3>Hello, {this.props.name}!</h3>;
}
}

5.state

// ES5
var App = React.createClass({
getInitialState: function() {
return { name: 'world' };
},
render: function() {
return
<h3>Hello, {this.state.name}!</h3>;
}
}); // ES6
class App extends React.Component {
constructor() {
super();
this.state = { name: 'world' };
}
render() {
return
<h3>Hello, {this.state.name}!</h3>;
}
}

.

与 ES5 相比,React 的 ES6 语法有何不同?的更多相关文章

  1. React Native的语法之ES5和ES6

    原文地址:http://www.devio.org/2016/08/11/React-Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B- ...

  2. React Native之ES5/ES6语法差异对照表

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

  3. [ES6]react中使用es6语法

    前言 不论是React还是React-native,facebook官方都推荐使用ES6的语法,没在项目中使用过的话,突然转换过来会遇到一些问题,如果还没有时间系统的学习下ES6那么注意一些常见的写法 ...

  4. es6语法重构react代码

    1.使用React.Component创建组件,需要通过在constructor中调用super()将props传递给React.Component.另外react 0.13之后props必须是不可变 ...

  5. WebStorm ES6 语法支持设置和ES6语法的JS文件编译为ES5语法文件

    ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...

  6. Webpack4 学习笔记三 ES6+语法降级为ES5

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 将es6.es7语法降级为es5 需要通过 babel JavaScript编译器. 安装: npm i babel ...

  7. React Native中常用ES6语法

    一:模块导入导出 //ES6 import React, { Component, PropTypes, } from 'react'; import { Image, Text } from 're ...

  8. 使用scss + react + webpack + es6实现幻灯片

    写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果:我的github上的 JS代码 或者 观看慕课提供的课程 ...

  9. 6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)

    作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...

随机推荐

  1. 输入web网站点击之后发生的事情

    (1)用户在浏览器(客户端)里输入或者点击一个连接: (2)浏览器向服务器发送HTTP请求: (3)服务器处理请求,如果查询字符串或者请求体里含有参数,服务器也会把这些参数信息考虑进去: (4)服务器 ...

  2. 基于django的生成二维码的接口

    原理就是在视图层写一个将数据生成二维码的视图函数: def generate_qrcode(request, data): img = qrcode.make(data) buf = BytesIO( ...

  3. 解决 Jumpserver coco 使用登录用户(ldap)进行SSH连接目标主机,忽略系统用户

    前言 Jumpserver 作为国内流行的开源堡垒机,很多公司都在尝试使用,同时 Jumpserver 为了契合众多公司的用户认证,也提供了 LDAP 的用户认证方式,作为 Jumpserver 的用 ...

  4. Spark 宽窄依赖和stage的划分

    窄依赖 父RDD和子RDD partition之间的关系是一对一的,或者父RDD一个partition只对应一个子RDD的partition情况下的父RDD和子RDD partition关系是多对一的 ...

  5. 12.安装olny office服务---不成功

    安装olny office服务 在01.centos7环境准备的基础上安装olny office服务 参考博客:https://blog.csdn.net/networken/article/deta ...

  6. 基于k8s集群部署prometheus监控ingress nginx

    目录 基于k8s集群部署prometheus监控ingress nginx 1.背景和环境概述 2.修改prometheus配置 3.检查是否生效 4.配置grafana图形 基于k8s集群部署pro ...

  7. netty实现websocket发送文本和二进制数据

    原文:https://huan1993.iteye.com/blog/2433552 最近在学习netty相关的知识,看到netty可以实现 websoket,因此记录一下在netty中实现webso ...

  8. 51nod 2485 小b重排字符串

    小b有一个字符串S,现在她希望重排列S,使得S中相邻字符不同. 请你判断小b是否可能成功. 样例解释:将"aab"重排为"aba"即可. 收起   输入 输入一 ...

  9. 大马过安全狗拿webshell方法

    很多拿站的朋友,都知道大马很多都会被安全狗拦截,最近一个大牛给我一个方法,竟然成功,所以分享下这个方法. 将大马写到一个txt文件里面,命名为dama.txt,再建一个文本文档,asp的就写入:< ...

  10. drf框架 - 三大认证组件 | 认证组件 | 权限组件 | 频率组件

    RBAC 基于用户权限访问控制的认证 - Role-Based Access Control Django框架采用的是RBAC认证规则,RBAC认证规则通常会分为 三表规则.五表规则,Django采用 ...