以下语法是 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. Winserver-FailoverCluster验证异常

    Q:新建的2台物理机,组成一个集群,第一遍没有问题,建成后,我想重建所以就destroy掉了,但是在重建时报 错误,尝试了各种清除集群指令和重新安装failover等方法都无效. 以后不在使用Dest ...

  2. 解决spring boot1.5以上版本@ConfigurationProperties提示“Spring Boot Configuration Annotation Processor not.."

    Springboot1.5以上版本,在使用 @ConfigurationProperties注解的时候会提示“Spring Boot Configuration Annotation Processo ...

  3. 基于335X的Linux网口驱动分析

    基于335X的linux网口驱动分析 一. 系统构成 1.  硬件平台 AM335X 2.  LINUX内核版本 4.4.12 二. 网口驱动构架(mdio部分) mdio网口驱动部分 使用 总线.设 ...

  4. MYSQL中的乐观锁实现(MVCC)简析

    https://segmentfault.com/a/1190000009374567#articleHeader2 什么是MVCC MVCC即Multi-Version Concurrency Co ...

  5. mysql安装好需要启动和停止服务

    启动mysql: mysql.server start 停止服务:mysql.server stop

  6. 0027SpringMVC拦截器的编写和配置

    SpringMvc中想使用拦截器,主要分为两步: a.编写拦截器,需实现HandlerInterceptor接口 b.springmvc.xml中配置拦截器 逻辑图如下: 测试过程主要分为如下几步: ...

  7. 行为型模式(二) 命令模式(Command)

    一.动机(Motivate) 在我们的现实生活中有很多例子可以拿来说明这个模式,我们还拿吃饺子这个事情来说.我的奶奶说了,今天想吃饺子,发出了命令,然后我奶奶就去看电视去了.我们夫妻俩收到命令就开始和 ...

  8. 常用的HTTP状态码,网站开发请求状态必备

    成功的状态码: 200 – 服务器成功返回网页 304 – 未修改 失败的状态码: 404 – 请求的网页不存在 503 – 服务器暂时不可用 500 – 服务器内部错误 下面的不是很常用,记住上面那 ...

  9. LightOJ - 1311 - Unlucky Bird(相遇问题)

    链接: https://vjudge.net/problem/LightOJ-1311 题意: A bird was flying on a train line, singing and passi ...

  10. 指数基金介绍专栏(8):国企指数(H股指数)详细介绍,最新资料解析,看这一篇就够了

    作者:牛大 | 公众号:定投五分钟 大家好,我是牛大.每天五分钟,投资你自己:坚持基金定投,终会财富自由! 昨天牛大给大家介绍了恒生指数,没看的朋友可以去公众号看一下. 指数基金介绍专栏(7):恒生指 ...