內容簡介

本書站在全棧開發的角度，通過實戰形式，帶領讀者由點到面，由淺入深，從前端到後端逐步學習React.js+Node.js全棧開發的全貌。本書分為4篇。*1篇React.js和Node.js基礎，涵蓋兩種技術的環境搭建及IDE用法，以及相關的語法基礎；*2篇打包部署和項目開發實戰，涵蓋各種打包工具和部署工具，以及詳細的步驟；第3篇React.js和Node.js進階，涵蓋兩種技術的語法原理；第4篇項目優化和服務端渲染，涵蓋緩存、壓縮、懶加載、按需引入和負載均衡等。本書不僅適合想學習Web開發的讀者，也適合想全面了解全棧開發的讀者，另外還適合作為相關院校和培訓機構的教材。

  目錄

  前言
*1篇 React和Node.js基礎
*1章 準備：搭建React+Node.js開發環境 2
1.1 為什麼選擇React+Node.js 2
1.1.1 React的優勢 2
1.1.2 Node.js的優勢 3
1.1.3 React+Node.js組合的優勢 3
1.2 搭建Node.js環境 4
1.2.1 安裝Node.js 4
1.2.2 常用工具1：NPM、CNPM和NRM 8
1.2.3 常用工具2：YARN 9
1.2.4 常用工具3：npx和npm scripts 10
1.2.5 *一個Node.js示例 12
1.3 搭建React環境 13
1.3.1 安裝React 13
1.3.2 *一個React示例 16
1.3.3 *一個React+Node.js組合示例 23
1.4 React+Node.js開發工具 28
1.4.1 Visual Studio Code簡介 28
1.4.2 Chrome簡介 31
1.4.3 Postman簡介 34
1.5 小結 38
*2章 前端開發：React技術從0到1 39
2.1 JSX簡介 39
2.1.1 JSX的由來 39
2.1.2 JSX語法 40
2.2 組件 46
2.2.1 組件的定義 46
2.2.2 高階組件 48
2.3 數據流 51
2.3.1 Props與State簡介 51
2.3.2 組件通信簡介 56
2.3.3 Context API簡介 58
2.3.4 Redux簡介 62
2.3.5 MobX簡介 72
2.4 生命周期 75
2.4.1 掛載和卸載 75
2.4.2 狀態更新 76
2.5 小結 77
第3章 後端開發：Node.js技術從0到1 79
3.1 Node.js的特性 79
3.1.1 模塊化規範 80
3.1.2 異步I/O和事件驅動 83
3.2 HTTP簡介 86
3.2.1 請求和響應 87
3.2.2 RESTful架構風格 90
3.2.3 JSON數據格式 93
3.3 開始使用Node.js 95
3.3.1 hello world示例 95
3.3.2 回調函數與Promise對像 97
3.3.3 調試工具 100
3.4 Node.js的常用模塊 104
3.4.1 全局變量 104
3.4.2 工具模塊 108
3.4.3 HTTP模塊 111
3.4.4 事件循環和EventEmitter 114
3.5 小結 117
*2篇 打包部署和項目開發實戰
第4章 構建與部署 120
4.1 Webpack簡介 120
4.1.1 一切皆模塊 121
4.1.2 Webpack的使用 124
4.1.3 Webpack環境配置 130
4.1.4 Webpack進階 134
4.2 Nginx簡介 138
4.2.1 Nginx的基本特性 140
4.2.2 Nginx的安裝 144
4.2.3 Nginx的配置 146
4.2.4 Nginx的*級特性 150
4.3 PM2簡介 153
4.3.1 守護進程 154
4.3.2 進程管理工具對比 154
4.3.3 PM2的安裝和使用 154
4.4 部署 158
4.4.1 React的部署 159
4.4.2 Node.js的部署 160
4.5 小結 161
第5章 項目實戰1：React+Node.js實現單頁面評論繫統 162
5.1 研發流程 162
5.2 產品原型 163
5.2.1 文章列表頁 163
5.2.2 文章詳情與評論頁 164
5.2.3 文章編輯頁 165
5.3 技術選型 165
5.3.1 前端技術 165
5.3.2 後端技術 168
5.4 項目開發 175
5.4.1 文章列表 175
5.4.2 文章詳情與評論 184
5.4.3 文章編輯 189
5.5 測試部署 193
5.5.1 接口測試 193
5.5.2 項目部署 195
5.6 小結 197
第3篇 React和Node.js進階
第6章 React進階 200
6.1 虛擬DOM 200
6.2 Diff算法 202
6.2.1 Tree Diff簡介 203
6.2.2 Component Diff簡介 204
6.2.3 Element Diff簡介 204
6.3 Fiber機制 205
6.3.1 Fiber樹 207
6.3.2 Reconciliation階段 207
6.3.3 Commit階段 209
6.3.4 React Fiber小結 209
6.4 Immutable.js庫 210
6.4.1 淺拷貝 210
6.4.2 深拷貝 211
6.4.3 Immutable.js簡介 212
6.5 Hook特性 217
6.5.1 State Hook簡介 217
6.5.2 Effect Hook簡介 218
6.5.3 自定義Hook 221
6.5.4 其他Hook 223
6.6 小結 224
第7章 Node.js進階 225
7.1 跨域 225
7.1.1 同源策略 225
7.1.2 跨域方案 227
7.2 鋻權 231
7.2.1 Session機制 232
7.2.2 JWT標準 235
7.3 緩存 238
7.3.1 Redis方案 239
7.3.2 單點登錄 244
7.4 對像—關繫映射 246
7.4.1 Sequelize——關繫型數據庫的ORM實現 247
7.4.2 Mongoose——MongoDB的ORM實現 255
7.5 小結 259
第8章 項目實戰2：React+Node.js實現社區項目從開發到上線 261
8.1 產品原型 261
8.1.1 注冊與登錄 261
8.1.2 新建主題 262
8.1.3 主題列表 262
8.1.4 主題詳情 262
8.1.5 評論功能 263
8.2 技術選型 263
8.2.1 服務器端 264
8.2.2 Web前端 268
8.3 項目開發 273
8.3.1 注冊與登錄 273
8.3.2 新建主題 289
8.3.3 主題列表 293
8.3.4 主題詳情 297
8.3.5 評論功能 300
8.4 項目部署與測試 304
8.4.1 項目部署 305
8.4.2 E2E測試 306
8.5 小結 309
第4篇 項目優化和服務端渲染
第9章 項目優化 312
9.1 瀏覽器緩存 312
9.1.1 強緩存 313
9.1.2 協商緩存 314
9.1.3 緩存位置 315
9.1.4 緩存策略 317
9.1.5 緩存示例 317
9.2 壓縮 321
9.2.1 UglifyJS工具集 321
9.2.2 gzip壓縮 323
9.3 懶加載 325
9.3.1 組件懶加載 325
9.3.2 路由懶加載 326
9.4 按需引入 327
9.4.1 Tree Shaking——垃圾代碼淨化 327
9.4.2 部分引入 329
9.5 負載均衡 330
9.5.1 負載均衡分類 330
9.5.2 負載均衡工具 331
9.5.3 負載均衡實現 332
9.6 CDN簡介 333
9.6.1 工作過程 333
9.6.2 繫統組成 334
9.7 小結 335
*10章 服務端渲染 336
10.1 服務端渲染簡介 336
10.1.1 客戶端渲染示例 336
10.1.2 服務端渲染示例 339
10.1.3 客戶端渲染和服務端渲染的優缺點 340
10.2 React服務端渲染 341
10.2.1 組件 342
10.2.2 同構 347
10.2.3 路由 351
10.2.4 狀態 355
10.3 Next.js服務端渲染 357
10.3.1 Next.js簡介 357
10.3.2 Next.js開發 358
10.4 SEO——搜索引擎優化 361
10.4.1 React Helmet組件 361
10.4.2 預渲染 363
10.5 小結 364