《React+Redux前端開發實戰》由徐順發編寫而成,由機械工業出版社出版發行。
基本介紹
- 中文名:React+Redux前端開發實戰
- 作者:徐順發
- 出版時間:2019年7月
- 出版社:機械工業出版社
- 頁數:248 頁
- ISBN:9787111631453
- 類別:前端開發
- 定價:69 元
- 開本:16 開
- 裝幀:精裝
內容簡介,圖書目錄,作者簡介,
內容簡介
本書是一本React入門書,也是一本React實踐書,更是一本React企業級項目開發指導書。全書系統地介紹了以React.js為中心的各種前端開發技術,可以幫助前端開發人員系統地掌握這些知識,提升自己的開發水平。
本書共9章,依次介紹了用Webpack構建項目、模組化與組件開發、React中的事件系統與表單、React+Redux數據流管理、react-router路由、React性能最佳化原理與方法、React服務端渲染、自動化測試工具與實戰,最後通過一個企業級項目開發實戰案例,帶領讀者進一步夯實並實踐React知識。
本書是一本大前端學習入門與實戰讀物,不僅適合React開發人員閱讀,也適合跨平台開發的前端人員閱讀,而且還可以作為React開發的“字典”供開發人員隨時翻閱。
圖書目錄
第1章 React入門 1
1.1 開始學習React之前 1
1.1.1 下載與使用Node.js和NPM 1
1.1.2 模組打包工具之Browserify 2
1.1.3 模組打包工具之Webpack 3
1.1.4 第一個Webpack構建實戰 6
1.1.5 Webpack loader實戰 7
1.1.6 Webpack配置詳解 9
1.1.7 ES 6語法 15
1.2 React簡介 22
1.3 React的特徵 23
1.3.1 組件化 23
1.3.2 虛擬DOM 24
1.3.3 單向數據流 25
1.4 JSX語法 25
1.4.1 JSX簡介 25
1.4.2 JSX的轉譯 27
1.4.3 JSX的用法 29
1.5 Hello World實戰訓練 34
1.5.1 不涉及項目構建的Hello World 34
1.5.2 基於Webpack的Hello World 35
1.5.3 Hello World進階 39
第2章 React的組件 44
2.1 組件的聲明方式 44
2.1.1 ES 5寫法:(React.createClass) 44
2.1.2 ES 6寫法:React.Component 45
2.1.3 無狀態組件 46
2.2 組件的主要成員 47
2.2.1 狀態(state) 47
2.2.2 屬性(props) 49
2.2.3 (render)方法 49
2.3 組件之間的通信 52
2.3.1 父組件向子組件通信 52
2.3.2 子組件向父組件通信 53
2.3.3 跨級組件通信 54
2.3.4 非嵌套組件通信 56
2.4 組件的生命周期 58
2.4.1 組件的掛載 58
2.4.2 數據的更新過程 60
2.4.3 組件的卸載(unmounting) 61
2.4.4 錯誤處理 61
2.4.5 老版React中的生命周期 62
2.4.6 生命周期整體流程總結 63
2.5 組件化實戰訓練——TodoList 64
第3章 React的事件與表單 70
3.1 事件系統 70
3.1.1 合成事件的事件代理 70
3.1.2 事件的自動綁定 71
3.1.3 在React中使用原生事件 73
3.1.4 合成事件與原生事件混用 73
3.2 表單(Forms) 75
3.2.1 受控組件 75
3.2.2 非受控組件 77
3.2.3 受控組件和非受控組件對比 78
3.2.4 表單組件的幾個重要屬性 80
3.3 React的樣式處理 80
3.3.1 基本樣式設定 80
3.3.2 CSS Modules樣式設定 82
第4章 React+Redux數據流管理 86
4.1 Flux架構 86
4.1.1 MVC和MVVM 86
4.1.2 Flux介紹 90
4.1.3 深入Flux 91
4.1.4 Flux的缺點 96
4.1.5 Flux架構小結 97
4.2 Redux狀態管理工具 97
4.2.1 Redux簡介 97
4.2.2 Redux的使用場景 98
4.2.3 Redux的動機 99
4.2.4 Redux三大特性 99
4.2.5 Redux的組成——拆解商城購物車實例 100
4.2.6 Redux搭配React使用 105
4.3 middleware中間件 109
4.3.1 為何需要middleware 109
4.3.2 深入理解middleware 109
4.4 Redux實戰訓練——網上書店 113
4.4.1 目錄結構 113
4.4.2 套用入口 src/index.js 114
4.4.3 Action的創建和觸發 116
4.4.4 Reducer的創建 118
4.4.5 UI展示組件的創建 122
4.4.6 發起一個動作Action(添加商品到購物車) 124
第5章 路由 127
5.1 前端路由簡介 127
5.2 前端路由的實現原理 127
5.2.1 history API方式 128
5.2.2 Hash方式 129
5.3 react-router路由配置 130
5.3.1 react-router的安裝 131
5.3.2 路由配置 131
5.3.3 默認路由 132
5.3.4 路由嵌套 133
5.3.5 重定向 133
5.4 react-router下的history 134
5.4.1 browserHistory模式 134
5.4.2 hashHistory模式 135
5.4.3 createMemoryHistory模式 135
5.5 react-router路由切換 135
5.5.1 Link標籤 135
5.5.2 history屬性 136
5.5.3 傳參 137
5.6 進入和離開的Hook 137
5.6.1 onEnter簡介 137
5.6.2 onLeave簡介 138
第6章 React的性能及性能最佳化 139
6.1 diff算法 139
6.1.1 時間複雜度和空間複雜度 139
6.1.2 diff策略 141
6.1.3 key屬性 148
6.2 組件重新渲染 149
6.3 PureRender純渲染 152
6.4 Immutable持久性數據結構庫 153
6.4.1 Immutable的作用 153
6.4.2 Immutable的優缺點 155
6.4.3 Immutable和原生JavaScript對象相互轉換 156
6.4.4 Immutable中的對象比較 156
6.4.5 Immutable與React配合使用 157
第7章 React服務端渲染 159
7.1 客戶端渲染和服務端渲染的區別 159
7.2 在React中實現服務端渲染 160
7.2.1 為何需要服務端渲染 160
7.2.2 服務端渲染中的API 161
7.2.3 渲染方法 161
7.2.4 狀態管理 165
7.2.5 Express框架簡介 166
7.2.6 路由和HTTP請求 169
7.3 實戰訓練——服務端渲染 172
7.3.1 項目結構 172
7.3.2 項目實現 172
第8章 自動化測試 178
8.1 測試的作用 178
8.2 單元測試簡介 178
8.3 測試工具 180
8.3.1 常見的測試工具 180
8.3.2 React的測試工具 181
8.3.3 單元測試工具Jest 181
8.3.4 單元測試工具Enzyme 187
8.4 Jest和Enzyme實戰訓練 189
8.4.1 Jest和Enzyme的配置 191
8.4.2 測試From組件視圖和單擊事件 193
8.4.3 測試ListItems組件視圖 196
第9章 實戰——React+Redux搭建社區項目 198
9.1 項目結構 198
9.2 Less檔案處理 198
9.3 路由和Redux配置 199
9.3.1 前期配置 199
9.3.2 路由功能的測試 201
9.4 業務入口 202
9.5 首頁 203
9.5.1 頭部 204
9.5.2 列表內容 205
9.6 詳情頁 224
9.6.1 靜態頁面開發 224
9.6.2 根據id獲取詳情 227
9.6.3 渲染內容 228
9.7 個人中心 230
9.7.1 分析頁面功能 231
9.7.2 模擬用戶登錄和登出 232
9.8 實戰項目回顧 234
作者簡介
徐順發(Allan) 貝貝集團前端技術專家。愛折騰,熱衷於技術研究和技術分享。主攻前端架構和各類框架,擅長React.js、Vue.js和Node.js等主流技術棧。曾經獲得了2018年SegmentFault Hackathon區塊鏈黑客馬拉松冠軍。