REACT JS ES6 FEATURES

Hi. Welcome to our website and we are very happy to see you here today. If you are here for the first time, I recommend you check out and subscribe to our YouTube channel to enjoy the video content of what we do.

Today, we will discuss about some essential ES6 features used in React JS. ES6 stands for ECMAScript6 which is like a standard used in writing JS (JavaScript) code. From the past years, ES6 has been updating to better standards thus the reason why we have different versions like ECMAScript5 ... and today we are working with version 6 which is the most stable and widely used version now at the time of writing this article.

So you see, it will be kind-of challenging for a modern developer to ignore such changes because it affects him or her.

In React JS, there are some implementations of these ES6 features which we are going to look at. But we will implement them to see how they work in a HTML document.

Variables

ES6 implemented an unusual way of creating a variable using the const keyword. Though we also have the let, I will focus on explaining about the const.

Creating a variable with the keyword const, makes the variable immutable, meaning it’s value can not be changed. For example ;

const x = 5; is constant

Changing that value elsewhere in the same scope will cause an error or will not work like in the case below.

index.html

Thus, take note of how you use constants in React JS.

ES6 Functions

The modifications in ES function are very useful in React JS and applicable or implemented in most cases. We have the ES6 Arrow function and Classes.

An arrow function is just a shorter form of writing a simple JavaScript function. It is called arrow because its syntax has something similar to an arrow. While a Class is equally a function but rather starts with the word class and not function.

Below are examples.

Arrow function:

Arrow functions isn’t obliged to have the return, function keyword and curly braces.

var name = (x, y) => x * y;

Classes:

Constructors store class properties and be used by declaring class.property. For example; me.Id as seen below outputs the name that will be passed as argument.

class me {
  constructor(name) {
    this.Id = name;
  }
}

Have you understood?

You can always ask your questions or drop comments below.

Thanks.

Comments

JavaScript Functions

Hi there, and welcome to another exciting lesson on JavaScript. If this is your first time here, please do well to check out our previous lessons. In the previous lesson, we were discussing JavaScript math methods. It was very intuitive as we got to learn how to use the various math methods. To proceed, we shall be looking at JavaScript functions. A function in JavaScript like in every other programming language could be defined as a block of code that is written to perform a particular task, and this function is usually invoked or called before it is being implemented. We have been talking about methods throughout the previous lessons right. Do you know that those methods are actually functions? Yes they are functions. You can now have an overview of the importance of functions in every programming language. How do we create a function in JS? To create a function, you follow the format function functionName(Argument) {//Block of code }. Some functions do have a return val...

JavaScript Math Methods

Hello everyone, and welcome to another exciting JavaScript lesson. In the last lessons you have been seeing other methods being used in JS (for example, the string methods). We shall go further into exploring other methods. This time, it’s going to be math methods. Do not move an inch because it’s going to be a very exciting. Before we look at what a math method is, let’s have an overview of math objects. A math object in JavaScript is a static built-in object that includes properties and methods used in performing mathematical tasks. Talking about math properties, they have the syntax Math.property . Some examples are Math.E that returns Euler’s number, Math.PI that returns PI, Math.LN2 that returns the natural logarithm of 2, and many others. The various JavaScript methods contained in the math object, thus, make mathematical operations easier and reduce effort as well as time in math-oriented programming. Some JS methods include abs( ), ceil( ), cos( ), sqrt( ), pow( ), log( ) ...

How to generate random numbers using NumP1

Hello. Welcome to another edition on this platform. For more better understanding, do checkout our YouTube channel to get the video tutorial. In this article of today, we are going to see how to generate random numbers using any of the following methods: Generating a random number Generating a random float and integer Generating random number arrays Generating random number from an array What is a random number? This is a number which cannot be predicted before its occurrence. This number might not different every time. Programmatically, they are two categories of random numbers: Pseudo-Random numbers True Random numbers. Just as programs which are written by programmers are a set of instructions, we must follow an algorithm to generate random numbers. Random numbers which are generated using an algorithm are called Pseudo-Random numbers. To generate a true random number, it is important to get the data from sources such as the keyboards, mou...

Work Diary

Search This Blog