React用来构建那些数据会随时间改变的大型应用，目前已成为Web前端技术的S选，也是前端从业人员必须掌握的技术。本书旨在让读者轻松掌握React技术，每个技术点都结合一个网页示例，让读者可以快速掌握，最终获得构建大型网站应用的技能。

本书是一本从实战出发，学习React.js 16框架及其相关技术栈的入门与实践书籍。全书内容翔实、重点突出、代码丰富、通俗易懂，涵盖了React.js 16框架开发的方方面面。

全书共分为16章，包括React基础开发、React JSX、组件Components、Props参数、State状态和生命周期、事件处理、条件渲染、列表、表单、组合与继承、状态提升、Refs、Router路由与Redux扩展等相关知识内容。另外，为了突出本书项目实战的特性，有针对性地基于React框架及其技术栈讲解了5个实际项目应用，可以帮助读者深入掌握React的开发技巧。

本书用于学习React.js 16编程，全书内容简洁、代码精练、重点突出、实例丰富，能够帮助初学者快速掌握React开发方法。同时，对于前端开发人员提高服务器端脚本语言的开发技术水平有非常大的帮助。

王金柱，对JavaScript语言、jQuery框架、Node.js、React等Web前端开发有着独到的经验，并精通HTML/XHTML、CSS与PHP等开发语言的应用。有着10多年丰富的IT从业经历，完成过多家大型央企与上市公司的企业级Web系统平台项目的前端模块开发工作。

目 录

第1章 React简介 1
1.1 React概述 1
1.2 React优势 1
1.3 第一个React应用 2
1.4 React脚手架 5
1.4.1 关于React脚手架 5
1.4.2 Node.js与npm 6
1.4.3 Webpack模块打包器 7
1.4.4 ES6和Babel 7
1.4.5 使用create-react-app脚手架开发第一个应用 8
1.4.6 React项目架构 9
1.5 React虚拟DOM 10
1.6 JSX简单入门 14
1.7 React渲染机制 16
第2章 React JSX 19
2.1 JSX介绍 19
2.2 JSX独立文件 19
2.3 JSX算术表达式 21
2.4 JSX条件表达式 23
2.5 JSX嵌入表达式 24
2.6 JSX对象表达式 26
2.7 JSX函数表达式 28
2.8 JSX增强函数表达式 29
2.9 JSX数组表达式 32
2.10 JSX样式表达式 33
2.11 JSX注释表达式 35

第3章 React组件与Props 37
3.1 React组件介绍 37
3.2 React函数组件 38
3.3 React类组件 39
3.4 React组合组件 42
3.5 React Props介绍 45
3.6 React Props应用 47
3.7 React Props只读性 49
3.8 React Props默认值 52
3.9 React组件切分与提取 54
第4章 React State与生命周期 63
4.1 React State介绍 63
4.2 关于定时器时钟的思考 65
4.3 开始封装时钟UI 66
4.4 实现时钟UI的自动更新 68
4.5 自我更新的时钟UI类 69
4.6 在时钟组件类中引入State状态 72
4.7 React生命周期介绍 76
4.8 在时钟组件类中使用生命周期 77
4.9 正确的使用State状态 79
4.10 自顶向下的数据流 84
第5章 React事件处理 92
5.1 React事件介绍 92
5.2 React单击事件 94
5.3 React阻止事件默认行为 97
5.4 React类的事件处理方法 99
5.5 绑定回调方法的其他方式 101
5.6 在事件处理方法中传递参数 105
5.7 实战：开关按钮 109
5.8 React文本框事件 113
5.9 实战：水温监控控件 117
第6章 React条件渲染 122
6.1 React条件渲染介绍 122
6.2 元素变量的条件渲染 125
6.3 逻辑“与”运算符的条件渲染 133
6.4 逻辑“或”运算符的条件渲染 135
6.5 三元逻辑表达式的条件渲染 137
6.6 实战：改进登录组件 139
6.7 阻止组件渲染 142
第7章 React列表与Key 145
7.1 React列表介绍 145
7.2 基础列表组件 147
7.3 多级列表组件 149
7.4 React Key介绍 152
7.5 React Key使用 155
7.6 React通过Key提取组件 157
7.7 React Key局部唯一性 162
7.8 React Key有效性 164
第8章 React表单 168
8.1 React表单介绍 168
8.2 表单受控组件 171
8.3 强制转换大写字母 177
8.4 校验手机号码格式 181
8.5 格式化序列号 187
8.6 文本域关键字 190
8.7 下拉列表受控组件 194
8.8 处理多个输入 197
8.9 React表单提交操作 200
8.10 React表单提交服务器 205
8.11 受控组件与非受控组件 210
第9章 组合与继承 215
9.1 组合与继承概述 215
9.2 定义组件容器 215
9.3 定义子组件 216
9.4 自定义Props属性 221
9.5 特例关系组合 223
9.6 类组合方式确认框 225

第10章 状态提升 229
10.1 设计构想 229
10.2 实现水温监控功能 230
10.3 加入第二个水温输入框 233
10.4 同步二个水温输入框 237
10.5 将水温“状态共享” 240
10.6 将水温“状态提升” 244
10.7 实现水温同步换算 249
第11章 React扩展 255
11.1 Node.js与React 255
11.2 Babel与React 256
11.3 Webpack模块打包器 257
11.4 Node+Babel+Webpack搭建React环境 261
11.5 Browserify模块打包器 268
11.6 React Router与单页面应用 271
11.7 Redux与React 273
第12章 实战1：基于React + Redux 实现计数器应用 279
12.1 设计思想 279
12.2 计数器应用页面 280
12.3 主入口模块 281
12.4 视图模块 282
12.5 Action定义 285
12.6 Reducer设计 285
12.7 计数器应用测试 286
第13章 实战2：基于React+Redux 实现计算器应用 289
13.1 设计思想 289
13.2 计算器应用页面 290
13.3 主入口模块 291
13.4 视图模块 292
13.5 Action定义 296
13.6 Reducer设计 297
13.7 计算器应用测试 299

第14章 实战3：基于Provider容器组件重构计算器应用 301
14.1 设计思想 301
14.2 主入口模块 303
14.3 App组件 303
14.4 视图模块 305
14.5 Action定义 309
14.6 Reducer设计 309
14.7 重构的计算器应用测试 312
第15章 实战4：基于Redux 实现任务管理器应用 313
15.1 设计思想 313
15.2 任务管理器应用页面 314
15.3 主入口模块 315
15.4 App组件 315
15.5 AddTodo组件 316
15.6 VisibleTodoList组件 317
15.7 Footer组件 320
15.8 Action定义 322
15.9 Reducer设计 323
15.10 任务管理器应用测试 325
第16章 实战5：基于React+Router+Redux 的网站架构 328
16.1 设计思想 328
16.2 网站架构应用页面 329
16.3 主入口模块 330
16.4 App组件 330
16.5 Reducer设计 332
16.6 视图组件 335
16.7 Action定义 338
16.8 网站架构应用测试 339

前 言

读懂本书

React异军突起

React框架自诞生伊始就备受瞩目，一切皆源自其强大的背景。React框架最初是社交网络巨头Facebook（脸书）公司的一个内部项目，设计目标是用来架构Instagram网站的。Instagram就是大名鼎鼎的、用于图片分享的社交应用，用户可通过Instagram随时随地将抓拍的图片上传到移动终端设备（手机、平板电脑等）上彼此分享。

本书注重代码实践，为读者全面深入地讲解了针对React 16开发的技术栈。全书百余个代码实例给读者带来的不仅仅是全面的基础知识，更是为读者提供了设计简洁、开发高效的实际项目应用。可以说，这是一本学习React 16框架开发技术的高效手册。

React支持跨终端、多平台的开发，无论是传统的PC端、还是现今正流行的移动端设备，又或是Windows系统、Android系统和iOS系统，均是React可以发挥威力的舞台。可以说，今天React框架的迅速崛起是由其内在的技术特性所决定的。

React技术领先

React框架的设计初衷主要是用于构建UI，而构建UI的核心思想就是封装组件。组件维护自身的状态和UI，每当状态发生改变时就会自动重新渲染组件自身，而不需要通过反复查找DOM元素后再重新渲染整个组件了。

同时，React框架支持传递多种类型的参数，比如：代码声明、动态变量，甚至是可交互的应用组件。因此，UI渲染方式既可以通过传统的静态HTML DOM元素，也可以通过传递动态变量，甚至是通过整个可交互的组件来完成的。

本书中关于以上这些技术内容均有详细介绍，通过具体的代码实例帮助读者学习和掌握这些知识点的原理及使用方法，真正实现了理论与实践相结合的学习方法。

本书真的适合你吗？

本书涵盖了绝大部分关于React 16基础及进阶的内容，将知识点与应用实例相结合，通过大量的代码实例帮助读者快速掌握React 16框架的编程技巧，并应用到实践开发之中。本书通过这种学以致用的方式来增强读者的阅读兴趣，对于无论是基础内容或提高内容，相信读者都可以从中获益。

本书内容安排

本书共16章，各章节针对不同的React 16知识点进行了详细的介绍：

第1章主要介绍了关于React 16框架安装、环境搭建和开发工具使用方面的内容，旨在帮助读者快速掌握React开发的方法。

第2章主要介绍了关于React JSX方面的知识，JSX其实就是JavaScript XML的缩写，具有支持自定义属性和很好扩展性的特点，是React框架所独有的内置语法，因此建议设计人员使用JSX方式来实现UI中的虚拟DOM。

第3章主要介绍了React组件和Props参数方面的内容。React组件可以将UI切分成一些独立的、可复用的部件，这样有助于设计人员专注于构建每一个单独的部件。React组件通过Props可以接收任意的输入值，因此Props也可以理解为参数的概念。

第4章主要介绍了React State（状态）和生命周期方面的知识。React将组件看成是一个状态机（State Machines），通过其内部定义的状态（State）与生命周期（Lifecycle）实现与用户的交互，并维持组件不同的状态。

第5章主要介绍了React事件处理方面的内容。React框架的事件处理机制与JavaScript的DOM元素事件类似，但二者在语法上是略有不同的。通过本章的学习，可以帮助读者理解React事件处理的使用方法。

第6章主要介绍了关于React条件渲染方面的内容。在React框架中，设计人员可以创建不同的组件来封装各种业务需求，然后依据需求的不同状态，仅仅渲染组件中对应状态下的局部内容。

第7章主要介绍了关于React列表的知识。具体包括如何创建、转化和使用列表，以及如何通过Key来识别元素改变的操作。

第8章主要介绍了关于React表单的内容。具体包括如何在React框架中使用表单（Form），以及与HTML表单的异同。React表单中的DOM元素与React框架中的其他DOM元素有所不同，因为表单元素需要保留一些内部状态（State）。

第9章主要介绍了关于React组合与继承方面的知识。React官方推荐设计人员在实际项目中尽量使用组合模式、而非继承来实现组件的代码重用。因此在本章中将对这两种模式进行一些基本的阐述。

第10章主要介绍了关于React状态提升方面的内容。在React框架中，当多个组件需要反映相同的变化数据，这时建议将共享状态提升到最近的共同父组件中去，这就是所谓的“状态提升”。

第11章主要介绍了关于React扩展方面的内容。所涉及的内容包括Node、Babel、Webpack、Browserify、React Router和单页面，以及Redux等。这些知识点或是与React环境相关、或者与React扩展相关，都是与React设计开发息息相关的内容。

第12～16章针对React及其技术栈专门开发了5个实际的项目应用，具体包括React、React-Router和Redux等方面的内容，尽量帮助读者在实践中学习和掌握React框架开发Web应用的方法和技巧。

本书特点

（1）本书从最简单的、最通用的React代码实例出发，抛开枯燥的纯理论知识介绍，通过实例讲解的方式帮助读者快速学习React开发技巧。

（2）本书内容涵盖了React框架及其技术栈开发所涉及的绝大部分知识点，将这些内容整合到一起可以系统地了解和掌握这门语言的全貌，为介入大型Web项目的开发做了很好的铺垫。

（3）本书对于实例中的知识难点做出了详细的分析，能够帮助读者有针对性地提高React编程开发技巧，并且通过多个实际的项目应用，尽力帮助读者掌握React框架开发所涉及方方面面的内容。

（4）本书在React及其相关知识点上按照类别进行合理的划分，全部的代码实例都是独立的，读者可以从头开始阅读，也可以从中间开始阅读，不会影响学习进度。

（5）本书代码遵循重构原理，避免代码污染，真心希望读者能写出优秀的、简洁的、可维护的代码。

源代码下载

本书示例源代码下载地址请扫描右边二维码获得。

如果下载有问题，请直接联系booksaga@163.com解决问题，邮件主题为“React.js 16从入门到实战”。

本书读者

? React框架学习初学者

? Node.js框架学习初学者

? JavaScript开发初学者和前端开发初学者

? 由JavaScript向React框架转型的开发人员

? IT培训学校前端实践课程的学生

? 高等院校前端实践课程的学生

关于封面照片

封面照片由蜂鸟网的摄影家ptwkzj先生友情提供，在此表示衷心感谢。

作 者

2020年1月