Reactjs is the best frontend library ever created. It is made by Facebook to perform several tasks in the frontend itself. ES6 is the standardization of javascript for making code more readable and more accessible.
If we don’t use ES6 in react, there is an alternative to perform. We use create-react-class instead of ES6. Let’s see some variations between ES6 and the create-react-class method.
For a detailed article for ES6, please refer: Introduction to ES6
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
- Step 3: After creating the ReactJS application, Install the create-react-class modules using the following command.
npm install create-react-class
Project Structure:
1. Use of Create-react-class: It is used as an alternative to default class-based component.
ES6 implementation:
Filename: App.js
javascript
import React from 'react'
import "./App.css"
class App extends React.Component {
render() {
return <h1>Hello Welcome to, GeeksforGeeks</h1>;
}
}
export default App;
|
Create-react-class module:
Filename: App.js
javascript
import React from 'react'
import "./App.css"
var createReactClass = require( 'create-react-class' );
var App = createReactClass({
render: function () {
return <h1>Hello Welcome to, GeeksforGeeks</h1>;
}
});
export default App;
|
Output:
2. Declaring Default props in React: With ES6, default props can be used as a property of reactjs class component.
ES6 implementation:
Filename: App.js
javascript
import React from 'react'
import "./App.css"
class App extends React.Component {
render() {
return <h1>Hello Welcome to, { this .props.name}</h1>;
}
}
App.defaultProps = {
name: 'GeeksforGeeks'
}
export default App;
|
Create-react-class module:
Javascript
import React from 'react'
import "./App.css"
var createReactClass = require( 'create-react-class' );
var App = createReactClass({
getDefaultProps: function () {
return {
name: "GeeksforGeeks"
}
},
render: function () {
return <h1>Hello Welcome to, { this .props.name}</h1>;
}
});
export default App;
|
Output:
3. Setting Initial state: Same as declaring default props, setting initial state is the same. For setting initial state, we need to assign this.state in the constructor. For this Make Counter.js file.
ES6 implementation:
Filename: Counter.js
javascript
import React from 'react'
class Counter extends React.Component {
constructor(props) {
super (props);
this .state = { count: props.initialCount };
}
handleClick = () => {
this .setState({ count: this .state.count + 1 });
}
render() {
return (
<button onClick={ this .handleClick}>
{ this .state.count}
</button>
);
}
}
export default Counter;
|
Create-react-class module Implementation:
Filename: Counter.js
javascript
import React from 'react'
var createReactClass = require( 'create-react-class' )
var Counter = createReactClass({
getInitialState: function () {
return { count: this .props.initialCount };
},
handleClick: function () {
this .setState({ count: this .state.count + 1 });
},
render: function () {
return <button onClick={ this .handleClick}>
{ this .state.count}
</button>
}
});
export default Counter
|
Render File: In this file we will call the Counter.js file.
Filename: App.js
javascript
import React from "react" ;
import "./App.css"
import Counter from './Counter' ;
class App extends React.Component {
render() {
return <h1><Counter initialCount={0} /></h1>;
}
}
export default App;
|
Output:
4. Auto binding in ES6 – Es6 class component has the same semantics as the regular es6 class. It does not bind ‘this’ as default we need to explicitly bind ‘this’ for getting it to work. But create-react-class module automatically binds.
ES6 implementation:
Filename: Counter.js
javascript
import React from 'react'
class Counter extends React.Component {
constructor(props) {
super (props);
this .state = { count: props.initialCount };
this .handleClick = this .handleClick.bind( this )
}
handleClick() {
this .setState({ count: this .state.count + 1 });
}
render() {
return (
<button onClick={ this .handleClick}>
{ this .state.count}
</button>
);
}
}
export default Counter;
|
Create-react-class module implementation: Same as setting the initial state example.
Render File: In this file we will call the Counter.js file.
Filename: App.js
javascript
import React from "react" ;
import "./App.css"
import Counter from './Counter' ;
class App extends React.Component {
render() {
return <h1><Counter initialCount={0} /></h1>;
}
}
export default App;
|
Output:
Note: Please make sure that ES6 implementation of setting initial state is an alternative to bind. this, i.e using the arrow function in the handleClick function resolves the issue for ES6.
For auto binding:
- Use bind. this in the handleClick function.
- Use arrow function for handleClick function
- Use create-react-class.
Reference: https://reactjs.org/docs/react-without-es6.html
Last Updated :
11 Apr, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...