React开发实战

 

 

《React开发实战 介绍如何成功构建日益复杂的前端应用程序与接口，深入分析
React库，并详述React生态系统中的其他工具与库，从而指导你创建完整的复杂应用
程序。
　　你将全面学习React的用法以及React生态系统中的其他工具和库(如React Router和Flux
架构)，并了解采用组合方式创建接口的*实践。本书简明扼要地讲解每个主题，并呈
现助你高效完成工作的细节。书中严谨深刻地讲述React中*重要的功能，每章还详细列
出常见的开发问题，并解释如何避免它们。
　　如果你拥有使用jQuery或其他JavaScript框架创建前端应用程序的经验，但想解决复杂
前端应用程序构建过程中日益增多的常见问题，那么本书就是为你准备的。开始像专家那
样去使用React吧，今天就把这本书收入囊中！
主要内容
◆　如何创建可组合的用户界面
◆　理解React的虚拟DOM架构以及如何利用该架构开发应用程序
◆　了解各项功能的原理及重要性
◆　深入学习React以及React生态系统中重要的第三方库
◆　学习如何创建通用/同构应用程序从而改进用户体验和SEO
◆　深刻理解复杂应用程序中的数据流策略
◆　学习如何测试、完善和部署React项目

20年前，Cássio de Sousa Antonio使用一台Sinclair Spectrum开启了他的编程生涯，随后在巴西和美国成长为一名软件工程师和技术经理。他参与开发过微软、可口可乐、联合利华和汇丰银行等大公司的项目。他的初创公司于2014年末被收购。Cássio目前担任技术顾问。你可在Twitter上关注他(@cassiozen)。

第1章  React入门 1

1.1  开始学习之前 1

1.1.1 
Node.js和npm 1

1.1.2 
JavaScript ES6 2

1.2  定义React 2

1.3 
React的优点 2

1.3.1 
简单易学的响应式渲染 3

1.3.2 
使用纯JavaScript进行

面向组件开发 3

1.3.3 
灵活的文档模型抽象表现 4

1.4  创建你的个React

应用程序 4

1.4.1 
React开发流程 4

1.4.2 
创建你的个组件 8

1.4.3 
减少输入的字符数量 9

1.4.4 
动态值 10

1.5  将组件组合起来 10

1.5.1 
props 10

1.5.2 
呈现看板应用 11

1.5.3 
定义组件的层次关系 13

1.5.4 
props的重要性 14

1.5.5 
创建组件 14

1.6  介绍state 21

1.7  本章小结 23

第2章  深入DOM抽象 25

2.1 
React中的事件 25

2.1.1 
DOM事件侦听器 25

2.1.2 
看板应用：管理DOM

事件 26

2.2  深入了解JSX 27

 

2.2.1 
JSX与HTML 28

2.2.2 
JSX和HTML的

不同之处 28

2.2.3 
JSX的怪异之处 29

2.3  看板应用：指示卡片的

打开和关闭状态 31

2.3.1 
空格 32

2.3.2 
JSX中的注释 33

2.3.3 
渲染动态HTML 33

2.3.4 
看板应用：渲染

Markdown 33

2.4  脱离JSX的React 36

2.4.1 
普通JavaScript中的

React元素 36

2.4.2 
元素工厂 36

2.4.3 
自定义工厂 37

2.5  内联样式 37

2.5.1 
定义内联样式 37

2.5.2 
看板应用：通过内联样式

定义卡片颜色 38

2.6  使用表单 40

2.6.1 
受控组件 40

2.6.2 
特例 42

2.6.3 
非受控组件 43

2.6.4 
看板应用：创建一个

任务表单 44

2.7  幕后的虚拟DOM 44

2.7.1 
key属性 45

2.7.2 
看板应用：key 45

2.7.3 
refs 47

2.8  本章小结 48

第3章  使用组件构建应用程序 49

3.1  校验属性 49

3.1.1 
属性的默认值 50

3.1.2 
内置的propTypes校验器 51

3.1.3 
为看板应用定义

propTypes 52

3.1.4 
自定义propTypes校验器 54

3.2  组件组合的策略与

实践 55

3.2.1 
有状态的组件和单纯组件 55

3.2.2 
哪些组件应当是有

状态组件 56

3.2.3 
数据流和组件通信 59

3.3  组件的生命周期 63

3.3.1 
声明周期的阶段与函数 63

3.3.2 
生命周期函数实践：

数据获取 64

3.4  浅谈不变性 67

3.4.1 
普通JavaScript中的

不变性 67

3.4.2 
嵌套对象 69

3.4.3 
React不变性助手 70

3.5  看板应用：添加一点

复杂性 73

3.5.1 
从外部API获取初始的

卡片数据 73

3.5.2 
将任务回调以props传递 76

3.5.3 
处理任务数据 80

3.5.4 
基本的乐观更新回滚 83

3.6  本章小结 87

第4章  复杂交互 89

4.1 
React中的动画 89

4.1.1 
CSS过渡和动画基础 89

4.1.2 
ReactCSSTransitionGroup 95

4.2  拖放 100

4.2.1 
React DnD实现概述 101

4.2.2 
React DnD实现示例 101

4.3  看板应用：支持动画和

拖放 113

4.3.1 
卡片切换动画 113

4.3.2 
卡片的拖曳 115

4.4  本章小结 129

第5章  路由 131

5.1  使用原生方式实现路由
131

5.2  React
Router 135

5.2.1 
Index路由 138

5.2.2 
带参数的路由 139

5.2.3 
设置活动链接 144

5.2.4 
传递props 144

5.2.5 
将UI界面与URL解耦 147

5.2.6 
在代码中更改路由 149

5.2.7 
History库 152

5.2.8 
看板应用：实现

路由功能 153

5.3  本章小结 166

第6章  结合Flux的React

应用程序架构 167

6.1  什么是Flux 167

6.1.1 
Store 167

6.1.2 
Action 168

6.1.3 
Dispatcher 169

6.2  假想的简单Flux

应用程序 169

6.3 
Flux工具包 177

6.3.1 
Flux Store工具 177

6.3.2 
容器组件高阶函数 180

6.4  异步Flux 181

6.4.1 
waitFor：协调Store的

更新数序 181

6.4.2 
异步数据获取 184

6.5 
AirCheap应用程序 184

6.5.1 
搭建：项目组织和

基本文件 184

 

6.5.2 
创建用于获取机场的

API助手和Action创

建器 185

6.5.3 
AirportStore 188

6.5.4 
应用组件 189

6.5.5 
完成AirCheap应用程序：

加载机票 194

6.6  改进异步获取数据的实现
204

6.7  看板应用：迁移到

Flux架构 207

6.7.1 
重构：创建Flux基本

结构并迁移文件 207

6.7.2 
将数据获取操作迁移到

Flux架构 212

6.7.3 
实现FetchCards Action、

API方法调用和Store

回调 213

6.7.4 
将所有卡片和任务Action

迁移到Flux架构 216

6.7.5 
准备功能迁移 216

6.7.6 
组件 225

6.7.7 
删除所有组件state 231

6.8  本章小结 241

第7章  性能调优 243

7.1  子级校正过程的工作原理
243

7.1.1 
批处理 243

7.1.2 
子树渲染 244

7.2  
React Perf 244

7.2.1 
性能测试应用 245

7.2.2 
安装并使用React Perf 248

7.3 
shouldComponentUpdate 252

7.4  本章小结 254

第8章  React同构应用 255

8.1 
Node.js和Express 255

8.2 
React同构基础 260

8.2.1 
创建项目结构 260

8.2.2 
在服务器端渲染React

组件 263

8.2.3 
在客户端中挂载React 266

8.3  路由 270

8.3.1 
配置内部路由 270

8.3.2 
动态数据获取 271

8.3.3 
渲染路由 273

8.4  本章小结 278

第9章  测试React组件 279

9.1  Jest
279

9.2 
React测试工具 281

9.2.1 
渲染用于测试的组件 281

9.2.2 
遍历并查找子节点 284

9.2.3 
模拟事件 285

9.2.4 
浅渲染 286

9.3  本章小结 290

附录  JavaScript 2015 291

React是一个用来创建组合式Web应用程序的开源库，由Facebook维护。自从公开发布后，这个库迅速风靡全球，并且围绕着它产生了一个生机勃勃的社区。 本书将涵盖React库的各个细节，并将讨论基于组合式模型来创建Web组件接口的实践。React库本身并不大，所以本书同时涵盖了React生态系统中的一些工具和库(例如React Router和Flux架构)，以便为读者提供创建完整应用程序所需的足够知识。 书中对每个主题的讲解都简洁明了，你将逐一了解到你需要掌握的各个细节，从而学会真正有效地使用它们。本书对React中重要的那些特性的讲解，言简意赅、由浅入深，每个章节中还详细说明实际开发中可能面临的常见问题，并告诉你如何避免它们。 本书概要第1章提供了大量的信息来让你起步，介绍基本的React配置，并让你能全面了解在React中如何组织用户界面。第2章将深入介绍JSX(这是React用来在JavaScript中声明组件标记的JavaScript语法扩展)，同时展示如何使用React的事件系统，以及React的虚拟DOM实现。第3章讲述了如何通过使用组件的方式来创建一个完整的应用程序。你将学习React应用程序的数据如何在组件间流动，并深入了解组件(包括嵌套组件、公开一个API、props、state等知识)。第4章讲述了如何为用户创建丰富的用户体验。你将学习如何在React的插件CSSTransitionGroup的帮助下实现动画效果，以及使用一个名为React DnD的外部库来实现拖放功能。第5章讲述了路由功能。你将学习如何使用React社区中被广泛使用的React Router，来管理URI和设置应用程序的访问点。第6章向读者展现了Flux架构。你将学习这个架构的细节，它解决了哪些问题，以及如何将它集成到一个React应用程序中。第7章讲述了性能调优。在该章，你将学习如何度量应用程序的性能指标。然后你将了解如何优化代码，使应用程序有更好的性能表现。第8章讲述了React同构应用程序(或者称React通用应用程序，也就是在服务器上渲染React)。这种技术可以实现更好的性能、搜索引擎优化和优雅降级(如果浏览器禁用了本地JavaScript，应用程序也能正常工作)。后，第9章讲述了测试。你将学习如何使用React的Test Utils来测试组件。还将学习Jest，这是一个由Facebook创建的、适合用来测试React项目的测试框架。本书读者对象本书主要面向使用诸如jQuery/Backbone/Angular创建前端应用程序且拥有一些经验的中级水平JavaScript开发人员，他们需要了解更好的工具和更多知识，来解决构建复杂前端应用程序过程中所遇到的越来越多的常见问题。源代码本书中所包含的示例项目的源代码，位于Apress网站上的Source Code区域。请访问www.apress.com，单击Source Code，然后查找本书的书名(请使用英文书名Pro React来进行搜索)，就可以找到它们。另外，本书所有的示例代码和一些额外的实用性代码，都可在本书的GitHub页面上找到，网址是pro-react.github.io。此外，可访问www.tupwk. com.cn/downpage，输入中文书名或中文ISBN来下载源代码，也可以扫描本书封底的二维码下载资料。联系作者感谢你购买本书。我希望你能享受阅读本书的乐趣，并从中获取有价值的信息。欢迎你个人针对本书内容与源代码给我提供反馈、问题和评论。你可以通过[email protected]联系我。祝你好运！期待着你的React应用程序的诞生！

评论