React.js without ES6

Last Updated : 11 Apr, 2023

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"  // Make a App class component using ES6 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"  // Created a variable createReactClass which  // holds a main create-react-class module  // with require module var createReactClass = require('create-react-class');  // App  takes a variable and renders  // the output function for showing // results in screen 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() {     // we set the default value      // of props and called with the help of es6      return <h1>Hello Welcome to, {this.props.name}</h1>;   } }  // Assigned the default value of props. 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({    // We added this getDefaultProps    // function parameter as a passed object    // for getting props values.   // We return all the name with return function   getDefaultProps: function () {     return {       name: "GeeksforGeeks"     }    },   render: function () {     // We call the name from here!     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);         // setting the initial count         this.state = { count: props.initialCount };      }      handleClick = () => {         // for increasing by 1 with on click          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({      // Use of getInitialState method for initial state     getInitialState: function () {          // Setting the initialCount         return { count: this.props.initialCount };      },      handleClick: function () {         // Incrementing by 1         this.setState({ count: this.state.count + 1 });      },      render: function () {         // Output         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';  // Make a App class component using ES6 class App extends React.Component {    render() {      // Passing the value of initialCount;     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';  // Make a App class component using ES6 class App extends React.Component {    render() {   // passing the value of initialCount;     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

What is “React Fiber”?

shiv_ka_ansh

Improve

Article Tags :

React.js without ES6

Similar Reads