React Without ES6

Defining React Components

With ES6

This is the usual way of representing a class component in React.

import React from "react";
import "./App.css";

class App extends React.Component {
  render() {
    return <h1>Hello World</h1>;
  }
}

export default App;

Without ES6

This is the way to define the react class components without ES6. We take the help of the create-react-class module. 

Firstly, We require the create-react-class module in our file. Then we create a variable app that uses the createReactClass API to define the render function.

import React from "react";
import "./App.css";

var createReactClass = require('create-react-class');
var App = createReactClass({
  render: function() {
    return <h1>Hello World</h1>;
  }
});

export default App;

 

Output

Declaring Default Props

With ES6

With the presence of ES6, we can directly define the props using the defaultProps property of the component itself.

import React from "react";
import "./App.css";

class App extends React.Component {
  render() {
    return <h1>Welcome to {this.props.name}</h1>;
  }
}

App.defaultProps = {
  name: 'Coding Ninjas'
}

export default App;

Without ES6

When using the createReactClass(), we need to define the function getDefaultProps() to specify the props.

import React from "react";
import "./App.css";

var createReactClass = require("create-react-class");
var App = createReactClass({
  getDefaultProps: function () {
    return {
      name: "Coding Ninjas",
    };
  },
  render: function () {
    return <h1>Welcome to {this.props.name}</h1>;
  },
});

export default App;

 

Output

Setting the Initial State

To demonstrate the setting of the initial state, we will create a counter button that shows the number of times the button is clicked.

With ES6

When using ES6, we can define the component’s initial state by assigning the value of props (initialCount) to the this.state in the constructor.

Counter.js

import React from "react";

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: props.initialCount };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return <button onClick={this.handleClick}>{this.state.count}</button>;
  }
}

export default Counter;

 

App.js

In App.js, we will pass 0 as the initialCount.

import React from "react";
import "./App.css";
import Counter from "./Counter";

class App extends React.Component {
  render() {
    return (
      <h1>
        <Counter initialCount={0} />
      </h1>
    );
  }
}

export default App;

Without ES6

When working with react without ES6, we need to define a new function getInitialState, which fetches the previous value of the state variable.

Counter.js

import React from "react";

var createReactClass = require("create-react-class");
var Counter = createReactClass({
  getInitialState: function () {
    return { count: this.props.initialCount };
  },

  handleClick: function () {
    this.setState({ count: this.state.count + 1 });
  },

  render: function () {
    return <button onClick={this.handleClick}>{this.state.count}</button>;
  },
});

export default Counter;

 

App.js

In the App.js, we do a similar implementation as shown before to create a component in react.

import React from "react";
import Counter from "./Counter.js";

var createReactClass = require("create-react-class");

var App = createReactClass({
 render: function () {
   return <Counter initialCount={0} />;
 }
});

export default App;

 

Output

AutoBinding

To demonstrate the concept of autobinding, we will use a similar example. We will use a button that shows the number of times it has been clicked.

With ES6

In React components declared as ES6 classes, methods follow the same semantics as regular ES6 classes. This means that they don’t automatically bind this to the instance. You’ll have to use .bind(this) in the constructor explicitly.

Counter.js

In the Counter.js, inside the constructor, we explicitly use .bind(this) keyword to bind the handleClick method to use it inside the render method.

import React from "react";

class Counter extends React.Component {
 constructor(props) {
   super(props);
   this.state = { count: props.initialCount };
   this.handleClick = this.handleClick.bind(this);
 }

 handleClick() {
   this.setState({ count: this.state.count + 1 });
 }

 render() {
   return <button onClick={this.handleClick}>
              {this.state.count}
     </button>;
 }
}

export default Counter;

 

App.js

Again, This is the same implementation as seen before in this article.

import React from "react";
import "./App.css";
import Counter from "./Counter";

class App extends React.Component {
  render() {
    return (
      <h1>
        <Counter initialCount={0} />
      </h1>
    );
  }
}

export default App;

Without ES6

When working without the ES6 classes, we do not need to bind explicitly. It automatically binds all the methods.

Counter.js

import React from "react";

var createReactClass = require("create-react-class");
var Counter = createReactClass({
  getInitialState: function () {
    return { count: this.props.initialCount };
  },

  handleClick: function () {
    this.setState({ count: this.state.count + 1 });
  },

  render: function () {
    return <button onClick={this.handleClick}>{this.state.count}</button>;
  },
});

export default Counter;

 

App.js

import React from "react";
import Counter from "./Counter.js";

var createReactClass = require("create-react-class");

var App = createReactClass({
 render: function () {
   return <Counter initialCount={0} />;
 }
});

export default App;

 

Output

This implies that ES6 classes come with a little more boilerplate code for the event handlers. But the upside is that it has slightly better performance in large applications.

Few Options for Autobinding

There are a few options that will help to achieve autobinding. They are:

1. Use createReactClass
2. Use arrow functions to define event handlers
3. Bind methods in the constructor.

Frequently Asked Questions (FAQs)

What is ES6?

ES6 is the 6th version of the ECMAScript programming language. ECMAScript is the standardized javascript language released in 2015.

Which node module can be used to use React without ES6?

We can install the create-react-class module when using react without ES6.

How do we implement autobinding with ES6?

In React with ES6, The binding of this keyword is to be done explicitly using .bind(this) in the constructor.

Key Takeaways

We learned about the concept of using react without ES6. This is an exciting concept that gives us a more profound understanding of React. This article also explained the differences in the use of React with ES6 and React without ES6. We also learned about the implementation of autobinding in React without ES6.

Apart from this, you can also expand your knowledge by referring to these articles on Javascript and React.

You can also consider our React Js Course to give your career an edge over others.