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.jsvar React = require("react"); // ES5
var ReactDOM = require("react-dom"); // ES5
var 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")
); |
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
// Filename - index.jsimport 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 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")
); |
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:
| 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. |