本书站在全栈开发的角度，通过实战形式，带领读者由点到面，由浅入深，从前端到后端逐步学习React.js+Node.js全栈开发的全貌。本书分为4篇。第1篇React.js和Node.js基础，涵盖两种技术的环境搭建及IDE用法，以及相关的语法基础；第2篇打包部署和项目开发实战，涵盖各种打包工具和部署工具，以及详细的步骤；第3篇React.js和Node.js进阶，涵盖两种技术的语法原理；第4篇项目优化和服务端渲染，涵盖缓存、压缩、懒加载、按需引入和负载均衡等。本书不仅适合想学习Web开发的读者，也适合想全面了解全栈开发的读者，另外还适合作为相关院校和培训机构的教材。

通过“开发技术+项目实战”的方式详解Web全栈开发，涵盖环境搭建/React/Node/Webpack/测试部署/性能优化/服务端渲染等，详解两个商业项目案例的完整开发过程


编辑推荐：
通过“开发技术+项目实战”的方式，详解Web全栈开发的全貌
涵盖环境搭建、React、Node.js、Webpack、测试部署、性能优化及服务端渲染等内容
内容全面：不但介绍React和Node.js技术，而且介绍多个常用工具。
技术新颖：不但介绍常用的前后端分离架构及服务端渲染技术，而且介绍Ant Design、Umi.js、Express和Egg.js等流行框架。
注重实战：从需求分析、架构设计、代码编写及测试部署的角度，详解两个商业项目案例的完整开发过程，以提高读者的实际动手能力。

　　随着互联网技术的快速发展，涌现出了许多新技术，如前端开发领域的React（即React.js）和后端开发领域的Node.js。这两种技术相结合，既不会给开发人员增加太大的负担，又可以让Web开发变得更加简单、高效和可控。因此，在Web开发领域，越来越多的开发者和团队都将目光投向了Web全栈开发这一新兴领域。
　　目前，国内已经出版的大多数Web开发类图书一般都是将前后端技术分开介绍。将一个项目中用到的开发技术分割开，导致很多图书中没有一个完整贯穿前后端开发的项目案例，这让读者无法融会贯通地理解项目的全貌。基于这个原因，我们编写了本书，意在通过一本书完整地介绍React+Node.js全栈开发技术。本书以实战为主旨，通过“开发技术+项目实战”的方式，详细介绍Web全栈开发的全貌，可以让读者全面、深入、透彻地理解React和Node.js开发，提高实际开发水平和项目实战能力。
本书特色
　　1．全面涵盖React+Node.js全栈开发技术
　　本书全面介绍React+Node.js全栈开发技术，涵盖开发环境搭建、React前端技术、Node.js后端技术、产品原型、接口、E2E测试、Webpack打包、Nginx部署、PM2部署和服务端渲染等内容，可以帮助读者了解React+Node.js全栈开发的全貌。
　　2．通过“开发技术+项目实战”的方式讲解
　　本书通过“开发技术+项目实战”的方式进行讲解，先精讲每个技术点，然后通过项目案例带领读者进行实践，让读者在夯实基础的同时提高实际动手开发项目的能力。
　　3．结合大量工具，提高开发效率
　　本书详细介绍多个常用工具，帮助读者提高开发效率。其中包括：包管理工具，如NPM、CNPM、NRM、YARN和npx；开发调试工具，如Visual Studio Code、Chrome和Postman；脚手架工具和框架，如create-react-app、Express、Ant Design Pro、Egg.js和Next.js；数据库工具，如LowDB、MySQL、Redis和MongoDB等。
　　4．项目案例典型，实用性强
　　本书详细介绍使用React+Node.js开发单页面评论系统及社区项目这两个案例的完整过程，涵盖开发流程、产品原型、技术选型、模块开发和测试部署等相关内容，可以帮助读者系统学习一个项目从开发到部署上线的全过程。
本书内容
　　第1篇 React和Node.js基础
　　本篇涵盖第1～3章，主要介绍React和Node.js开发基础知识，包括开发环境的搭建，常用开发工具（Visual Studio Code、Chrome和Postman等）的使用，React基础知识（JSX语法、组件、数据流和生命周期等），以及Node.js基础知识（HTTP、Node.js特性和Node.js常用模块等）。
　　第2篇 打包部署和项目开发实战
　　本篇涵盖第4章和第5章，主要介绍React和Node.js打包部署及项目开发的相关知识，包括React模块打包工具Webpack，React和Node.js部署的反向代理工具Nginx，Node.js进程管理工具PM2，以及单页面评论系统开发实战（研发流程、产品原型、技术选型、项目开发和测试部署等）。
　　第3篇 React和Node.js进阶
　　本篇涵盖第6～8章，主要介绍React和Node.js进阶开发的相关知识，包括React进阶知识（虚拟DOM、Diff算法、Fiber机制、Immutable.js库及Hook特性等），Node.js进阶知识（跨域、鉴权、缓存和对象—关系映射等），以及React+Node.js社区项目开发实战（产品原型、技术选型、项目开发和项目部署与测试等）。
　　第4篇 项目优化和服务端渲染
　　本篇涵盖第9章和第10章，主要介绍前后端项目开发的常用优化技巧（缓存、压缩、懒加载、按需引入、负载均衡和CDN），以提升系统的性能、用户体验和可靠性，并介绍SPA面临的服务端渲染问题和解决方法，涉及Next.js与SEO等技术。
读者对象
* Web前端开发工程师；
* Node.js服务端开发工程师；
* Web全栈开发工程师；
* 软件开发项目经理；
* 软件开发产品经理；
* 网页设计与网站开发人员；
* 高等院校相关专业的学生；
* 相关培训机构的学员。
配套资源获取
　　本书涉及的源代码文件等相关资源需要读者自行下载。请在机工新阅读网站（www.cmpreading.com）上搜索到本书，然后单击“资料下载”按钮，即可在本书页面上找到下载链接。
售后支持
　　本书涉及的内容比较庞杂，加之作者水平和成书时间所限，书中可能还存在一些疏漏和不当之处，敬请读者指正。阅读本书时若有疑问，请发电子邮件到hzbook2017@163.com以获得帮助。
致谢
　　参与本书编写的全体作者在此感谢南京智鹤“大家庭”里的孟召伟、高东林、李豪、沈硕、周攀和Ying等小伙伴们。你们不断探索新技术并与我们交流，使得我们有更开阔的视野写作本书。
　　在此特别感谢妻子韩丽、女儿可可及父母亲。编写本书占用了太多本应陪伴你们的时间，正是因为有你们的支持，才使得我能够将写作坚持到底。——袁林
　　在此特别感谢妻子马冰涵。你的支持与鼓励是我前行的莫大动力，你对我的照顾和爱让我屡屡战胜写作中遇到的困难。我还要感谢父母亲，成长路上是你们引导我树立了正确、积极的价值观，让我得以完成一件如此有意义的事情。——尹皓
　　在此感谢在本书写作过程中所有提供过帮助的人。没有你们，我将无法顺利完成写作。同时，谨以此书献给我的家人、朋友及所有我爱的人。——陈宁
　　最后，要感谢各位读者，本书因你们而有价值。

编 者

计算机\Web开发

本书赞誉
本书对于有一定开发基础，但缺乏实战经验的React和Node.js全栈开发工程师来说可谓雪中送炭。书中介绍的两个商业项目案例非常典型，也很实用。读者系统地研读这两个项目案例的完整开发过程，并动手实践每一个案例，可以迅速提高自己的项目开发水平。
——迪卡侬大中华区CTO　陈颖弘

本书是一本不可多得的Web全栈开发进阶读物，内容实用，可读性强，强烈推荐给想要提高React和Node.js项目开发水平的读者阅读。相信读者可以在作者的引领下很好地掌握书中的项目案例，快速提高独立开发完整商业项目的能力。
——思杰系统（Citrix System）全栈布道师　袁满

本书是一本全栈开发实战类图书，内容翔实，项目案例典型、实用。作者采用当前流行的React+Node.js框架组合，并结合最新的Umi.js、Ant Design及Egg.js框架进行项目开发，非常高效。读者可以将书中的项目案例稍加修改用到自己的项目中，非常方便，推荐相关的Web项目开发人员阅读。
——三星电子（中国）研发中心资深架构师　陈汉文


配套资源获取方式
本书涉及的源代码文件等配套资源需要读者下载。请在机工新阅读网站（www.cmpreading.com）上搜索到本书，然后单击“资料下载”按钮，便可在本书页面上找到下载链接。

袁林 尹皓 陈宁 编著：本书特色
内容全面：不但介绍React和Node.js技术，而且还介绍多个常用工具。
技术新颖：不但介绍常用的前后端分离架构及服务端渲染技术，而且还介绍Ant Design、Umi.js、Express和Egg.js等流行框架。
注重实战：从需求分析、架构设计、代码编写及测试部署的角度，详解两个商业项目案例的完整开发过程，提高读者的实际动手能力。

前言
第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