What is the difference between React's ES6 syntax and ES5 syntax?

React's ES6 syntax differs from ES5 syntax in the following ways.

require vs. Import

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

// ES6  
import React from 'react';

Js

exports vs. export

// ES5  
module.exports = Component;  

// ES6  
export default Component;

Js

Components and Functions

// ES5  
var MyComponent = React.createClass({  
    render: function() {  
        return(  
          <h3>Hello JavaTpoint</h3>  
        );  
    }  
});  

// ES6  
class MyComponent extends React.Component {  
    render() {  
        return(  
          <h3>Hello Javatpoint</h3>  
        );  
    }  
}

Js

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>  
        );  
    }  
}

Js

state:

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>  
        );  
    }  
}