快速上手React编程 PDF 影印中文版

《快速上手React编程》面向希望快速上手React.js进行Web开发的读者，借助精心挑选和详细解释的实例，帮助读者使用现有的JavaScript和Web开发技能学习React开发。在学习Web组件、表单和数据的过程中，还将探索许多不同的项目。 主要特点： 掌握React基础 使用数据和路由构建完整的Web应用 测试组件 优化React应用

目录

• 第1章  初积React  3
• 1.1  什么是React  4
• 1.2 React解决的问题  5
• 1.3  使用React的好处  6
• 1.3.1  简单性  6
• 1.3.2  速度和可测试性  11
• 1.3.3  生态和社区  12
• 1.4 React的缺点  13
• 1.5 React如何与Web应用集成  13
• 1.5.1  React类库和渲染目标  14
• 1.5.2  单页面应用和React  15
• 1.5.3  React技术栈  17
• 1.6  第一个React项目：
• Hello World  18
• 1.7  测验  21
• 1.8  小结  21
• 1.9  测验答案  22
• 第2章　React起步  23
• 2.1  内嵌元素  23
• 2.2  创建组件类  26
• 2.3  属性  29
• 2.4  测验  34
• 2.5  小结  34
• 2.6  测验答案  34
• 第3章　JSX  35
• 3.1 JSX是什么？它有什么优点  36
• 3.2  理解JSX  38
• 3.2.1  使用JSX创建元素  39
• 3.2.2  在组件中使用JSX  40
• 3.2.3  在JSX中输出变量  41
• 3.2.4  在JSX中使用属性  42
• 3.2.5  创建React组件的方法  46
• 3.2.6  JSX中的if/else  47
• 3.2.7  JSX中的注释  51
• 3.3  使用Babel设置JSX转译器  51
• 3.4 React和JSX陷阱  55
• 3.4.1  特殊字符  56
• 3.4.2  data-属性  56
• 3.4.3  style属性  57
• 3.4.4  class和for  58
• 3.4.5  布尔类型的属性值  58
• 3.5  测验  59
• 3.6  小结  59
• 3.7  测验答案  59
• 第4章　与状态交互  61
• 4.1  什么是React组件的状态  62
• 4.2  使用状态  63
• 4.2.1  访问状态  63
• 4.2.2  设置初始状态  65
• 4.2.3  更新状态  67
• 4.3  状态和属性  70
• 4.4  无状态组件  71
• 4.5  有状态组件和无状态组件  73
• 4.6  测验  77
• 4.7  小结  77
• 4.8  测验答案  78
• 第5章　React组件生命周期  79
• 5.1 React组件生命周期事件的
• 全景视图  80
• 5.2  事件的分类  80
• 5.3  实现生命周期事件  82
• 5.4  执行所有事件  84
• 5.5  挂载事件  86
• 5.5.1  componentWillMount( )  87
• 5.5.2  componentDidMount( )  87
• 5.6  更新事件  90
• 5.6.1  componentWillReceiveProps
• (newProps)  90
• 5.6.2  shouldComponentUpdate( )  91
• 5.6.3  componentWillUpdate( )  91
• 5.6.4  componentDidUpdate()  92
• 5.7  卸载事件  92
• 5.8  一个简单示例  92
• 5.9  测验  95
• 5.10 小结  95
• 5.11 测验答案  96
• 第6章　React事件处理  97
• 6.1  在React中处理DOM事件  97
• 6.1.1  捕获和冒泡阶段  100
• 6.1.2  React事件的内幕  102
• 6.1.3  使用ReactSyntheticEvent
• 事件对象  105
• 6.1.4  使用事件和状态  108
• 6.1.5  传递事件处理程序和
• 属性  109
• 6.1.6  组件通信  112
• 6.2  响应React不支持的DOM
• 事件 113
• 6.3 React和其他库的集成：
• jQuery UI事件 116
• 6.3.1  集成按钮  116
• 6.3.2  集成标签  118
• 6.4  测验 119
• 6.5  小结 119
• 6.6  测验答案 120
• 第7章　在React中使用表单  121
• 7.1  在React中使用表单的最佳
• 实践 121
• 7.1.1  在React中定义表单及
• 响应事件  123
• 7.1.2  定义表单元素  125
• 7.1.3  捕获表单变更  130
• 7.1.4  账户字段示例  132
• 7.2  使用表单的其他方式 134
• 7.2.1  可捕获变更的非受控元素  135
• 7.2.2  不捕获变更的非受控元素  136
• 7.2.3  使用引用获取值  137
• 7.2.4  默认值  139
• 7.3  测验 140
• 7.4  小结 141
• 7.5  测验答案 141
• 第8章　扩展React组件  143
• 8.1  组件中的默认属性 144
• 8.2  React属性类型和验证  145
• 8.3  渲染子组件 152
• 8.4  创建React高阶组件以实现
• 代码复用 154
• 8.4.1  使用displayName：用以区分
• 父组件与子组件  156
• 8.4.2  使用扩展运算符：传递所有
• 属性  157
• 8.4.3  使用高阶组件  158
• 8.5  最佳实践：展示组件与容器
• 组件 160
• 8.6  测验 161
• 8.7  小结 161
• 8.8  测验答案 162
• 第9章　项目：菜单组件  163
• 9.1  项目结构和脚手架 164
• 9.2　不使用JSX构建菜单 165
• 9.2.1  Menu组件  165
• 9.2.2  Link组件  168
• 9.2.3  运行菜单组件  170
• 9.3  在JSX中构建菜单 171
• 9.3.1  重构Menu组件  172
• 9.3.2  重构Link组件  174
• 9.3.3  运行JSX项目  175
• 9.4  测验 175
• 9.5  小结 176
• 第10章　项目：Tooltip组件  177
• 10.1 项目结构和脚手架  178
• 10.2 Tooltip组件  179
• 10.2.1 toggle( )函数  180
• 10.2.2 render( )函数  181
• 10.3 运行Tooltip组件  183
• 10.4 测验  184
• 10.5 小结  184
• 第11章　项目：Timer组件  185
• 11.1 项目结构和脚手架  186
• 11.2 应用架构  187
• 11.3 TimerWrapper组件  189
• 11.4 Timer组件  193
• 11.5 Button组件  194
• 11.6 运行Timer组件  196
• 11.7 测验  196
• 11.8 小结  197
• 第Ⅱ部分　React架构
• 第12章　Webpack构建工具  201
• 12.1 Webpack的作用  201
• 12.2 添加Webpack到项目中  203
• 12.2.1 安装Webpack及其
• 依赖  204
• 12.2.2 配置Webpack  205
• 12.3 模块化代码  207
• 12.4 运行Webpack并测试构建  208
• 12.5 热模块替换  210
• 12.5.1 配置HMR  211
• 12.5.2 热模块替换实践  214
• 12.6 测验  216
• 12.7 小结  216
• 12.8 测验答案  216
• 第13章　React路由  217
• 13.1 从零开始实现路由  218
• 13.1.1 建立项目  219
• 13.1.2 在app.jsx中创建路由
• 映射  220
• 13.1.3 在router.jsx中创建
• Router组件  221
• 13.2 React Router  222
• 13.2.1 React Router的JSX
• 样式  225
• 13.2.2 哈希记录  227
• 13.2.3 浏览器记录  227
• 13.2.4 使用Webpack安装
• React Router开发环境  228
• 13.2.5 创建布局组件  230
• 13.3 React Router特性  233
• 13.3.1 使用withRouter高阶组件
• 访问路由器  234
• 13.3.2 以编程方式导航  235
• 13.3.3 URL参数和其他路由
• 数据  235
• 13.3.4 在React Router中传递
• 属性  236
• 13.4 使用Backbone路由  237
• 13.5 测验  240
• 13.6  小结  241
• 13.7 测验答案  241
• 第14章　使用Redux处理数据  243
• 14.1 React支持单向数据流  244
• 14.2 了解Flux数据体系结构  246
• 14.3 使用Redux数据类库  247
• 14.3.1 用Redux创建依照Netflix
• 的应用  249
• 14.3.2 依赖和配置  250
• 14.3.3 启用Redux  253
• 14.3.4 路由  253
• 14.3.5 合并reducer  254
• 14.3.6 电影的reducer  255
• 14.3.7 操作  258
• 14.3.8 操作创建器  259
• 14.3.9 将组件连接到数据
• 存储  260
• 14.3.10 分发操作  262
• 14.3.11 将操作创建器传递到
• 组件属性中  263
• 14.3.12 运行Netflix的克隆版  267
• 14.3.13 Redux总结  268
• 14.4 测验  268
• 14.5 小结  269
• 14.6 测验答案  269
• 第15章　使用GraphQL处理数据  271
• 15.1 GraphQL  272
• 15.2 给Netflix克隆版应用添加
• 服务器  273
• 15.2.1 在服务器端安装
• GraphQL  275
• 15.2.2 数据结构  278
• 15.2.3 GraphQL模式  279
• 15.2.4 查询API并将响应保存
• 到数据存储  281
• 15.2.5 显示电影列表  285
• 15.2.6 GraphQL总结  287
• 15.3 测验  287
• 15.4 小结  288
• 15.5 测验答案  288
• 第16章　使用Jest进行单元测试  289
• 16.1 测试的类型  290
• 16.2 为什么使用Jest(对比
• Mocha)  290
• 16.3 使用Jest进行单元测试  291
• 16.3.1 在Jest中编写单元
• 测试  293
• 16.3.2 Jest断言  294
• 16.4 使用Jest和TestUtils进行
• React UI测试  296
• 16.4.1 使用TestUtils查找
• 元素  298
• 16.4.2 UI测试密码部件  299
• 16.4.3 浅渲染  303
• 16.5 TestUtils总结  305
• 16.6 测验  305
• 16.7 小结  305
• 16.8 测验答案  306
• 第17章　在Node中使用React和
• 同构JavaScript  307
• 17.1 为什么在服务器端使用React？
• 什么是同构JavaScript？ 308
• 17.1.1 正确的页面索引  308
• 17.1.2 更快的加载速度、更好的
• 性能  309
• 17.1.3 更好的代码可维护性  310
• 17.1.4 在React和Node中使用
• 同构JavaScript  310
• 17.2 在Node上使用React  312
• 17.3 React和Express：在服务器端
• 渲染组件  314
• 17.3.1 在服务器端渲染简单的
• 文本  315
• 17.3.2 渲染HTML页面  316
• 17.4 使用Express和React的同构
• JavaScript  322
• 17.4.1 项目目录结构和配置  324
• 17.4.2 启动服务器  325
• 17.4.3 使用Handlebars的服务器
• 端布局模板  329
• 17.4.4 在服务器上编写React
• 组件  332
• 17.4.5 客户端React代码  333
• 17.4.6 配置Webpack  334
• 17.4.7 运行应用  336
• 17.5 测验  340
• 17.6 小结  340
• 17.7 测验答案  340
• 第18章　使用ReactRouter创建一个
• 网上书店  341
• 18.1 项目结构和Webpack配置  343
• 18.2 HTML主页  346
• 18.3 创建组件  347
• 18.3.1 主文件：app.jsx  347
• 18.3.2 Cart组件  353
• 18.3.3 Checkout组件  355
• 18.3.4 Modal组件  356
• 18.3.5 Product组件  357
• 18.4 启动项目  359
• 18.5 测验  359
• 18.6 小结  359
• 第19章　使用Jest测试密码  361
• 19.1 项目结构和Webpack配置  362
• 19.2 HTML主页  365
• 19.3 实现强密码模块  366
• 19.3.1 测试  366
• 19.3.2 代码  367
• 19.4 实现Password组件  369
• 19.4.1 测试  369
• 19.4.2 代码  370
• 19.5 实践  375
• 19.6 测验  376
• 19.7 小结  377
• 第20章　使用Jest、Express和
• MongoDB实现自动完成  379
• 20.1 项目结构和Webpack配置  381
• 20.2 实现Web服务器  385
• 20.2.1 定义RESTful API  386
• 20.2.2 在服务器端渲染React  387
• 20.3 添加浏览器脚本  387
• 20.4 创建服务器端模板  388
• 20.5 实现Autocomplete组件  389
• 20.5.1 Autocomplete组件的
• 测试  389
• 20.5.2 Autocomplete组件的
• 代码  390
• 20.6 整合  393
• 20.7 测验  395
• 20.8 小结  396
• 附录A　安装本书相关应用  397
• 附录B　React速查表  405
• 附录C　Express速查表  413
• 附录D　MongoDB和Mongoose
• 速查表  419
• 附录E　ES6简介