React Without ES6

Pranay Chauhan
Last Updated: May 13, 2022

Introduction

We all know that how simple it is to write React with ES6 components. Now, What is ES6?

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

Now in this article, we will see some of the react implementations without the use of ES6.

Let us dive into the implementation of React without ES6.

Dependency

To use React without ES6, we need to install a node module create-react-class.

In your React application, open the terminal and run the following command:

npm i create-react-class

Now we are ready to do the implementation

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

Lightbox

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

Lightbox

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.

For more information about the react framework for frontend development, get into the entire Frontend web development course.

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think