Two ways to do the same thing. Almost. React traditionally provided the
React.createClass method to create component classes, and released a small syntax sugar update to allow for better use with ES6 modules by
extends React.Component, which extends the
Component class instead of calling
Table of contents
These differences are subtle in places, but have quite a few interesting differences worth exploring, which will allow you to make the best decision for which is best for you.
First, let’s explore the syntax differences by looking at two code examples and annotating them.
Here we have a
const with a React class assigned, with the important
render function following on to complete a typical base component definition.
Let’s take the above
React.createClass definition and convert it to use an ES6 class.
constructor, where we need to call
super() to pass the props to
For the React changes, we now create a
class called “Contacts” and
React.Component instead of accessing
propTypes and getDefaultProps
There are important changes in how we use and declare default props, their types and setting initial states, let’s take a look.
React.createClass version, the
propTypes property is an Object in which we can declare the type for each prop. The
getDefaultProps property is a function that returns an Object to create initial props.
propTypes as a property on the actual
Contacts class instead of a property as part of the
createClass definition Object. I think it’s nicer syntax to create class properties so it’s much clearer what are React APIs versus your own on the definition Object.
getDefaultProps has now changed to just an Object property on the class called
State is an interesting change, now we’re using constructors the implementation of initial states changes.
We have a
getInitialState function, which simply returns an Object of initial states.
getInitialState function is deceased, and now we declare all state as a simple initialisation property in the
React.createClass will automatically bind
this values correctly for us, but changes when using ES6 classes affect this.
onClick declaration with
this.handleClick bound. When this method gets called React will apply the right execution context to
With ES6 classes this is slightly different, properties of the class do not automatically bind to the React class instance.
There are a few ways we could bind the right context, here’s how we could bind inline:
Alternatively we could change the context of
this.handleClick inside the
constructor to avoid inline repetition, which may be a better approach if moving to this syntax to avoid touching JSX at all:
React mixins are no longer supported when using React components written in ES6.
React.createClass we can add mixins to components using a
mixins property which takes an Array of available mixins. These then extend the component class.
Mixins aren’t supported in ES6 classes.
Facebook does suggest the future removal of
React.createClass completely in favour of ES6 classes - (source). For now, use what makes sense, they’re both just syntax with different semantics that do the same thing - they’re both classes!