新書推薦:
《
剑桥意大利戏剧史(剑桥世界戏剧史译丛)
》
售價:NT$
740.0
《
教育何用:重估教育的价值
》
售價:NT$
299.0
《
理想城市:环境与诗性
》
售價:NT$
390.0
《
逆风翻盘 危机时代的亿万赢家 在充满危机与风险的世界里,学会与之共舞并找到致富与生存之道
》
售價:NT$
625.0
《
工业互联网导论
》
售價:NT$
445.0
《
孤独传:一种现代情感的历史
》
售價:NT$
390.0
《
家、金钱和孩子
》
售價:NT$
295.0
《
形而上学与测量
》
售價:NT$
340.0
編輯推薦:
依稀记得刚接触React 时,面对扑面而来的新鲜术语的那种困惑,就好像看见散落一地的珍珠,却不知该如何捡起串成美丽的项链一样。Azat 无疑非常擅长这项工作,他把自己在一线教授React 的课程、经验、资源以及学员的反馈重新梳理、优化、整合,按照由浅入深、由表及里的编排方式,不仅关注核心,也注重生态,同时配上丰富的实战案例和架构思想解读,为我们带来了这本学习React 不容错过的《快速上手React 编程》。相信这本书一定会为读者带来醍醐灌顶般的阅读体验,因为该书不仅仅教你如何使用React,还告诉你React 技术体系中每一项设计的原因和思考。希望读者能从中受益,享受学习和使用React 带来的快乐
內容簡介:
《快速上手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.comabout和社交媒体www.linkedin.cominazatm上了解我的更多信息。相反,我想把关于这本书的经历写下来。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中的ifelse 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简介
內容試閱 :
前言
那是2008年,银行纷纷倒闭。我在联邦存款保险公司Federal Deposit Insurance Corporation,FDIC工作,主要任务是偿还倒闭、失败和破产的银行储户。我承认,就职业安全感而言,我的工作等同于在雷曼兄弟上班或在泰坦尼克号上卖票。但是,当我所在的部门还没有开始最终的预算削减时,我还有机会开发一款名为EDIE的应用。这款应用由于一个简单的原因而变得非常流行:人们急于想知道他们的存款中有多少由美国联邦政府提供保险,而EDIE能够估算这一数额。但是存在一个问题:人们不喜欢把他们的私人账户告诉政府。为了保护他们的隐私,这款应用完全在前端完成:JavaScript、HTML和CSS,没有任何后端技术。如此,FDIC就不会收集任何个人财产信息。这款应用经历了数十次迭代,留下了一团混乱的意大利面条式代码。开发人员来去匆匆,没有留下任何文档,也没有任何符合逻辑的简单算法。这就像没有地图就要去乘坐纽约市地铁一样。有很多函数可以调用其他函数、奇怪的数据结构以及更多的函数。在现代术语中,这款应用采用纯用户界面User Interface,UI,因为没有后端。我多么希望那时能有React。React带来了愉悦。它是一种全新的思考方式,也是一种全新的开发方式。将核心功能放在一处,而不是将其分解为HTML和JS,这种简单是一种解放。它重新点燃了我对前端开发的热情。React是开发UI组件的一种新方法。它是新一代的表现层库。与模型和路由库一起配合,React可以在Web和移动技术栈中取代Angular、Backbone或Ember。这就是我写这《快速上手React编程》的原因。我从来不喜欢Angular:它太复杂和大一统了。模板引擎是特定领域的,甚至不再是JavaScript;它是另一种语言。我使用过Backbone,喜欢它的简单和DIY方式。Backbone是成熟的,它更像是你自己框架的基石,而不是一个全面的、大一统的框架。Backbone的问题是模型与视图之间不断增加的交互复杂性:多个视图更新多种模型,有的会更新其他视图,有的会触发模型上的事件。举办React在线课程http:mng.bzXgkO,以及参加各种会议和活动的个人经验已经显示,开发者渴望一种更好的开发UI的方法。大多数商业价值存在于UI,而后端负责提供商品。在海湾地区,也是我居住和工作的地方,大多数软件工程师的职位空缺是前端或一个时髦的头衔通才全栈开发者。只有少数像谷歌、亚马逊和Capital One这样的大公司,对数据科学家和后端工程师的需求依然强劲。想要确保职业安全感,或找到一份好工作,最好的方法就是成为一名多面手。要做到这一点,最快的方法是使用同构的、可扩展的、对开发者友好的库,就像前端的React搭配后端的Node.js,以防止需要处理服务器端代码。对于移动开发者来说,HTML5是两三年以前的一个肮脏词汇。Facebook放弃了HTML5应用,转而支持更高效的原生native实现。但是这种不利观点正在迅速改变。通过React Native,可以渲染移动应用:可以保留UI组件,但在不同的环境下调整它们,这是另一种支持学习React的观点。编程可以是创造性的。不要陷入乏味的任务、复杂的事情以及伪关注点分离。砍掉所有不必要的垃圾,通过React提供的简化的模块之美、基于组件的UI释放你的创造力。为同构的JavaScript引入一些Node,你将达到禅定的境界。祝你阅读愉快,并让我知道你对这《快速上手React编程》的评价,请在Amazon.comhttp:amzn.to2gPxv9Q上留言。