React React.createClass vs extends React.Component Create React Component


Example

Let's explore the syntax differences by comparing two code examples.

React.createClass (deprecated)

Here we have a const with a React class assigned, with the render function following on to complete a typical base component definition.

import React from 'react';

const MyComponent = React.createClass({
  render() {
    return (
      <div></div>
    );
  }
});

export default MyComponent;

React.Component

Let's take the above React.createClass definition and convert it to use an ES6 class.

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div></div>
    );
  }
}

export default MyComponent;

In this example we're now using ES6 classes. For the React changes, we now create a class called MyComponent and extend from React.Component instead of accessing React.createClass directly. This way, we use less React boilerplate and more JavaScript.

PS: Typically this would be used with something like Babel to compile the ES6 to ES5 to work in other browsers.