React + Node.js 開發實戰：從入門到項目上線

袁林　
畢業於南京郵電大學，獲碩士學位。
先後就職於三星電子和南京智鶴等公司，長期從事移動App開發、Web前端開發和全棧開發，歷任App高級工程師、全棧工程師和系統架構師等職務。
擅長Web前端跨平台開發技術和基於Node.js的全棧開發技術。

尹皓　
先後就職於上海德拓和南京智鶴等公司，擅長React前端開發技術。
曾經參與了國家海關和上海公安等單位管理軟件的開發，目前從事全棧開發。

陳寧　
就職於南京智鶴公司，擅長JavaScript和React等技術，有豐富的開發經驗和解決複雜問題的經驗。
曾經參與開發了大型SaaS系統，目前在使用React進行項目開發。

前言

第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