两种方式
- 单页面应用
- 多页面应用
知识点
开始–> 下一代的JS语法 --> react基础语法 --> debugging --> styling component
–> component deep dive --> http request --> routing --> forms and validation --> redux
–> authentication --> testing introduction --> deployment --> Bonus(Animation Next steps)
Key Points
- code along
- check my source code
- practice practice practice
下一代JS语法
1. let&const
推荐使用let和const, 不用var
let-->变量
const --> 常量
2.箭头函数
//老式语法
function add(number) {
return number+1;
}
//新式语法
const add = (number) => {
return number +1;
};
const add = number => number +1 ;
箭头函数没有this的烦恼
3. 导入导出
3.1 导出
export default person;
export const data = [1,2,3]
import person from './person.js';
import ps from './person.js';
//导出default都是导入的person, 尽管名字不一样
import {data} from './person.js';
import {data as d } from './person.js';
//导入特定的东西
4. 理解类
以下为ES6推荐写法
class Person{
name = "zoe";
getName = () => this.name;
}
class Man extends Person{
age = 29;
getInfo = () => {
console.log(this.name);
console.log(this.age);
}
}
5. Spread & Rest Operator
const A = [1, 2 ,3, 4]
const newA = [...A, 12, 34]
const o = {
name: "taojian",
age: 12,
}
const newO = {...o, color:'blue'}
6. Destructuring
const a = [1, 2, 3, 4, 5];
const [b, c] = a;
const o = {
name: 'zoe',
age: 12,
}
const {name} = o;
Destructuring在function中非常好用,如果不使用,那么将传入一个总的object,不太好
比如
const printName = ({name}) => {
console.log(name);
}
const o = {
name: 'zoe',
age: 27,
};
printName(o)
7. primitive type和reference type
7.1 primitive type
int
float
string
7.2 reference type
object
json_dict
const person = {
name: 'max'
}
const secondPerson = person;
// copy the references, pointing to the object
// anything changes in the copy, changes the original
const secondPerson = {...person}
// copy all the properties of this person object
// anything changes in the copy, dont change the original
8. Array Functions
const numbers = [1, 2, 4]
const doubleNumberArray = numbers.map((num) => {
return num*2;
})
const doubleNumberArray = numbers.map((number) => number*2);
Particularly important in this course are:
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