快速上手React编程

图书标准信息

• 作者 [美]Azat Mardan 著；唐金州 译；郭美青；郭松
• 出版社 清华大学出版社
• 出版时间 2018-06
• 版次 1
• ISBN 9787302502470
• 定价 88.00元
• 装帧 其他
• 开本 16开
• 纸张 胶版纸
• 页数 460页
• 字数 700千字

【内容简介】

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

【作者简介】

我已经出版了超过14本书和17门在线课程(https://node.university)，它们中的大多数存储在云端，涉及React、JavaScript和Node.js。在关注Node之前，我也使用过其他语言编程(Java、C、Perl、PHP、Ruby)，几乎从高中开始编程(十多年前)，并且绝对超过了规定的一万小时。现在，我是美国十大银行之一的技术研究员，它也是一家财富500强公司：Capital One Financial Corporation，位于美丽的旧金山。在那之前，我曾为小型初创公司、大型企业，甚至美国联邦政府工作过，编写桌面、Web和移动应用，从事教学、开发协调和项目管理。我不想占用你太多的时间介绍自己，你可以在我的博客(http://webapplog.com/about)和社交媒体(www.linkedin.com/in/azatm)上了解我的更多信息。相反，我想把关于这本书的经历写下来。2011年，我搬到了阳光明媚的加州，开始通过企业加速器创业(如果你对此好奇，它就是500家初创公司)，开始使用现代的JavaScript。我学会了使用Backbone为公司创建一些应用，并对此印象深刻。该框架极大地改进了我前几年构建的单页面应用的代码组织。它有路由和模型。这很棒！我在DocuSign(去Google搜索一下e-signatures，它的市场占有率达到70%)担任软件工程团队领导时，又有机会看到了Backbone和同构JavaScript的惊人能力。我们重构了一个有7年历史的ASP.NET Web应用，每一个小版本的发布都需要四周的时间，而使用时髦的Backbone-Node-CoffeeScript-Express应用不仅具有非常好的用户体验，而且发布版本只需要一到两周的时间。设计团队在可用性方面做得很好。毋庸置疑，有大量具有不同程度交互的UI视图。最终的应用是同构的，甚至在此之前还不存在该术语。我们使用服务器上的Backbone模型从API获取数据并将其缓存。我们在浏览器和服务器上使用相同的Jade模板。这是一个有趣的项目，它让我更加相信使用一种语言横跨整个技术栈的力量。精通C#和前端JavaScript(大部分是jQuery)的老款应用开发者，如果花点时间突击一下(一个发布周期，通常是一到两周)，就会爱上结构清晰的CoffeeScript、Backbone的组织结构以及Node的速度(开发和运行速度)。我在Web开发领域十几年的经验向我揭示了好的、坏的以及丑陋的(大部分是丑陋的)前端开发。然而柳暗花明，因为自从切换到React，我就越来越喜欢它了。

【目录】

第Ⅰ部分　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  使用React

SyntheticEvent

事件对象  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章　使用React

Router创建一个

网上书店  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简介