How ReactJS ES6 syntax is different compared to ES5 ?
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
var React = require( "react" );
var ReactDOM = require( "react-dom" );
var createReactClass = require( "create-react-class" );
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>
);
},
});
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.
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
import React from "react" ;
import ReactDOM from "react-dom" ;
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 );
}
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>
);
}
};
const Button = (props) => {
return (
<div>
<button onClick={props.increase}>
Count increase
</button>
<h1> {props.counter} </h1>
<button onClick={props.decrease}>
Count decrease
</button>
</div>
);
};
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.
Differences between React JS ES5 and 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
Share your thoughts in the comments
Please Login to comment...