Skip to content
Related Articles
Open in App
Not now

Related Articles

React.js without ES6

Improve Article
Save Article
Like Article
  • Last Updated : 21 Feb, 2022
Improve Article
Save Article
Like Article

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 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:

  •  
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: 
 
 
Reference: https://reactjs.org/docs/react-without-es6.html
 

My Personal Notes
arrow_drop_up
Like Article

Save Article

Related Articles
1.
How ReactJS ES6 syntax is different compared to ES5 ?
2.
How re-render a component without using setState() method in ReactJS ?
3.
User to User private Chat App using ReactJS and Firebase | Without socket programming
4.
How to filter an array of objects in ES6 ?
5.
Array Helper Methods in ES6
6.
Difference between node.js require and ES6 import and export
7.
Motivation to bring symbols in ES6
8.
How to debug code in ES6 ?
9.
ES6 Arrow Function
10.
How to clone array in ES6 ?
Previous
How to pass data from Parent to Child component in Angular ?
Next

How to get input value search box and enter it in AngularJS component using Enter key ?
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
shiv_ka_ansh
@shiv_ka_ansh
Vote for difficulty





Improved By :
Article Tags :
Report Issue
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!