React.js note #1

4329 ワード

To improve English skill, all the notes will be written in English

javascript refreshers


Exports and imports


Make our code modular.
Export default and export const
- Ex. export default person – import person(name is optional) from ./person.js
- Ex. Export const clean = () => {} – import {clean}(name is defined, not optional) from ./utitlity.js

Classes


Declaration: Class can have property and methods
Usage: Assignment with new keyword, usage with .method()
Inheritance: child class extends parents class . when you inherit class, you should use super(); in child constructor
Ex.
class Human {
  constructor() {
    this.gender = "male";
  }

  printGender() {
    console.log(this.gender);
  }
}

class Person extends Human {
  constructor() {
    super();
    this.name = "yechan";
  }

  printMyName() {
    console.log(this.name);
  }
}

const person = new Person();

person.printMyName();
person.printGender();
ES7 changes:
constructor() {this.property = value} -> property = value (no constructor)
method() {} -> method = () => {} (arrow)
class Human {
  gender = "male";

  printGender = () => {
    console.log(this.gender);
  };
}

class Person extends Human {
  name = "yechan";

  printMyName = () => {
    console.log(this.name);
  };
}

const person = new Person();

Spread & Rest Operators


Spread: used to split up array elements or Object properties
Rest: used to merge a list of function arguments into an array.

Destructuring


Extract array elements or object properties and store them in variables
Array:const [a, b] = [‘hello’, ‘world’] Object: const {name} = {name: ‘world’}

Reference and primitive types


Number , strings, Booleans -> primitive type (completely copy)
Objects, arrays -> Reference type (pointer copy) -> so if you change original object properties, a object which refer to original will be changed. To copy complete object and array, use Spread operator

Array functions


• map() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
• find() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
• findIndex() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
• filter() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
• reduce() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce?v=b
• concat() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat?v=b
• slice() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
• splice() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice