Open In App

How ReactJS ES6 syntax is different compared to ES5 ?

Improve
Improve
Like Article
Like
Save
Share
Report

Both ES6 and ES5 are Javascript scripting languages in the development industry. ECMA Script or ES is a trademarked scripting language made by ECMA International. The European Computer Manufacture Association or ECMA is used for client-side scripting for the worldwide web. ES5 was released in 2009 and ES6 in 2015. ES5 was good but lengthy. The new ES6 is a major update and enhancement on ES5 in terms of code optimization and readability, in other words, ES-6 syntax helps an individual the long, tedious code a bit shorter and easy to understand and grasp easily.

React ES5:

  • The full form of ES5 is ECMA Script 5 and was developed in 2009.
  • Datatypes allowed here are number, string, null, Boolean, undefined, and Symbol.
  • ES5 uses the require module to import any member module in our script file.

Syntax for Import:

var React = require('react'); // ES5

  • In ES5 we can only use var to define a variable in the global scope.
  • Es5 export any component as a module using the module.exports keyword.

Syntax for export:

 module.exports = Component; // ES5

  • ES5 uses the function keyword along with the return keyword to define a function.

Syntax for Function:

// ES5
var sum = function(x, y) {
return x + y;
};

  • ES5 uses the createReactClass() or React.createClass() API to create a react component class and defines a react component state using getInitialState() method.
  • Object manipulation is slow for processing.
  • ES5 lacks new features for its performance so it is comparatively low which makes it less readable (with time).
  • ES5 has huge community support since it has been used for long.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure:

Example: This example show implementation of a basic counter app in the es5 syntax.

Javascript




// Filename - index.js
 
var React = require("react"); // ES5
var ReactDOM = require("react-dom"); // ES5
var createReactClass = require("create-react-class"); // ES5
 
// ES5 Syntax
var CountComp = createReactClass({
    getInitialState: function () {
        return {
            counter: 0,
        };
    },
    Increase: function () {
        this.setState({
            counter: this.state.counter + 1,
        });
    },
    Decrease: function () {
        this.setState({
            counter: this.state.counter - 1,
        });
    },
    render: function () {
        return (
            <div>
                <button onClick={this.Increase}>
                    Count increase
                </button>
                <h1> {this.state.counter} </h1>
                <button onClick={this.Decrease}>
                    Count decrease
                </button>
            </div>
        );
    },
});
 
// ES5 Syntax
var Component = createReactClass({
    render: function () {
        return (
            <div>
                <CountComp />
            </div>
        );
    },
});
 
ReactDOM.render(
    <Component />,
    document.getElementById("root")
);


Steps to Run the Application: Use this command in the terminal inside the project directory.

npm start

Output: This output will be visible in the http://localhost:3000/ on the browser window.

es

React ES6:

  • The full form of ES6 is ECMA Script 6 and was published in 2015.
  • Datatypes allowed here are number, string, null, Boolean, undefined, and Symbol.
  • ES6 uses the import module to import any member module in our script file.

Syntax for Import:

import React from 'react'; // ES6

  • In ES6 we can also use let and const to define a variable locally.
  • Es5 export any component as module using the export default keyword.

Syntax for export:

export default Component; // ES6

  • In ES6 we don’t need to use a function keyword to define a function. The use of the Arrow function in ES6 makes it more compact. These are a function which is described by the ‘=>’ syntax.

Syntax for Funtion:

const sum = (x,y)=>{ return x+y };// ES6
  • ES6 uses the ES6 class which extends React.Component and defines a react component state using this.state in the constructor().
  • Object manipulation is fast because of object destructing. This process strengthens the binding pattern by allowing its pattern matching.
  • ES6 provides high performance due to advanced features added to it and code optimization.
  • ES6 has less community support than ES5 as it is a recent update on ES5 and not all browser supports it.

Example 2: This example implements a simple counter application using the ES6 syntax.

Javascript




// Filename - index.js
 
import React from "react"; // ES6
import ReactDOM from "react-dom"; // ES6
 
let CountComp = (Compprop) =>
    class extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                counter: 0,
            };
            this.Increase = this.Increase.bind(this);
            this.Decrease = this.Decrease.bind(this);
        } // ES6 Syntax
 
        // ES6 Syntax
        Increase() {
            this.setState({
                counter: this.state.counter + 1,
            });
        }
        Decrease() {
            this.setState({
                counter: this.state.counter - 1,
            });
        }
        render() {
            return (
                <div>
                    <Compprop
                        {...this.state}
                        increase={this.Increase}
                        decrease={this.Decrease}
                    />
                </div>
            );
        }
    };
 
// ES6 Syntax
const Button = (props) => {
    return (
        <div>
            <button onClick={props.increase}>
                Count increase
            </button>
            <h1> {props.counter} </h1>
            <button onClick={props.decrease}>
                Count decrease
            </button>
        </div>
    );
};
 
// ES6 Syntax
let CompClick = CountComp(Button);
 
const Component = () => {
    return (
        <div>
            <CompClick />
        </div>
    );
};
 
ReactDOM.render(
    <Component />,
    document.getElementById("root")
);


Steps to Run the Application: Use this command in the terminal inside the project directory.

npm start

Output: This output will be visible in the http://localhost:3000/ on the browser window.

es

Differences between React JS ES5 and ES6:

React’s ES5 React’s ES6
The full form of ES5 is ECMA Script 5. The full form of ES6 is ECMA Script 6.
Data types supported: number, string, null, Boolean and undefined Data types supported: number, string, null, Boolean, undefined, and Symbol.
ES5 uses var to declare a variable. ES6 has an additional feature called let and const for defining a variable.
In ES5 we cannot import a JSX file to another file. In ES6 we can import a .jsx file to another file
ES5 uses the Require js module to include a react module or a component. ES6 uses the import module to include a react module or a component.
ES5 uses the function keyword along with the return keyword to define a function. In ES6 we don’t need to use a function keyword to define a function. The use of the Arrow function in ES6 makes it more compact.
Props are implicitly defined in ES5 and we implicitly bind “this” to functions. In ES6 we pass the props explicitly through the constructor() and we explicitly bind “this” to functions inside the constructor.
ES5 don’t need the use of transpiler like babel ES6 needs the use of transpiler like babel
In ES5 we need to use commas to separate functions or methods within classes. In ES6 we don’t need to use commas to separate functions or methods within classes.
Object manipulation is slow for processing.. Object manipulation is fast because of object Destructuring.
ES5 lacks new features for its performance so it is comparatively low. ES6 provides high performance due to advanced features added to it and code optimization.
ES5 has huge community support as it is has been used since a long. ES6 has less community support than ES5 as it is a recent update on ES5.


Last Updated : 13 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads