Some-Helpful-Topic-For-Learning-React

3 Min. Read
Sep 22, 2019

Introduction

React JS is Javascript library for building the User Interface. It is used to build a single page applications. It builds an independent components such as navbar, sidebar, section and integrates those components to create a single page application. It uses the javascript methods and features, so it is fundamental to have a good grasp on the javascript. Some of the widely used features of the javascript in the react are as explained below:

Destructuring

It is a javascript syntax which makes possible to extract the data from the array and the objects into a variable. It is a quicker method for directly assigning the values to the objects. For e.g

Asssign Variables from objects

1
2
3
4
5
6
7

var  values = {a:1, b:2, c:3};
const {a,b,c} = values;
console.log(a);
console.log(b);
console.log(c);

output: 1 2 3

The above code is equivalent to the following

1
2
3
4

  var  values = {a:1, b:2, c:3};
  var a = values.a;
  var b = values.b;
  var c = values.c;

Assign variables from arrays

1
2

const[a,b] = [1,2,3,4,5];
console.log(a,b);

output: 1 2

Array Methods

forEach

The forEach() method calls a function iterating over a each element in an array, in order.

1
2
3
4
5
6

  var evens = [0, 2, 4];

  evens.forEach(even => {
  console.log(`${even} is not odd!`);
});

output:

0 is not odd!
2 is not odd!
4 is not odd!

Map

The map() method creates a new array with the results of calling a function for every array element. It calls the provided function for every element in an array.

1
2
3

  var personssIds = persons.map(function (person) {
  return person.id
});

The equivalent to the above code in arrow function is

1

  const personsIds = personss.map(person => person.id);

Filter

The filter() method is used to refine the element from an array.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

  var persons = [
  {
    id: 1,
    name: "Ram",
    age: 22,
  },
  {
    id: 2,
    name: "Shyam",
    age: "23",
  },
  {
    id: 5,
    name: "hari",
    age: 33,
  },
  {
    id: 66,
    name: "Sita",
    age: 44,
  }
];

var people = persons.filter(function (person) {
  return person.name === "hari";
});

The equivalent to above code is

1

const people = persons.filter(peson => person.name === "hari");

Basically, if the callback function returns true, the current element will be in the resulting array. If it returns false, it won’t be.

Arrow Funcitons

It can be also said as a syntactic sugar method for a regular funciton as it simplifies the structure of the functions.

1

const personsIds = persons.map(person => person.id);