|
|
|
本書旨在幫讀者從零開始學習React基礎知識，採用「語法」「示例」的方式，以便於初學者學習和練習，是目前市場上少有的React入門圖書。
本書共14章，分為3篇，涵蓋的主要有：React的前世今生、使用React所需的預備知識（包括npm、webpack、ES6）、React開發環境搭建、React組件、React事件系統、React原理、數據管理、React架構、React服務端渲染、React測試、React性能優化、React webpack ES6項目實戰（筆記本、購物車）等。
本書內容豐富、實例典型、實用性強，適合有一定的HTML、CSS、JavaScript基礎、希望全面學習React開發的前端開發人員閱讀，也適合希望提高項目開發水平的人員閱讀。
趙榮嬌，飛豬旅行前端開發工程師，擅長CSS、JavaScript和各種框架，參與寫作或翻譯過多本前端精品圖書，喜歡旅行，熱愛前端開發，樂於分享。
劉江虹，H3C總部前端項目經理，精通Web前端開發和伺服器腳本語言技術，善於把握運用新技術，如React、jQuery、Webpack等，具有3年以上前端開發和技術團隊管理經驗，技術上一專多能，能夠跨平台、跨資料庫進行軟體開發和項目管理。
第1章 React的前世今生 1
1.1 刀耕火種的年代 1
1.2 Web應用的出現 2
1.3 React的誕生 2
1.4 npm 3
1.4.1 什麼是npm 3
1.4.2 理解npm scripts 3
1.4.3 dependencies和devDependencies 5
1.5 webpack 5
1.5.1 為什麼需要webpack 6
1.5.2 webpack入口和出口 7
1.5.3 webpack loader 8
1.5.4 webpack plugins 9
1.6 ES6 10
1.6.1 函數的擴展 10
1.6.2 物件的擴展 13
1.6.3 class 15
第2章 初探React 17
2.1 React帶來的變化 17
2.1.1 React的聲明式程式設計 17
2.1.2 React的組件化思想 18
2.1.3 React的虛擬DOM 19
2.2 本地環境搭建 19
2.2.1 Node與npm安裝 20
2.2.2 打造屬於你的編輯器 21
2.3 編寫第一個React應用 22
2.4 與傳統jQuery對比 25
2.5 React調試 28
2.5.1 安裝Chrome外掛程式 28
2.5.2 Chrome外掛程式的使用 29
第3章 React組件 32
3.1 理解組件化思想 32
3.2 元件之間的通信 32
3.2.1 props 33
3.2.2 state 34
3.2.3 父子組件通信 36
3.2.4 同級組件通信 39
3.3 組件生命週期 41
3.3.1 組件的掛載 41
3.3.2 組件的更新 43
3.3.3 組件的卸載 46
3.3.4 總覽組件生命週期 48
第4章 漫談React事件系統 50
4.1 JavaScript事件機制 50
4.2 剖析React事件系統 54
4.2.1 組件上綁定事件 54
4.2.2 在構造函數中綁定事件 56
4.2.3 箭頭函數綁定事件 57
4.3 實戰：實現登錄介面（事件系統演練） 58
第5章 深入React原理 62
5.1 JSX 62
5.1.1 JSX語法 64
5.1.2 JSX使用樣式 65
5.2 dom-diff 66
5.3 setState 68
第6章 React組件編寫實戰 75
6.1 React組件寫法 75
6.1.1 React.createClass寫法 75
6.1.2 React.Component寫法 76
6.1.3 無狀態函數寫法 78
6.2 React組件分類 79
6.2.1 木偶元件和智慧元件 79
6.2.2 高階組件 83
第7章 Redux資料管理 89
7.1 總覽React資料管理 89
7.1.1 Flux的出現 89
7.1.2 Mobx 95
7.1.3 Redux應運而生 95
7.2 Redux核心概念 96
7.2.1 store 96
7.2.2 action 98
7.2.3 reducer 100
7.2.4 connect 102
7.2.5 總結 103
7.3 Redux生態 104
7.3.1 redux middleware 104
7.3.2 redux-logger 104
7.3.3 redux-thunk 107
7.3.4 redux-saga 111
7.4 Redux進階 116
7.4.1 理解middleware原理 116
7.4.2 手動實現middleware 120
第8章 React架構 121
8.1 檔結構 121
8.2 CSS方案 122
8.2.1 CSS Modules 122
8.2.2 局部樣式 123
8.2.3 全域作用域 126
8.2.4 組合樣式 126
8.2.5 PostCSS 129
8.3 狀態管理 132
8.3.1 如何定義state 132
8.3.2 你可能不需要Redux 132
8.3.3 再來說說Redux 133
8.4 路由管理 135
第9章 React服務端渲染 139
9.1 服務端渲染的意義 139
9.2 理解服務端渲染原理 141
9.3 實戰：動手實現服務端渲染 144
9.4 伺服器渲染的思考 156
第10章 編寫測試 157
10.1 測試驅動開發 157
10.1.1 測試驅動開發的好處 157
10.1.2 測試驅動開發現狀 158
10.1.3 定義屬於自己的測試原則 159
10.2 React測試工具 160
10.2.1 Jest 160
10.2.2 Enzyme 161
10.3 動手測試我們的代碼 162
10.3.1 使用Jest測試 162
10.3.2 使用Emzyme測試 167
10.4 測試之外 179
10.4.1 PropTypes 179
10.4.2 Flow 183
10.4.3 TypeScript 185
第11章 性能優化 190
11.1 不要過早優化 190
11.2 React性能查看工具 191
11.3 React優化手段 192
11.3.1 單個React元件性能優化 192
11.3.2 shoudComponentUpdate 193
11.3.3 immutable（ImmutableJS） 194
11.4 性能優化小結 197
第12章 Hooks 198
12.1 為什麼引入Hooks 198
12.2 Hooks的使用方法 200
12.2.1 useState 200
12.2.2 useEffect 201
12.2.3 useReducer 202
12.2.4 Hooks使用限制 203
12.3 Hooks 實踐 205
12.3.1 與狀態有關的邏輯重用 205
12.3.2 DOM操作副作用的修改 208
12.3.3 Hooks互相引用 209
12.3.4 處理動畫 211
12.3.5 模擬生命週期 215
12.4 Hooks小結 216
第13章 React實戰：React webpack ES6實現簡易筆記本 217
13.1 配置環境 217
13.1.1 前臺準備 217
13.1.2 服務端準備 218
13.1.3 創建資料庫 220
13.1.4 連接資料庫 223
13.2 引入antd 229
13.3 改寫筆記本樣式 233
13.4 案例小結 238
第14章 React實戰：React webpack ES6實現購物車 239
14.1 前期準備 239
14.1.1 環境準備 239
14.1.2 編碼規範ESLint 240
14.1.3 專案結構 246
14.2 組件設計 247
14.2.1 購物車框架 247
14.2.2 商品組件和商品清單 251
14.2.3 商品搜索 259
14.2.4 購物車 261
14.3 案例小結 265
