Porting React Components to ES6

I've been meaning to do this for a while, but we finally ported all our React code to ES6 classes. The migration was pretty simple, but I figured sharing my notes might help someone out there.

Class creation

We had been using React.createClass, but with ES6 this changes to extends React.Component.

Old

const Widget = React.createClass({
   // code is here
});

New class Widget = extends React.Component { // code is here }

PropTypes

PropTypes are no longer part of the code within the class. They are defined afterwards.

Old

const Widget = React.createClass({

  propTypes: {
    fn: React.PropTypes.func,
    thing: React.PropTypes.object
  }

});

New

class Widget = extends React.Component {
   // code is here
}

Widget.propTypes: {
  fn: React.PropTypes.func,
  thing: React.PropTypes.object
};

Initial State

Initial state is now set in the constructor.

Old

const Widget = React.createClass({

  getInitialState() {
    return {
      foo: 'bar'
    };
  }

});

New

class Widget = extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      foo: 'bar'
    };
  }

}

Function Binding

You might not know, but React does some magic internally when you use createClass. This includes auto-binding this to your functions. If you have a function that needs access to the component, you now need to bind it in the constructor.

Old

const Widget = React.createClass({

  doSomeWork() {
     return this.props.foo;
  }

});

New

class Widget = extends React.Component {

  constructor(props) {
    super(props);
    this.doSomeWork = () => this._doSomeWork();
  }

  _doSomeWork() {
     return this.props.foo;
  }

}

Other issues

Mixins are not supported in ES6. Most libraries are already moving away from them. We did have to update react-router and react-intl.

Happy porting and welcome to ES6!