課程大綱：

React 基礎入門培訓

課程將重心放在 React 基礎知識，從基本的 JSX 語法開始，帶你逐漸領略元素，組件，props & state，

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

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

1
React 簡介與安裝使用

1.React簡介

2.React安裝

3.React簡單操作

2
ES6 語法

1.let&const

2.箭頭函數

3.類

4.模板字符串

3
JSX

1.JSX簡介

2.JSX表達式

3.JSX屬性

4.JSX與事件

5.JSX與樣式

6.JSX與Objects

7.JSX與XSS

8.不使用JSX

4
元素渲染

1.聲明元素

2.將元素渲染到DOM中

3.更新元素渲染

5
組件

1.函數式聲明組件

2.ES6類語法聲明組件

3.ES5語法聲明組件

4.組件分類

6
props & state

1.props簡介

2.props的簡單傳值

3.props傳值在父子組件嵌套中的應用

4.props傳遞方法

5.props修改

6.state定義及簡單操作

7.state修改 8.state與props

7
React 生命周期

1.實例化

2.getDefaultPropsgetInitialStatecomponentWillMountrendercomponentDidMount

3.存在期componentWillReceivePropsshouldComponentUpdatecomponentWillUpdatecomponentDidUpdate

4.銷毀componentWillUnmount

8
React 事件處理

1.事件聲明

2.綁定this

9
條件渲染

1.ifelse

2.元素變量

3.&&運算符

4.三目運算符

5.阻止組件渲染

10
列表 & keys

1.渲染多個組件

2.keys

11
表單

1.input

2.textarea

3.select

12
propTypes 類型檢查

1.一個簡單的類型檢查

2.復雜類型

13
HOC & mixins

1.Mixins

2.HOC

React 安裝

新建靜態 HTML 文件并創建 React App

動手學習 let & const、箭頭函數、類及模板字符串

動手學習 JSX 相關語法

動手學習 聲明元素、將元素渲染到 DOM 中以及更新元素渲染

動手學習 聲明組件以及組件分類

動手學習 props 和 state

動手學習 實例化、存在期以及銷毀

動手學習 事件聲明和綁定 this

動手學習 if else、元素變量、&& 運算符、三目運算符、阻止組件渲染

動手學習 渲染多個組件以及 keys

動手學習 input、textarea 以及 select

動手學習 簡單類型檢查和復雜類型

動手學習 Mixins 和 HOC