課程大綱：

React 基礎(chǔ)入門培訓(xùn)

課程將重心放在 React 基礎(chǔ)知識(shí)，從基本的 JSX 語(yǔ)法開始，帶你逐漸領(lǐng)略元素，組件，props & state，

生命周期等 React 基本組成單位，后我們會(huì)對(duì) React 的 HOC 作一定的了解，以感受 React 組件化的編程思想。

1 React 簡(jiǎn)介
2 JSX
3 組件
4 React 生命周期
5 條件渲染
6 表單
7 HOC & mixins
8 ES6 語(yǔ)法
9 元素渲染
10 props & state
11 React 事件處理
12 列表 & keys
13 propTypes 類型檢查

1
React 簡(jiǎn)介與安裝使用

1.React簡(jiǎn)介

2.React安裝

3.React簡(jiǎn)單操作

2
ES6 語(yǔ)法

1.let&const

2.箭頭函數(shù)

3.類

4.模板字符串

3
JSX

1.JSX簡(jiǎn)介

2.JSX表達(dá)式

3.JSX屬性

4.JSX與事件

5.JSX與樣式

6.JSX與Objects

7.JSX與XSS

8.不使用JSX

4
元素渲染

1.聲明元素

2.將元素渲染到DOM中

3.更新元素渲染

5
組件

1.函數(shù)式聲明組件

2.ES6類語(yǔ)法聲明組件

3.ES5語(yǔ)法聲明組件

4.組件分類

6
props & state

1.props簡(jiǎn)介

2.props的簡(jiǎn)單傳值

3.props傳值在父子組件嵌套中的應(yīng)用

4.props傳遞方法

5.props修改

6.state定義及簡(jiǎn)單操作

7.state修改 8.state與props

7
React 生命周期

1.實(shí)例化

2.getDefaultPropsgetInitialStatecomponentWillMountrendercomponentDidMount

3.存在期componentWillReceivePropsshouldComponentUpdatecomponentWillUpdatecomponentDidUpdate

4.銷毀componentWillUnmount

8
React 事件處理

1.事件聲明

2.綁定this

9
條件渲染

1.ifelse

2.元素變量

3.&&運(yùn)算符

4.三目運(yùn)算符

5.阻止組件渲染

10
列表 & keys

1.渲染多個(gè)組件

2.keys

11
表單

1.input

2.textarea

3.select

12
propTypes 類型檢查

1.一個(gè)簡(jiǎn)單的類型檢查

2.復(fù)雜類型

13
HOC & mixins

1.Mixins

2.HOC

React 安裝

新建靜態(tài) HTML 文件并創(chuàng)建 React App

動(dòng)手學(xué)習(xí) let & const、箭頭函數(shù)、類及模板字符串

動(dòng)手學(xué)習(xí) JSX 相關(guān)語(yǔ)法

動(dòng)手學(xué)習(xí) 聲明元素、將元素渲染到 DOM 中以及更新元素渲染

動(dòng)手學(xué)習(xí) 聲明組件以及組件分類

動(dòng)手學(xué)習(xí) props 和 state

動(dòng)手學(xué)習(xí) 實(shí)例化、存在期以及銷毀

動(dòng)手學(xué)習(xí) 事件聲明和綁定 this

動(dòng)手學(xué)習(xí) if else、元素變量、&& 運(yùn)算符、三目運(yùn)算符、阻止組件渲染

動(dòng)手學(xué)習(xí) 渲染多個(gè)組件以及 keys

動(dòng)手學(xué)習(xí) input、textarea 以及 select

動(dòng)手學(xué)習(xí) 簡(jiǎn)單類型檢查和復(fù)雜類型

動(dòng)手學(xué)習(xí) Mixins 和 HOC