第一部分基礎篇1
第1 章技術簡介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
React 2
Redux 3
Node 與Universal 渲染4
Babel 5
Webpack 5
總結6
第2 章在Node.js 中運行React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
例子7
編寫React 組件7
在Node.js 中渲染組件8
使用Babel 編譯運行Node.js 程序9
Require Hook 簡介9
使用Require Hook 的步驟9
總結10
第3 章在瀏覽器中運行React. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
例子11
組件復用11
在瀏覽器中渲染React 組件12
使用Webpack 打包編譯12
在瀏覽器中運行14
總結14
第4 章開發服務器和熱替換. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
例子15
安裝16
配置Babel 16
使用react-hmre 預設16
react-hmre 的功能17
配置Webpack 18
配置Express 服務器21
總結22
第5 章React 的創新語法：JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
例子24
JSX 簡介24
JSX 常用語法25
類似HTML 25
JavaScript 錶達式26
樣式27
注釋27
數組27
HTML 標簽vs. React 組件28
總結29
第6 章React 的數據載體：state、props 與context. . . . . . . . . . . . . . . . . . . . . 30
例子30
State 31
Props 32
使用props 33
驗證props 33
組閤使用state 與props 35
Context 36
使用props 傳遞數據36
使用context 傳遞數據38
Props 與context 的適用場景40
在React 開發者工具中查看41
總結42
第7 章React 的兩個對象：ReactElement 與組件實例. . . . . . . . . . . . . . . . . . 43
例子43
ReactElement 44
JSX 中的閉閤標簽是ReactElement 44
ReactElement 是什麼44
ReactElement 的兩種類型45
React 組件的渲染流程45
組件實例46
組件實例簡介46
組件、ReactElement 與組件實例的區彆47
組件實例的生滅：生命周期函數48
React 組件中的this 49
總結55
第8 章初識Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
例子56
Action 56
Reducer 57
定義57
純函數58
不能修改參數state 58
Store 60
職能60
創建60
獲取與監聽60
發起action 61
總結62
第9 章Action 創建函數與Redux Thunk 中間件. . . . . . . . . . . . . . . . . . . . . . . 64
例子64
Action 創建函數65
編寫65
發起65
意義66
Redux unk 中間件66
功能66
安裝激活67
總結69
第二部分進階篇71
第10 章React 與Redux 的連接：手動連接. . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
例子72
手動連接的步驟73
編寫React 組件73
編寫Redux 75
將Redux 手動連接到React 組件76
手動連接的缺點77
總結77
第11 章React 與Redux 的連接：使用react-redux 連接. . . . . . . . . . . . . . . . 78
例子78
連接步驟78
多種寫法81
連接原理85
Provider 工作原理85
connect 工作原理86
展示組件與容器組件86
總結87
第12 章實現撤銷/重做. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
例子88
撤銷/重做88
Redux 開發者工具92
安裝92
使用93
Redux 並不“低效” 97
總結98
第13 章測試. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
例子99
測試工具100
Mocha 100
Enzyme 101
Expect 102
測試action 創建函數103
測試React 組件106
測試容器組件108
測試reducer 純函數110
運行測試腳本111
總結112
第14 章Redux 的全局狀態與React 組件的內部狀態. . . . . . . . . . . . . . . . . . . 114
例子114
全局狀態與內部狀態的定義114
全局狀態完全替代瞭內部狀態？ 115
全局狀態與內部狀態的適用場景118
總結118
第15 章React 與Redux 中的數組處理. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
例子119
reduce() 119
概述119
語法120
示例120
filter() 121
概述121
語法121
示例122
map() 122
概述122
語法122
示例123
every() 123
概述123
語法123
示例124
some() 124
概述124
語法124
示例125
展開運算符125
概述125
語法125
示例125
總結126
第16 章Redux 的大舞颱：異步. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
例子127
JavaScript 事件驅動編程127
Promise 129
Redux 中的異步132
異步action 創建函數133
異步請求前後的state 變化133
State tree 結構135
查看state tree 136
如何構建state tree 136
異步與變化139
準備工作139
追蹤異步與變化143
總結145
第17 章自定義Redux 中間件. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
例子147
中間件的功能147
中間件的編寫148
中間件的執行149
自定義API 中間件151
總結154
第18 章Universal 渲染. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
例子155
公用一套代碼156
服務端渲染156
客戶端渲染158
總結159
第三部分拓展篇161
第19 章Universal 渲染神器：Webpack 同構工具. . . . . . . . . . . . . . . . . . . . . . 162
例子162
Webpack 同構工具的功能163
服務端調用164
客戶端調用165
真實場景167
配置服務器的入口167
獨立開發服務器168
配置Webpack 169
配置Webpack 同構工具171
在服務端和客戶端使用require() 173
總結174
第20 章多頁麵的實現：路由. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
例子175
路由也是組件176
路由匹配177
使用Link 和IndexLink 導航178
服務端路由179
總結181
第21 章多頁麵下的異步操作. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
例子182
redux-amrc 182
功能183
配置184
使用184
Action 與state 185
API 186
多頁麵下的異步操作187
編寫測試API 187
預載數據188
手動加載數據191
操作數據192
總結193
第22 章使用Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
例子194
bootstrap-loader 195
基本用法195
配置196
PostCSS 與Autoprefixer 200
簡介200
用法201
React-Bootstrap 202
總結204
第四部分實戰篇205
第23 章搭建大型項目. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
例子206
開發服務器209
開發環境下的Webpack 配置209
Webpack 同構工具的配置212
獨立的開發服務器213
啓動開發服務器214
前端服務器215
配置前端服務器215
使用組件渲染HTML 頁麵218
啓動前端服務器221
API 服務器222
配置API 服務器222
啓動API 服務器223
生産環境下的構建編譯224
編譯運行Node.js 224
生産環境下的Webpack 配置225
公用代碼229
工具集229
路由與頁麵231
質量保證235
測試235
Airbnb 編碼規範239
去毛機246
EditorConfig 248
總結248
第24 章錶單. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
例子250
高階組件ReduxForm 251
設置252
簡單錶單253
同步驗證錶單256
異步失焦驗證錶單258
提交錶單到服務器260
總結264
第25 章圖錶與錶格. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
例子265
圖錶組件265
錶格組件269
從服務器獲取數據272
總結275
第26 章用戶認證. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
例子277
編寫認證API 279
Express-session 中間件279
加載當前認證狀態280
登錄與登齣280
API 權限保護281
發送cookie 282
編寫用於認證的action 創建函數283
登錄頁麵和導航欄285
前端路由保護290
總結291
第27 章部署. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
例子292
Heroku 平颱293
安裝工具並登錄293
準備程序293
部署程序294
其他操作295
持續集成296
與生産相關的問題298
總結299
第28 章其他資源. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
在綫文檔300
參與社區活動301
· · · · · · (收起)