Web前端技术丛书：React.js实战

本书涵盖npm、Node.js、webpack、ES6、React、JSX、Redux、Jest、Enzyme、Hooks、ESLint、Chrome插件、JavaScript、CSS、ImmutableJS、Perf等热门技术及整个技术站框架的整合使用。

本书最后使用React+webpack+ES6组合形式，开发了笔记本和购物车两个完整项目。读者将案例稍加修改，便可用于实际项目开发实践中。

本书旨在帮读者从零开始学习React基础知识，采用“语法”+“示例”的方式，以便于初学者学习和练习，是目前市场上少有的React入门图书。

本书共14章，分为3篇，涵盖的主要内容有：React的前世今生、使用React所需的预备知识（包括npm、webpack、ES6）、React开发环境搭建、React组件、React事件系统、React原理、数据管理、React架构、React服务端渲染、React测试、React性能优化、React+webpack+ES6项目实战（笔记本+购物车）等。

本书内容丰富、实例典型、实用性强，适合有一定的 HTML、CSS、JavaScript 基础、希望全面学习React开发的前端开发人员阅读，也适合希望提高项目开发水平的人员阅读。

代码下载链接:
https://pan.baidu.com/s/1kep0xsTeSupyr15c3VwmBw 提取码:9pra

赵荣娇，飞猪旅行前端开发工程师，擅长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

　　前 言
　　随着互联网技术的发展，前端技术的发展也进入一个新的阶段。早期的网页开发是由后端主导的，前端的操作局限于DOM区域。随着基础设置的不断完善以及代码封装层级的不断提高，使得前端能够完成的事越来越多，前端所需解决的业务场景也越来越复杂。
　　近几年，前端已经发展到跨端、跨界面的革新阶段，目前主流以基于MVVM、Virtual DOM、前后端同构技术进行开发的项目居多，实现的方向也多种多样。React就是在此基础上发展起来的框架，独特的设计思想所带来的革命性创新让其成为前端新技术的代表。
　　目前市场上关于React开发及实践的图书不少，但真正从零基础搭建开始，通过语法和小示例指导读者提高开发水平的图书却很少。本书便是以实战为主旨，通过React开发中所需要涉及的基础知识和两个完整的项目案例，让读者全面、深入、透彻地理解React开发的技术栈的整合使用。
　　本书的技术点
　　本书涵盖npm、Node.js、webpack、ES6、React、JSX、Redux、Jest、Enzyme、Hooks、ESLint、Chrome插件、JavaScript、CSS、ImmutableJS、Perf等热门技术及整个技术站框架的整合使用。
　　本书最后使用React+webpack+ES6组合形式，开发了笔记本和购物车两个完整项目。读者将案例稍加修改，便可用于实际项目开发实践中。
　　本书的内容
　　本书共有14章，由浅到深地介绍React技术栈中的主要技术，主要内容分为基础篇、进阶篇和实战篇，每一篇内容又分成若干章节来介绍。
　　第1篇 基础篇（第1～3章）
　　介绍React的前世今生，以及React开发中涉及的基本概念，包括React的开发环境和开发工具、React的基本用法。每个知识点都有配套的源代码示例。
　　第2篇 进阶篇（第4～12章）
　　深入介绍React的几个重要概念，包括React组件、React事件系统、React原理、数据管理、React架构、React服务端渲染等。每章都配有大量示例代码，保证读者学以致用。
　　第3篇 实战篇（第13～14章）
　　本篇通过笔记本和购物车两个项目整合使用React技术栈，包括React Router、Redux、SSR，每一个技术都配有详细的项目实战演示。
　　关于封面照片
　　封面照片由蜂鸟网的摄影家ptwkzj先生友情提供，在此表示衷心感谢。
　　读者对象
　　? 有一定的HTML、CSS、JavaScript基础的网页开发人员；
　　? 希望全面学习React开发的前端开发人员；
　　? 希望提高项目开发水平的人员；
　　? 前端开发培训机构的学员；
　　? 软件开发项目经理；
　　? 需要一本案头必备查询手册的人员。
　　本书作者
　　本书第1~6章由刘江虹完成，第7~14章由赵荣娇完成。
　　著 者
　　2019年5月