1. React

1.1. ES new features

1.1.1. Spread and rest operator

Spread Used to build a new array based on the one we have

const numbers = [1,2,3];
const newNumbers = [...numbers,4];

console.log(newNumbers)
// should be [1,2,3,4]

const person = {
    name: 'Max'
};

const newPerson = {
    ...person,
    age:28
}
console.log(newPerson);

Rest operator use to filter

const filter = (...args) => {
    return args.filter(el => el === 1);
}
console.log(filter(1,2,3))
// [1]

1.1.2. destructing

const numbers = [1,2,3];
[num1, ,num3] = numbers;
console.log(num1,num3);

1.1.3. Reference

const person = {
    name: 'Max'
};

const secondPerson = person;
// if you use const secondPerson = {
//    ...person 
// } then it should be another object insead of reference

person.name = 'Manu';

console.log(secondPerson);
// Manu

1.1.4. array refreashing

const numbers = [1,2,3];
const doubleNumArray = numbers.map((num) => {
    return num * 2;
})
// [1,2,3]
// [2,4,6]

1.2. React basic

React Document Notes

Super()

在 JavaScript class 中，每次你定义其子类的构造函数时，都需要调用 super 方法。因此，在所有含有构造函数的的 React 组件中，构造函数必须以 super(props) 开头。