Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How ReactJS ES6 syntax is different compared to ES5 ?

  • Last Updated : 09 Oct, 2021

In this article, we will learn the 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.

ES5:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • 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.
  • ES5 has huge community support as it is has been used since 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"); // 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"));


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"; // 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"));


Output:

Difference between ES5 and ES6:

  React’s ES5 React’s ES6
1. The full form of ES5 is ECMA Script 5. The full form of ES6 is ECMA Script 6.
2. Data types supported: number, string, null, Boolean and undefined Data types supported: number, string, null, Boolean, undefined, and Symbol.
3. ES5 uses var to declare a variable. ES6 has an additional feature called let and const for defining a variable.
4. In ES5 we cannot import a JSX file to another file. In ES6 we can import a jsx file to another file
5. 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.
6. 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.
7. 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.
8. Es5 don’t need the use of transpiler like babel Es6 needs the use of transpiler like babel
9. 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.
10. Object manipulation is slow for processing.. Object manipulation is fast because of object destructuring.
11. 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.
12. 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.



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!