ES6 syntax

How different is React’s ES6 syntax when compared to ES5?

Require vs Import

var React = require('react'); //es5
import React from 'react'; //es6

Export vs Exports

module.exports = Component; //es5
export default Component; //es6

Component and Function

var Demo = React.createClass({
  render: function() {
    return <h1>Hi</h1>;
  }
}); //es5

class Demo extends React.Component {
  render() {
    return <h1>Hi</h1>;
  }
} // es6

Props

var App = React.createClass({
  propTypes: { name: React.PropTypes.string },
  render: function() {
    return <h1>Hi {this.props.name}</h1>;
  }
}); //es5

class Demo extends React.Component {
  render() {
    return <h1>Hi {this.props.name}</h1>;
  }
} // es6

State

var App = React.createClass({
  getInitialState: function() {
    return { name: 'world' };
  },
  render: function() {
    return <h1>Hi {this.state.name}</h1>;
  }
}); //es5

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'world'
    };
  }

  render() {
    return <h1>Hi {this.state.name}</h1>;
  }
} // es6

Nam Mai