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"; // ES6let 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:
| 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. |
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
