How ReactJS ES6 syntax is different compared to ES5 ?

11 May, 2022
In this article, we will learn what’s the exact difference between ES6 and ES5 syntaxes in ReactJs. 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 bit shorter and easy to understand and grasp easily.
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:
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:
 module.exports = Component; // ES5
ES5 uses the function keyword along with the return keyword to define a function.
Syntax:
// 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.
Creating 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: It will look like the following.
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Example 1: Using React’s ES5 syntax
Inside the index.js file
Javascript
var React = require("react"); // ES5var ReactDOM = require("react-dom"); // ES5var createReactClass = require("create-react-class"); // ES5 // ES5 Syntaxvar 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 Syntaxvar Component = createReactClass({  render: function () {    return (      <div>        <CountComp />      </div>    );  },}); ReactDOM.render(<Component />,    document.getElementById("root"));
Output:
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:
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:
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:
var 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: Using React’s ES6 syntax
Inside the index.js file
Javascript
import React from "react"; // ES6import 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 Syntaxconst Button = (props) => {  return (    <div>      <button onClick={props.increase}>        Count increase      </button>      <h1> {props.counter} </h1>      <button onClick={props.decrease}>        Count decrease      </button>    </div>  );}; // ES6 Syntaxlet CompClick = CountComp(Button); const Component = () => {  return (    <div>      <CompClick />    </div>  );}; ReactDOM.render(<Component />,  document.getElementById("root"));
Output:
Difference between ES5 and ES6:
amansingla
ES6
JavaScript-Questions
Picked
React-Questions
JavaScript
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.