ES5 and ES6 React component styles

Edit on GitHub
Dec 5, 2016
Last updated: Jul 12, 2024
ReactJS

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

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

ES6 Class Components

 1import React, { Component } from "react";
 2
 3export default class Login extends Component {  
 4  render() {
 5    return (
 6      <div>
 7        Login Form will go here
 8      </div>
 9    )
10  }
11}

No autobind, requires explicit bind with ES6 class

1// Works fine with ES5 createClass
2<div onClick={ this.handleClick() }></div>
3
4// Requires Explicit binding with ES6 Class
5<div onClick={ this.handleClick().bind(this) }></div>

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

ES5 Stateless Component

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

ES6 Stateless Component

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

1function HelloWorld(props) {
2  return <h1>Hello World!</h1>
3}

Notes