内容简介

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

目录

第Ⅰ部分　React基础
第1章初积React3
1.1什么是React4
1.2React解决的问题5
1.3使用React的好处6
1.3.1简单性6
1.3.2速度和可测试性11
1.3.3生态和社区12
1.4React的缺点13
1.5React如何与Web应用集成13
1.5.1React类库和渲染目标14
1.5.2单页面应用和React15
1.5.3React技术栈17
1.6第一个React项目：HelloWorld18
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章　JSX35
3.1JSX是什么？它有什么优点36
3.2理解JSX38
3.2.1使用JSX创建元素39
3.2.2在组件中使用JSX40
3.2.3在JSX中输出变量41
3.2.4在JSX中使用属性42
3.2.5创建React组件的方法46
3.2.6JSX中的if/else47
3.2.7JSX中的注释51
3.3使用Babel设置JSX转译器51
3.4React和JSX陷阱55
3.4.1特殊字符56
3.4.2data-属性56
3.4.3style属性57
3.4.4class和for58
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.1React组件生命周期事件的全景视图80
5.2事件的分类80
5.3实现生命周期事件82
5.4执行所有事件84
5.5挂载事件86
5.5.1componentWillMount()87
5.5.2componentDidMount()87
5.6更新事件90
5.6.1componentWillReceiveProps(newProps)90
5.6.2shouldComponentUpdate()91
5.6.3componentWillUpdate()91
5.6.4componentDidUpdate()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.2React事件的内幕102
6.1.3使用ReactSyntheticEvent事件对象105
6.1.4使用事件和状态108
6.1.5传递事件处理程序和属性109
6.1.6组件通信112
6.2响应React不支持的DOM事件113
6.3React和其他库的集成：jQueryUI事件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.2React属性类型和验证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.1Menu组件165
9.2.2Link组件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.2Tooltip组件179
10.2.1toggle()函数180
10.2.2render()函数181
10.3运行Tooltip组件183
10.4测验184
10.5小结184
第11章　项目：Timer组件185
11.1项目结构和脚手架186
11.2应用架构187
11.3TimerWrapper组件189
11.4Timer组件193
11.5Button组件194
11.6运行Timer组件196
11.7测验196
11.8小结197
第Ⅱ部分　React架构
第12章　Webpack构建工具201
12.1Webpack的作用201
12.2添加Webpack到项目中203
12.2.1安装Webpack及其依赖204
12.2.2配置Webpack205
12.3模块化代码207
12.4运行Webpack并测试构建208
12.5热模块替换210
12.5.1配置HMR211
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.2ReactRouter222
13.2.1ReactRouter的JSX样式225
13.2.2哈希记录227
13.2.3浏览器记录227
13.2.4使用Webpack安装ReactRouter开发环境228
13.2.5创建布局组件230
13.3ReactRouter特性233
13.3.1使用withRouter高阶组件访问路由器234
13.3.2以编程方式导航235
13.3.3URL参数和其他路由数据235
13.3.4在ReactRouter中传递属性236
13.4使用Backbone路由237
13.5测验240
13.6小结241
13.7测验答案241
第14章　使用Redux处理数据243
14.1React支持单向数据流244
14.2了解Flux数据体系结构246
14.3使用Redux数据类库247
14.3.1用Redux创建依照Netflix的应用249
14.3.2依赖和配置250
14.3.3启用Redux253
14.3.4路由253
14.3.5合并reducer254
14.3.6电影的reducer255
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.13Redux总结268
14.4测验268
14.5小结269
14.6测验答案269
第15章　使用GraphQL处理数据271
15.1GraphQL272
15.2给Netflix克隆版应用添加服务器273
15.2.1在服务器端安装GraphQL275
15.2.2数据结构278
15.2.3GraphQL模式279
15.2.4查询API并将响应保存到数据存储281
15.2.5显示电影列表285
15.2.6GraphQL总结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.2Jest断言294
16.4使用Jest和TestUtils进行ReactUI测试296
16.4.1使用TestUtils查找元素298
16.4.2UI测试密码部件299
16.4.3浅渲染303
16.5TestUtils总结305
16.6测验305
16.7小结305
16.8测验答案306
第17章　在Node中使用React和同构JavaScript307
17.1为什么在服务器端使用React？
什么是同构JavaScript？308
17.1.1正确的页面索引308
17.1.2更快的加载速度、更好的性能309
17.1.3更好的代码可维护性310
17.1.4在React和Node中使用同构JavaScript310
17.2在Node上使用React312
17.3React和Express：在服务器端渲染组件314
17.3.1在服务器端渲染简单的文本315
17.3.2渲染HTML页面316
17.4使用Express和React的同构JavaScript322
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配置Webpack334
17.4.7运行应用336
17.5测验340
17.6小结340
17.7测验答案340
第18章　使用ReactRouter创建一个网上书店341
18.1项目结构和Webpack配置343
18.2HTML主页346
18.3创建组件347
18.3.1主文件：app.jsx347
18.3.2Cart组件353
18.3.3Checkout组件355
18.3.4Modal组件356
18.3.5Product组件357
18.4启动项目359
18.5测验359
18.6小结359
第19章　使用Jest测试密码361
19.1项目结构和Webpack配置362
19.2HTML主页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定义RESTfulAPI386
20.2.2在服务器端渲染React387
20.3添加浏览器脚本387
20.4创建服务器端模板388
20.5实现Autocomplete组件389
20.5.1Autocomplete组件的测试389
20.5.2Autocomplete组件的代码390
20.6整合393
20.7测验395
20.8小结396
附录A　安装《Web开发经典丛书：快速上手React编程》相关应用397
附录B　React速查表405
附录C　Express速查表413
附录D　MongoDB和Mongoose
速查表419
附录E　ES6简介423




前言/序言

　　前言
　　那是2008年，银行纷纷倒闭。我在联邦存款保险公司(FederalDepositInsuranceCorporation，FDIC)工作，主要任务是偿还倒闭、失败和破产的银行储户。我承认，就职业安全感而言，我的工作等同于在雷曼兄弟上班或在泰坦尼克号上卖票。但是，当我所在的部门还没有开始最终的预算削减时，我还有机会开发一款名为EDIE的应用。这款应用由于一个简单的原因而变得非常流行：人们急于想知道他们的存款中有多少由美国联邦政府提供保险，而EDIE能够估算这一数额。
　　但是存在一个问题：人们不喜欢把他们的私人账户告诉政府。为了保护他们的隐私，这款应用完全在前端完成：JavaScript、HTML和CSS，没有任何后端技术。如此，FDIC就不会收集任何个人财产信息。
　　这款应用经历了数十次迭代，留下了一团混乱的意大利面条式代码。开发人员来去匆匆，没有留下任何文档，也没有任何符合逻辑的简单算法。这就像没有地图就要去乘坐纽约市地铁一样。有很多函数可以调用其他函数、奇怪的数据结构以及更多的函数。在现代术语中，这款应用采用纯用户界面(UserInterface，UI)，因为没有后端。
　　我多么希望那时能有React。React带来了愉悦。它是一种全新的思考方式，也是一种全新的开发方式。将核心功能放在一处，而不是将其分解为HTML和JS，这种简单是一种解放。它重新点燃了我对前端开发的热情。
　　React是开发UI组件的一种新方法。它是新一代的表现层库。与模型和路由库一起配合，React可以在Web和移动技术栈中取代Angular、Backbone或Ember。这就是我写这《快速上手React编程》的原因。我从来不喜欢Angular：它太复杂和大一统了。模板引擎是特定领域的，甚至不再是JavaScript；它是另一种语言。我使用过Backbone，喜欢它的简单和DIY方式。Backbone是成熟的，它更像是你自己框架的基石，而不是一个全面的、大一统的框架。Backbone的问题是模型与视图之间不断增加的交互复杂性：多个视图更新多种模型，有的会更新其他视图，有的会触发模型上的事件。
　　举办React在线课程(http://mng.bz/XgkO)，以及参加各种会议和活动的个人经验已经显示，开发者渴望一种更好的开发UI的方法。大多数商业价值存在于UI，而后端负责提供商品。在海湾地区，也是我居住和工作的地方，大多数软件工程师的职位空缺是前端或(一个时髦的头衔)通才/全栈开发者。只有少数像谷歌、亚马逊和CapitalOne这样的大公司，对数据科学家和后端工程师的需求依然强劲。
　　想要确保职业安全感，或找到一份好工作，最好的方法就是成为一名多面手。要做到这一点，最快的方法是使用同构的、可扩展的、对开发者友好的库，就像前端的React搭配后端的Node.js，以防止需要处理服务器端代码。
　　对于移动开发者来说，HTML5是两三年以前的一个肮脏词汇。Facebook放弃了HTML5应用，转而支持更高效的原生(native)实现。但是这种不利观点正在迅速改变。通过ReactNative，可以渲染移动应用：可以保留UI组件，但在不同的环境下调整它们，这是另一种支持学习React的观点。
　　编程可以是创造性的。不要陷入乏味的任务、复杂的事情以及伪关注点分离。砍掉所有不必要的垃圾，通过React提供的简化的模块之美、基于组件的UI释放你的创造力。为同构的JavaScript引入一些Node，你将达到禅定的境界。
　　祝你阅读愉快，并让我知道你对这《快速上手React编程》的评价，请在Amazon.com(http://amzn.to/2gPxv9Q)上留言。


其他推荐