Index

Reactjs

  1. Arrow Function
  2. Spread
  3. Destructuring
  4. Understanding the Base Features Syntax
  5. Working with Lists and Conditionals
  6. Styling React Components Elements

Destructuring


Destructuring

Easily extract array elements or object properties and store them in variables


Array Destructuring

[a, b] = ['Hello', ‘Max’]
console.log(a) // Hello
console.log(b) //Max


Object Destructuring

{name} = {name:'Max', age: 28}
console.log(name//Max
console.log(age) // undefined


const numbers = [123]

[num1, num2] = numbers;

console.log(num1, num2)



Reference and Primitive Types Referesher


const number = 1//Primitive
const num2 = number; //It will copy the value


Objects and array are reference type:

const person = {
    name'Max'
};

const secondPerson = Person;
person.name = 'Manu';

console.log(secondPerson);


images/403-1.png


To real copy use spread

const person = {
    name'Max'
};

const secondPerson = {
    ...person

};
person.name = 'Manu';

console.log(secondPerson);


images/403-2.png


Refereshing Array Functions



const numbers = [123]

const doubleNumArray = numbers.map((num)=> { return num * 2;});

console.log(numbers);
console.log(doubleNumArray);



images/403-3.png