张轩，前端开发工程师。曾经在百度、携程就职，目前在苹果公司担任前端开发工程师。拥有丰富的Web开发经验，喜欢追寻新技术，在GitHub上关注各种有趣的项目，同时致力于前端工程化，并且有大型SPA项目的架构及开发经验。他同时是一名业余文学爱好者，在工作之余写一些短篇小说。

杨寒星，前端开发工程师。曾就职于爱奇艺、百度，目前在七牛云负责前端开发与架构设计。对编写优美的代码、构建影响深远的系统感兴趣；专注于现代前端工程化方案搭建及大规模SPA的架构设计，对基于React体系的前端开发有着丰富的实践经验。 

本书从现代前端开发的标准、趋势和常用工具入手，由此引出了优秀的构建工具webpack 和JavaScript库React，之后用一系列的实例来阐述两者的特色、概念和基本使用方法。随着应用复杂度的增加，进而介绍了Flux 和Redux 两种架构思想，并且使用Redux 对现有程序进行改造，最后介绍了在开发过程中出现的反模式和性能优化方法。

第1 章 现代前端开发  1

1．1 ES6――新一代的JavaScript 标准 1

1．1．1 语言特性  2

1．1．2 使用Babel  10

1．1．3 小结  13

1．2 前端组件化方案  13

1．2．1 JavaScript 模块化方案  14

1．2．2 前端的模块化和组件化  16

1．2．3 小结  18

1．3 辅助工具  19

1．3．1 包管理器（Package Manager）  19

1．3．2 任务流工具（Task Runner）  23

1．3．3 模块打包工具（Bundler）  26

第2 章 webpack  28

2．1 webpack 的特点与优势  28

2．1．1 webpack 与RequireJS、browserify 29

2．1．2 模块规范  30

2．1．3 非javascript 模块支持  31

2．1．4 构建产物  32

2．1．5 使用  33

2．1．6 webpack 的特色  35

2．1．7 小结  38

2．2 基于webpack 进行开发  38

2．2．1 安装  38

2．2．2 Hello world  39

2．2．3 使用loader  43

2．2．4 配置文件  46

2．2．5 使用plugin  48

2．2．6 实时构建  50

第3 章 初识React  52

3．1 使用React 与传统前端开发的比较 54

3．1．1 传统做法  54

3．1．2 全量更新  56

3．1．3 使用React  57

3．1．4 小结  59

3．2 JSX  59

3．2．1 来历  59

3．2．2 语法  60

3．2．3 编译JSX  63

3．2．4 小结  64

3．3 React+webpack 开发环境  64

3．3．1 安装配置Babel  64

3．3．2 安装配置ESLint  65

3．3．3 配置webpack  66

3．3．4 添加测试页面  68

3．3．5 添加组件热加载（HMR）功能  70

3．3．6 小结  71

3．4 组件  72

3．4．1 props 属性  73

3．4．2 state 状态  76

3．4．3 组件生命周期  78

3．4．4 组合组件  80

3．4．5 无状态函数式组件  82

3．4．6 state 设计原则  82

3．4．7 DOM 操作  83

3．5 Virtual DOM  85

3．5．1 DOM  85

3．5．2 虚拟元素  86

3．5．3 比较差异  88

第4 章 实践React  91

4．1 开发项目  91

4．1．1 将原型图分割成不同组件  92

4．1．2 创造每个静态组件  93

4．1．3 组合静态组件  96

4．1．4 添加state 的结构  99

4．1．5 组件交互设计  100

4．1．6 组合成为最终版本  102

4．1．7 小结  105

4．2 测试  106

4．2．1 通用测试工具简介  106

4．2．2 React 测试工具及方法  108

4．2．3 配置测试环境  109

4．2．4 Shallow Render  110

4．2．5 DOM Rendering  114

4．2．6 小结  116

第5 章 Flux 架构及其实现 117

5．1 Flux  117

5．1．1 单向数据流  118

5．1．2 项目结构  119

5．1．3 Dispatcher 和action  119

5．1．4 store 和Dispatcher  122

5．1．5 store 和view  124

5．1．6 Flux 的优缺点  126

5．1．7 Flux 的实现  126

5．2 Redux  126

5．2．1 动机  127

5．2．2 三大定律  127

5．2．3 组成  129

5．2．4 数据流  136

5．2．5 使用middleware  137

第6 章 使用Redux  142

6．1 在React 项目中使用Redux  142

6．1．1 如何在React 项目中使用Redux 142

6．1．2 react-redux  147

6．1．3 组件组织  152

6．1．4 开发工具  155

6．2 使用Redux 重构Deskmark  157

6．2．1 概要  157

6．2．2 创建与触发action  158

6．2．3 使用middleware  159

6．2．4 实现reducer  163

6．2．5 创建与连接store  165

第7 章 React＋Redux 进阶 168

7．1 常见误解  168

7．1．1 React 的角色  169

7．1．2 JSX 的角色  169

7．1．3 React 的性能  170

7．1．4 “短路”式性能优化  171

7．1．5 无状态函数式组件的性能  172

7．2 反模式  173

7．2．1 基于props 得到初始state  173

7．2．2 使用refs 获取子组件  176

7．2．3 冗余事实  178

7．2．4 组件的隐式数据源  180

7．2．5 不被预期的副作用  182

7．3 性能优化  183

7．3．1 优化原则  183

7．3．2 性能分析  184

7．3．3 生产环境版本  187

7．3．4 避免不必要的render  188

7．3．5 合理拆分组件  199

7．3．6 合理使用组件内部state  200

7．3．7 小结  203

7．4 社区产物  203

7．4．1 Flux 及其实现  203

7．4．2 Flux Standard Action  204

7．4．3 Ducks  206

7．4．4 GraphQL/Relay 与Falcor  207

7．4．5 副作用的处理  209