ES5 and ES6 React component styles

December 5, 2016

NOTE (2024-07-12): Stateless components are no longer a thing, they're called function components now, and can optionally have state. This is a really old post and may not reflect modern React practices.

ES5 createClass Component
ES6 Class Components
ES5 Stateless Component
ES6 Stateless Component

ES5 createClass Component

code

var HelloWorld = React.createClass({
  render: function () {
    return <h1>Hello World!M/h1>;
  }
});

ES6 Class Components

code

import React, { Component } from "react";

export default class Login extends Component {
  render() {
    return <div>Login Form will go here</div>;
  }
}

No autobind, requires explicit bind with ES6 class

code

// Works fine with ES5 createClass
<div onClick={ this.handleClick() }></div>

// Requires Explicit binding with ES6 Class
<div onClick={ this.handleClick().bind(this) }></div>

PropTypes are declared separately
Default props are declared separately
Set initial state in constructor

ES5 Stateless Component

code

var HelloWorld = function (props) {
  return <h1>Hello World!</h1>;
};

ES6 Stateless Component

code

const HelloWorld = (props) => {
  return <h1>Hello World!</h1>;
};

code

function HelloWorld(props) {
  return <h1>Hello World!</h1>;
}