1，引入與匯出方式不同

//ES5
var React = require("react");

//ES6
import React, { Component, PropTypes } from 'react

   匯入： ES5使用require匯入，而ES6使用了import

//ES5
module.exports = Test;

//ES6
export default Test;

2，建立元件的方式不同

//ES5
var Test = React.createClass( {
       ..........
} );

//ES6
class Test extends Component {
       ..........
}
 

 ES5使用React.createClass()  小括號裡面需要大括號。

 ES6定義元件時繼承自React框架的Component(需要匯入)，只需要一個大括號。

3，初始化元件屬性的方式以及限制元件屬性型別的方式不同

//ES5
var Test = React.createClass({
      getDefaultProps: function() {
             return {
                   myPro: 10
             };
      },
      propTypes: {
             myPro: React.PropTypes.number. isRequired
      }
});

//ES6
class Test extends Component {
       static defaultProps = {
             myPro: 10
       };

       static propTypes = {
             myPro: React.PropTypes.number. isRequired
       };
}
 

  ES5通常使用propTypes成員和getDefaultProps方法來實現。

  ES6可以統一使用static成員。（也可以用ES5方法）。

4，初始化方法不同

//ES5
getInitialState: function() {
      ...........
      return {
           myState: 10
      }
}

//ES6
state = {
      myState: 10
}

   因為ES6直接使用state初始化不能進行一些其它的運算，所以也經常這樣：

constructor(props){
        super(props);
        this.state = {
            myState: 10
        };
    }
 

5，ES5中每個方法之後都需要加上一個逗號，而且需要用 render: function()這樣的寫法。而ES6不需要加逗號，方法也可以直接用render()，直接在名字後加括號和形參。