React ES5 v/s ES6

react-es5-v-es6.js

// 1. require/import
// ES5: require
var React = require('react');
var { Component, PropTypes } = React;

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


// 2. Module import/export
// ES5
var MyComponent = React.createClass({
  ...
});
module.exports = MyComponent;
var MyComponent = require('./MyComponent');

// ES6
export default class MyComponent extends Component{
  ...
}
import MyComponent from './MyComponent';


// 3. Declarations
// ES5 
var Photo = React.createClass({
  componentWillMount: function() { ... },
  render: function() {
    return (
      <Image source={this.props.source} />
    );
  },
});

// ES6
class Photo extends React.Component {
  componentWillMount() { ... }
  render() {
    return (
      <Image source={this.props.source} />
    );
  }
}


// 4. Props
// ES5 
var Video = React.createClass({
  getDefaultProps: function() {
    return {
      autoPlay: false,
      maxLoops: 10,
    };
  },

  propTypes: {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired
  },

  render: function() {
    return (
      <View />
    );
  },
});

// ES6
class Video extends React.Component {
  static defaultProps = {
    autoPlay: false,
    maxLoops: 10,
  };

  static propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired
  };

  render() {
    return (
      <View />
    );
  }
}


// 5. State
// ES5
var Video = React.createClass({
  getInitialState: function() {
    return {
      loopsRemaining: this.props.maxLoops
    };
  }
});

//ES6
class Video extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loopsRemaining: this.props.maxLoops
    };
  }
}

Source