React.js note #1
4329 ワード
To improve English skill, all the notes will be written in English
javascript refreshers
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
Reference
この問題について(React.js note #1), 我々は、より多くの情報をここで見つけました
https://velog.io/@codernineteen/React.js-note-1
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
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();
class Human {
gender = "male";
printGender = () => {
console.log(this.gender);
};
}
class Person extends Human {
name = "yechan";
printMyName = () => {
console.log(this.name);
};
}
const person = new Person();
Reference
この問題について(React.js note #1), 我々は、より多くの情報をここで見つけました https://velog.io/@codernineteen/React.js-note-1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol