Skip to content
Related Articles

Related Articles

Improve Article

React.js without ES6

  • Last Updated : 06 Aug, 2021

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:

    App.js




    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:

    App.js




    import React from 'react'
    import "./App.css"
      
    // Created a variable createReactClass which 
    // holds a main create-react-class molule 
    // 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:

    App.js




    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:

    Counter.js






    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:

    Counter.js




    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.

App.js




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:

    Counter.js




    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.

App.js




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




My Personal Notes arrow_drop_up
Recommended Articles
Page :