React.createClass versus extends React.Component

Two ways to do the same thing. Almost. React traditionally provided theReact.createClassmethod to create component classes,and released a small Syntax sugar update to allow for better use with ES6 modules byextends React.Component,which extends theComponentclass instead of callingcreateClass.

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.

Syntax differences

First,let’s explore the Syntax differences by looking at two code examples and annotating them.

React.createClass

Here we have aconstwith a React class assigned,with the importantrenderfunction following on to complete a typical base component definition.

import React from 'react';

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

export default Contacts;

React.Component

Let’s take the aboveReact.createClassdefinition and convert it to use an ES6 class.

class Contacts extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    ></div>     );
  }
}

default Contacts;

From a JavaScript perspective we’re now using ES6 classes,typically this would be used with something like Babel to compile the ES6 to ES5 to work in other browsers. With this change,we introduce theconstructor,where we need to callsuper()to pass the props toReact.Component.

For the React changes,we now create aclasscalled “Contacts” andextendfromReact.Componentinstead of accessingReact.createClassdirectly,which uses less React boilerplate and more JavaScript. This is an important change to note further changes this Syntax swap brings.

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

In theReact.createClassversion,thepropTypesproperty is an Object in which we can declare the type for each prop. ThegetDefaultPropsproperty is a function that returns an Object to create initial props.

= React.createClass({
  propTypes: {

  },
  getDefaultProps() {
    return {
      
    };
  },
  render() {
    default Contacts;

React.Component

This usespropTypesas a property on the actualContactsclass instead of a property as part of thecreateClassdefinition 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.

ThegetDefaultPropshas now changed to just an Object property on the class calleddefaultProps,as it’s no longer a “get” function,it’s just an Object. I like this Syntax as it avoids more React boilerplate,just plain JavaScript.

></div>     );
  }
}
Contacts.propTypes = {

};
Contacts.defaultProps = {

};

default Contacts;

State differences

State is an interesting change,now we’re using constructors the implementation of initial states changes.

React.createClass

We have agetInitialStatefunction,which simply returns an Object of initial states.

= React.createClass({
  getInitialState () {
    default Contacts;

React.Component

ThegetInitialStatefunction is deceased,and now we declare all state as a simple initialisation property in theHighlighter-rouge" style="padding:1px 5px; background-color:rgb(245,which I think is much more JavaScript-like and less “API” driven.

super(props);
    this.state = {

    };
  }
  render() {
    default Contacts;

= React.createClass({
  handleClick() {
    console.log(this); // React Component instance
  },170)"><div onClick={this.handleClick}default Contacts;

super(props);
  }
  handleClick() {
    console.log(@H_301_487@// null
  }
  render() {
    default Contacts;

// React Component instance
  }
  render() {
    this.handleClick.bind(this)}default Contacts;

this.handleClick = this);
  }
  handleClick() {
    console.log(default Contacts;

'react';

var SomeMixin = {
  doSomething() {

  }
};
= React.createClass({
  mixins: [SomeMixin],
  handleClick() {
    this.doSomething(); // use mixin
  },254)">default Contacts;