Open In App

React.js without ES6

Improve
Improve
Like Article
Like
Save
Share
Report

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

 



Last Updated : 11 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads