React全棧式實戰開發入門（微課視頻版）

第一部分 基礎篇
第1章 React簡介與開發基礎 3
1.1 React簡介 3
1.1.1 React的定義 3
1.1.2 React的特點 3
1.1.3 React的發展簡史 4
1.2 React應用開發的簡單示例 5
1.2.1 單個HTML文件應用React的示例 5
1.2.2 元素渲染說明 8
1.2.3 兩個文件應用React的示例 9
1.2.4 應用React的示例對比分析 10
1.3 JSX應用開發入門 11
1.3.1 JSX說明 11
1.3.2 JSX綜合應用示例 11
1.3.3 JSX綜合運行效果 14
習題1 14
第2章 React組件 15
2.1 React組件概述 15
2.1.1 組件和自訂群組件 15
2.1.2 函數元件和類元件 16
2.2 函數元件和類元件的應用開發 16
2.2.1 開發示例 16
2.2.2 運行效果 17
2.3 元件參數和組合元件 18
2.3.1 說明 18
2.3.2 開發示例 18
2.3.3 運行效果 21
2.4 元件的分解和組合 21
2.4.1 說明 21
2.4.2 開發示例 22
2.4.3 運行效果 24
2.5 組件的生命週期 24
2.5.1 概述 24
2.5.2 constructor()方法 25
2.5.3 componentDidMount()方法 25
2.5.4 componentDidUpdate()方法 25
2.5.5 componentWillUnmount()方法 25
2.5.6 開發示例 26
2.5.7 運行效果 27
習題2 28
第3章 React事件處理 29
3.1 React事件處理概述 29
3.1.1 事件 29
3.1.2 合成事件 30
3.1.3 支援的事件類型 30
3.2 滑鼠事件處理 31
3.2.1 開發示例 31
3.2.2 運行效果 34
3.3 焦點事件處理 36
3.3.1 開發示例 36
3.3.2 運行效果 38
3.4 鍵盤事件處理 39
3.4.1 開發示例 39
3.4.2 運行效果 40
3.5 圖像事件處理 41
3.5.1 開發示例 41
3.5.2 運行效果 43
習題3 44
第4章 React條件渲染、列表和key 45
4.1 React條件渲染、列表和key概述 45
4.1.1 條件渲染 45
4.1.2 列表 45
4.1.3 key 46
4.2 條件渲染的應用開發 46
4.2.1 開發示例 46
4.2.2 運行效果 51
4.3 列表的應用開發 52
4.3.1 開發示例 52
4.3.2 運行效果 54
4.4 key的應用開發 55
4.4.1 開發示例 55
4.4.2 運行效果 58
4.5 列表和key的綜合應用 58
4.5.1 開發示例 58
4.5.2 運行效果 60
習題4 61
第5章 React狀態管理 62
5.1 React狀態管理概述 62
5.1.1 state 62
5.1.2 setState()方法 63
5.1.3 forceUpdate()方法 64
5.1.4 狀態提升 64
5.2 狀態的基礎應用 64
5.2.1 開發示例 64
5.2.2 運行效果 70
5.3 狀態的提升應用 71
5.3.1 開發示例 71
5.3.2 運行效果 75
習題5 77
第6章 React表單 78
6.1 React表單概述 78
6.1.1 表單 78
6.1.2 受控組件 78
6.1.3 非受控組件 79
6.2 表單組件 79
6.2.1 開發示例 79
6.2.2 運行效果 86
6.3 ref 87
6.3.1 開發示例 87
6.3.2 運行效果 89
習題6 91
第7章 React元件的組合和繼承 92
7.1 React元件的組合和繼承概述 92
7.1.1 組合 92
7.1.2 繼承 92
7.2 帶樣式的組合元件 93
7.2.1 引入包、樣式和功能檔 93
7.2.2 定義樣式 93
7.2.3 定義功能 94
7.2.4 帶樣式元件綜合應用的運行效果 95
7.3 頁面配置 96
7.3.1 定義樣式和功能 96
7.3.2 運行效果 98
7.4 特例關係組合 99
7.4.1 定義樣式和功能 99
7.4.2 運行效果 100
7.5 類組合 101
7.5.1 定義樣式和功能 101
7.5.2 運行效果 103
習題7 104

第二部分 高階篇
第8章 React使用Hook增強元件 107
8.1 Hook概述 107
8.1.1 Hook 107
8.1.2 Hook API 108
8.1.3 自訂Hook 109
8.1.4 Hook的使用規則 109
8.2 State Hook的應用 110
8.2.1 創建項目reactjsbook 110
8.2.2 修改檔index.js 113
8.2.3 創建組件 113
8.2.4 運行項目reactjsbook 114
8.2.5 useState()函數的應用說明 115
8.2.6 State Hook的等價實現 115
8.3 State Hook的綜合應用 116
8.3.1 創建組件 116
8.3.2 運行項目reactjsbook 119
8.4 Effect Hook的應用 119
8.4.1 說明 119
8.4.2 創建文件HookExample2.js 120
8.4.3 Effect Hook的等價實現 121
8.4.4 創建組件 122
8.4.5 修改檔index.js 124
8.4.6 運行項目reactjsbook 125
8.5 其他Hook的應用 125
8.5.1 useState()函數應用 125
8.5.2 useReducer()函數應用 126
8.5.3 useMemo()函數應用 127
8.5.4 useRef()函數應用 128
8.5.5 創建組件 128
8.5.6 修改檔index.js 129
8.5.7 運行項目reactjsbook 129
習題8 130
第9章 React基礎原理和高級指引 131
9.1 React基礎原理 131
9.1.1 選擇性地使用React 131
9.1.2 JSX表示物件 131
9.1.3 類元件的執行順序 133
9.1.4 非同步程式設計 135
9.1.5 Fiber 135
9.1.6 模組 136
9.2 React應用開發的一般步驟 136
9.2.1 將UI介面分解為元件 136
9.2.2 實現應用程式的靜態版本 136
9.2.3 確定state 137
9.2.4 確定state的放置位置 137
9.2.5 添加反向資料流程 137
9.3 React片段 138
9.3.1 說明 138
9.3.2 創建組件 138
9.3.3 修改檔index.js 140
9.3.4 運行項目reactjsbook 140
9.4 context 141
9.4.1 說明 141
9.4.2 創建組件 142
9.4.3 修改檔index.js 144
9.4.4 運行項目reactjsbook 144
9.5 高階組件 145
9.5.1 說明 145
9.5.2 創建組件 145
9.5.3 修改檔index.js 146
9.5.4 運行項目reactjsbook 147
9.6 ref轉發 147
9.6.1 說明 147
9.6.2 創建組件 148
9.6.3 修改檔index.js 149
9.6.4 運行項目reactjsbook 149
9.7 portal 149
9.7.1 說明 149
9.7.2 創建組件 150
9.7.3 修改檔index.js 151
9.7.4 運行項目reactjsbook 152
9.8 ref和DOM 152
9.8.1 說明 152
9.8.2 創建組件 153
9.8.3 修改檔index.js 156
9.8.4 運行項目reactjsbook 156
9.9 Web Component 157
9.9.1 說明 157
9.9.2 創建組件 157
9.9.3 修改檔index.js 158
9.9.4 運行項目reactjsbook 158
9.10 render props 159
　　　9.10.1 說明 159
　　　9.10.2 創建組件 159
　　　9.10.3 修改檔index.js 164
　　　9.10.4 運行項目reactjsbook 164
9.11 錯誤邊界 164
　　　9.11.1 說明 164
　　　9.11.2 創建組件 165
　　　9.11.3 修改檔index.js 166
　　　9.11.4 運行項目reactjsbook 167
9.12 測試 167
　　　9.12.1 說明 167
　　　9.12.2 測試簡單示例 167
　　　9.12.3 非同步測試示例 169
　　　9.12.4 mock測試示例 171
　　　9.12.5 事件測試示例 173
習題9 174
第10章 React應用開發的工具 176
10.1 包管理器 176
　　　10.1.1 NPM 176
　　　10.1.2 Yarn 177
10.2 安裝React 177
　　　10.2.1 CDN連結 177
　　　10.2.2 Create React App 178
10.3 編譯器和編輯器 178
　　　10.3.1 Babel 178
　　　10.3.2 ESLint 178
　　　10.3.3 Prettier 179
　　　10.3.4 PropTypes 179
10.4 構建工具 179
　　　10.4.1 webpack 179
　　　10.4.2 Parcel 179
10.5 伺服器端渲染工具 180
　　　10.5.1 Next.js 180
　　　10.5.2 Razzle 180
　　　10.5.3 Gatsby 181
10.6 React Router 181
　　　10.6.1 說明 181
　　　10.6.2 創建組件 181
　　　10.6.3 修改檔index.js 183
　　　10.6.4 運行項目reactjsbook 183
習題10 184

第三部分 實戰篇
第11章 React與Redux的整合開發 187
11.1 React與Redux概述 187
　　　11.1.1 Redux動機 187
　　　11.1.2 Redux核心內容 187
　　　11.1.3 React與Redux對比 189
11.2 計數器的開發 189
　　　11.2.1 創建action 189
　　　11.2.2 創建reducer 190
　　　11.2.3 創建組件 190
　　　11.2.4 修改檔index.js 191
　　　11.2.5 運行項目reactjsbook 192
11.3 待辦事項管理小工具的開發 192
　　　11.3.1 創建action 192
　　　11.3.2 創建reducer 193
　　　11.3.3 創建組件 194
　　　11.3.4 修改檔index.js 198
　　　11.3.5 運行項目reactjsbook 198
習題11 200