ES6 Features for React JS

In this tutorial, we are going to learn about the ES6 Features for React JS.
Submitted by Godwill Tetah, on November 09, 2020

ES6 stands for ECMAScript 6.

Today, we will be looking at some ES6 features useful in react js. So quickly, we are going to explore some useful syntax and features.

In this article, we'll use create an HTML file with the name index.html.

ES6 Variables

In ES6, variables don't only apply with the keyword var, some additions have been made to make coding simpler.

Below is a look at our index.html,

<html>
    <head>
        <title>REACT</title>
    </head>
    <body>
        <center>
            <script></script>
            <h3>Hello World!</h3>
            <!--</a><img src="quote-for-writers.PNG"> -->
        </center>
    </body>
</html>

In ES6 format, you can also use the let word to declare and assign a variable.

Also, ES6 introduces the const key word to declare and assign variables.

Now here's the difference, the let keyword is block scope but functions like the normal var which can be local or global.

The const keyword is used to assign values to a variable that cannot be changed, therefore it's constant.

Example:

In your text editor, add some lines of code under the script tag of your html document.

Add a const type of variable and try changing it later in another instance.

Do same with the let key word.

const  x = 10;
let  y = 5;

ES6 Functions

I'm sure some of you have noticed a different way of writing functions in some tutorials but don't really know where it's coming from.

The new ES6 system has added a new way of writing JavaScript functions called Arrow functions.

Arrow functions will be used in some of our react js code (not frequently). These arrow functions are kind of easier to write than the regular functions.

Example:

In your text editor, add some lines of code under the script tag of your html document.

var x = ( ) => {
    return 'hello'
}
alert (x( ))

var x = ( ) => 'hello' ;
alert (x( ))

The return word and the curly brackets can be left out if it's just one statement. With the arrow functions, parameters can be added in the brackets just like with normal functions.

ES6 Classes

ES6 equally added a new kind of function called classes.

Classes are not initiated with the key word function and it's and it's parameters are placed in the constructor method.

Below is a sample; we'll see more when dealing react js components.

class myClass {
    constructor(name) {
        this.level = 20 ;
    }
}

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples