《React與Redux開發實例精解》一書作者劉一奇，電子工業出版社2016年12月出版
基本介紹
- 書名：React與Redux開發實例精解
- 作者：劉一奇
- ISBN：978-7-121-30267-1
- 頁數：320
- 定價：59.00
- 出版社：電子工業出版社
- 出版時間：2016年12月
- 開本：16開
內容提要,目錄,
內容提要
《React與Redux開發實例精解》共分四部分，全面介紹如何使用React 與Redux 進行Web 開發。第一部分是基礎篇，介紹React 與Redux 的基礎知識；第二部分是進階篇，通過精彩的官方示例學習React 與Redux；第三部分是拓展篇，主要學習一些優秀的第三方拓展；第四部分是實戰篇，將會帶領讀者一步步搭建大型Web 應用程式。
《React與Redux開發實例精解》適合熟悉JavaScript 編程，有意使用React 與Redux 搭建Web 套用的程式設計師學習參考。
目錄
第一部分基礎篇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
