ReactJS - Without ES6 ECMAScript

As per Ecma International, ECMAScript is a general purpose, vendor-neutral and cross platform programming language. Ecma International defines the ECMAScript language syntax, its features and various aspect of the language and release it as ECMAScript specification. JavaScript is one of the popular implementation of the ECMAScript used for client side programming in the browser.

The latest specification of ECMAScript is ECMAScript 2022 and the most popular specification is ECMAScript 2015 language specification, which is also referred as ES6. Browser supports for ES6 is still lacking in older browser even through nearly all modern browser supports ES6. Now, it is considered safe to use ES6 features in client side scripting.

React application can be developed using ES6 language specification. Some of the core ES6 features used by React library are ES6 class and ES6 modules. To support older browser, which does not allows ES5 syntax, React provides alternative syntax to create components using ES5.

Create React class (create-react-class)

create-react-class is a module provided by React community to create new component without using ES6 syntax. Also, we should install create-react-class package in the current application to use ES5 syntax.

Let us create a React app using create-react-app

create-react-app myapp

Now, install create-react-class package into our newly created application as shown below −

npm i create-react-class --save

Now, run the application by running the below command,

cd myapp
npm start

Let us see how to create a simple hello world component using both ES5 (myapp/src/components/ES5/HelloWorldES6.js) and ES6 syntax (myapp/src/components/ES5/HelloWorldES6.js) and learn what needs to be done to work with ES5 syntax.

The HelloWorldES6 component in ES6 Syntax is as follows −

import React from 'react'
class HelloWorldES6 extends React.Component {
   render() {
      return <h1>Hello, {this.props.name}</h1>
   }
}
export default HelloWorldES6

The same component (myapp/src/components/ES5/HelloWorldES5.js) can be created using below code in ES5 syntax as shown below −

var createReactClass = require('create-react-class');
var HelloWorldES5 = createReactClass({
   render: function() {
      return <h1>Hello, {this.props.name}</h1>;
   }
});
export default HelloWorldES5;

Now, let us use the component in the our application (App.js) as shown below −

import HelloWorldES5 from "./components/ES5/HelloWorldES5";
import HelloWorldES6 from "./components/ES5/HelloWorldES6";
function App() {
   return (
      <div>
         <HelloWorldES5 name="Peter" />
         <HelloWorldES6 name="John" />
      </div>
   );
}
export default App;

The output of the application is as follows

Create React Class

Set default value for props (getDefaultProps)

Let us set a default value for name props in ES6.

class HelloWorld extends React.Component {
   render() {
      return <h1>Hello, {this.props.name}</h1>;
   }
}
HelloWorld.defaultProps = {
   name: 'John'
}

The same can be accomplished in ES5 using below syntax

var createReactClass = require('create-react-class');
var HelloWorld = createReactClass({
   render: function() {
      return <h1>Hello, {this.props.name}</h1>;
   },
   getDefaultProps: function() {
      return {
         name: 'John'
      };
   }
});

Here, getDefaultProps is a special function used to set default values for the props of the components.

Set initial state (getInitialState)

As we know, this.state can be used in the component class constructor to set the initial value of the state.This is one of the ES6 class feature.

import React from 'react'
class BookListES6 extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         list: ['C++ Programming', 'Java Programming']
      };
   }
   render() {
      return <ol>
         {this.state.list && this.state.list.map((item) =>
            <li>{item}</li>
         )}
      </ol>
   }
}
export default BookListES6

The same can be accomplished using getInitialState in ES5 syntax as shown below −

var createReactClass = require('create-react-class');
var BookListES5 = createReactClass({
   getInitialState: function() {
      return {
         list: ['React Programming', 'Javascript Programming']
      };
   },
   render: function() {
      return <ol>
      {this.state.list && this.state.list.map((item) =>
         <li>{item}</li>
      )}
      </ol>
   }
});
export default BookListES5;

Now, let us use the component in the our application (App.js) as shown below −

import BookListES6 from "./components/ES5/BookListES6";
import BookListES5 from "./components/ES5/BookListES5";
function App() {
   return (
      <div>
         <BookListES6 />
         <BookListES5 />
      </div>
   );
}
export default App;

The output of the application is as follows

Set Initial State

Auto binding of event handler

As we know, the event handler method defined in the React component class needs to be bind to this object in the class constructor. The pseudo code is as follows

constructor(props) {
   super(props);
   this.state = {message: 'Hello!'};
   // binding of `this` object
   this.handleClick = this.handleClick.bind(this);
}

In ES5, the binding is not necessary as the function is by default bound to the this object.

Advertisements