ES6 Feature You need to Know before Learning React

Master these Concepts before Learning React

If you are looking to learn to react, it goes without saying that you should have your Javascript fundamentals figured out.

React also uses many ES6 concepts, which you should already be familiar with. In this tutorial, we will cover the most commonly used ES6 features you should know before learning React.

Learning and understanding how to use these concepts will make your React journey fun and smooth.

Template Literals

ES6 has made working with strings easier. Rather than concatenating strings with the plus(+) sign, template strings provide an easier way.

Template literals also make it easier to work with multi strings

Arrow Functions

Arrow functions make your code more concise. Let’s look at the differences between a normal function and an arrow function.

With an arrow function, rather than using the function keyword, you use the fat arrow(=>), hence making it more concise.

If an arrow function returns a single expression, you can commit the curly braces and the return keyword.

If an arrow function takes a single argument, you can commit the double parathesis around the parameter.

Arrow function are commonly used in array method such as map(), filter(), forEach(), e.t.c

As you can see above, since we are only passing a single argument, we have committed the parentheses.

Destructuring Objects

Destructuring in JavaScript is the process of unpacking values from arrays or properties from objects into distinct variables. It is helpful when working with complex data structures, such as data from databases or an API.

For example, suppose you have a simple object describing a cat

const cat = {
  name: 'Whiskers',
  age: 3,
  color: 'gray',
  breed: 'Persian'
};

To get the cat name, you would normally use dot notation or bracket notation like this:

However, with object destructuring, you can unpack the properties into variable names and assign them to the cat object like this:

The output will be:

My cat Whiskers is 3 months old

Destructuring Arrays

Destcruring arrays is similar to Destructuring objects;. Suppose we have an array of employees:

const employees = [
    'Carol kristen deck ',
    'john weber Smith',
    'Alice k Johnson'
  ];

If we wanted to get the employee on index 1, we would do this:

employees[1]

But with destructuring, we can unpack the values into variables like this:

E1 will be the value of the first employee of the array, E2 is the value of the second employee and so on; if you just want the first employees of the array, you can commit the rest like this:

Object Literals

Object literals allow developers to avoid duplication when writing objects. For example, suppose we have a Task function constructor that looks like this:

With ES6 object literals, you can write both the property and value at once like this;

This way of writing objects reduces redundancy and makes your code cleaner.

Even when it comes to defining a Task instance, you dont have to pass both the property and value; you can shorten it to:

and the output will be:

{
  title: 'Errands',
  description: 'Finish all the errands by 12.00 noon',
  priority: 'High'
}

Stay tuned for Part 2, where we cover more ES6 Concepts.