新書推薦:
《
定鼎中原之路:从皇太极入关到玄烨亲政
》
售價:HK$
101.2
《
财之道丛书·如何让人投资你:股权激励融资全揭秘
》
售價:HK$
101.2
《
PyTorch深度学习与计算机视觉实践
》
售價:HK$
90.9
《
新任经理 100 天实战指南
》
售價:HK$
89.7
《
日本百鬼画谱
》
售價:HK$
71.3
《
大明拐点 : 天启党争
》
售價:HK$
66.7
《
纲鉴易知录评注(布面精装 全8册)
》
售價:HK$
572.7
《
官商跃迁:中国古代政商关系简史
》
售價:HK$
101.2
編輯推薦:
《ReactJS实践入门》全面而深入地介绍了React中使用的所有重要特性、概念和语法,涵盖了编写高质量React代码所要掌握的一切内容,主要内容如下:
● 理解React所使用的JavaScript特性
● 通过分布教程学习编写第一个React应用程序
● 了解如何编写JSX代码
● 了解如何编写类和函数组件
● 了解如何使用React17 中的高级功能,包括hook、错误边界、ref和Portal
內容簡介:
”当今更流行的JavaScript库的实操指南 在《ReactJS实践入门》一书中,全栈开发者Chris Minnick使用广受欢迎的前端工具ReactJS为读者讲解基本的编程概念,教会读者如何理解React,并通过示例说明了如何应用所学知识来构建应用程序。 《ReactJS实践入门》将帮助读者学习ReactJS开发人员使用的专业术语,以及实践对于React编程新手和老手都有帮助的现代示例。《ReactJS实践入门》假定读者没有软件工程知识基础或相关经验,因此在介绍相关术语时会进行详细 阐述。 对于刚接触JavaScript和前端开发的读者,包括那些初次接触编程的读者,《ReactJS实践入门》是一个很优秀的资源,适合初出茅庐的训练营毕业生,半路出家自学成才的程序员,以及具有WordPress、Drupal或其他编程语言基础且想要学习React的开发人员。对于资深JavaScript开发人员,《ReactJS实践入门》则可作为一本简明易懂的React指南,帮助他们快速上手。 ”
關於作者:
Chris Minnick是一位多产的作家、博主、培训师、演说家和Web工程师。他创立的WatzThis?公司,一直致力于寻找更好的方法向初学者教授计算机和编程技能。
Chris拥有超过25年的全栈开发经验,他也是一名教龄超过10年的培训师,曾在世界许多大公司以及公共图书馆、工作室和研讨会上教授Web开发、ReactJS和高级JavaScript课程。
Minnick已撰写或与他人合著了十多本针对成人和儿童的技术书籍,包括Beginning HTML5 and CSS3 for Dummies、Coding with JavaScript for Dummies、JavaScript for Kids、Adventures in Coding和Writing Computer Code。
目錄 :
第1章 Hello,World! 1
1.1 在没有工具链的情况下
如何使用React 1
1.2 使用Create React App
和JSX创建交互式
“Hello,World”应用程序 6
1.3 本章小结 7
第2章 React基础 9
2.1 React名称的由来 9
2.2 UI层 10
2.3 虚拟DOM 11
2.4 React的原理 12
2.4.1 关于组件 12
2.4.2 组合与继承 13
2.4.3 React是声明式的 13
2.4.4 React是惯用语 14
2.4.5 为什么要学习React 15
2.4.6 React与其他框架的
比较 15
2.4.7 React不是什么 17
2.5 本章小结 18
第3章 JSX 21
3.1 JSX不是HTML 21
3.2 什么是JSX 26
3.2.1 JSX的工作方式 26
3.2.2 转译器 28
3.3 JSX的语法基础 29
3.3.1 JSX是JavaScript XML 29
3.3.2 避免使用保留字 30
3.3.3 JSX使用驼峰式命
名法 30
3.3.4 为DOM元素中的自定义
属性加上data-前缀 30
3.3.5 JSX布尔属性 31
3.3.6 使用花括号包含
JavaScript字面量 31
3.3.7 何时在JSX中使用
JavaScript 32
3.3.8 JSX中的条件 32
3.3.9 JSX中的表达式 34
3.3.10 在JSX中使用子
元素 35
3.3.11 React Fragment 36
3.3.12 本章小结 37
第4章 组件 39
4.1 什么是组件 39
4.2 组件和元素 40
4.2.1 组件定义元素 40
4.2.2 元素调用组件 41
4.3 内置组件 42
4.3.1 HTML元素组件 42
4.3.2 Attributes和Props 46
4.4 用户定义的组件 50
4.5 组件类型 51
4.5.1 类组件 51
4.5.2 逐步了解React类
组件 60
4.5.3 函数组件 67
4.5.4 函数组件和类组件的
区别 75
4.6 React子组件 75
4.6.1 this.props.children 75
4.6.2 Children的用法 76
4.7 组件的生命周期 79
4.7.1 挂载 79
4.7.2 更新 80
4.7.3 卸载 82
4.7.4 错误处理 82
4.7.5 提高性能并避免错误 82
4.8 渲染组件 87
4.8.1 用ReactDOM渲染 87
4.8.2 虚拟DOM 88
4.8.3 其他渲染引擎 89
4.9 组件的术语 91
4.10 本章小结 92
第5章 React DevTools 93
5.1 安装和入门 93
5.2 检查组件 95
5.2.1 使用组件树 96
5.2.2 搜索组件 97
5.2.3 筛选组件 99
5.2.4 选择组件 100
5.3 在DevTools中编辑组件
数据 101
5.4 使用额外的DevTools
功能 103
5.5 性能分析 104
5.6 本章小结 106
第6章 React数据流 107
6.1 单向数据流 107
6.1.1 理解单向数据流 108
6.1.2 为什么使用单向
数据流 109
6.2 Props 110
6.2.1 组件接收Props 110
6.2.2 Props可以是任何数据
类型 110
6.2.3 Props是只读的 111
6.2.4 使用PropType验证
传入的Props 112
6.2.5 默认Props 123
6.3 ReactState 127
6.3.1 什么是state 127
6.3.2 初始化state 127
6.3.3 state和props的区别 130
6.3.4 更新状态 130
6.3.5 状态中应包含的
内容 140
6.3.6 构建Reminders应用
程序 141
6.3.7 状态中不应包含的
内容 147
6.3.8 放置状态的位置 147
6.3.9 状态提升 148
6.3.10 关于key Prop 154
6.3.11 筛选提醒 160
6.3.12 实现isComplete
更改功能 164
6.4 转换为类组件 166
6.5 本章小结 173
第7章 事件 175
7.1 React中事件的运行
机制 175
7.2 什么是SyntheticEvent 177
7.3 使用事件侦听器属性 178
7.4 Event对象 178
7.5 支持的事件 180
7.6 事件处理函数 184
7.6.1 编写内联事件处理
程序 184
7.6.2 在函数组件中编写
事件处理程序 185
7.6.3 在类组件中编写
事件处理程序 186
7.6.4 绑定事件处理程序
函数 187
7.6.5 将数据传递给
事件处理程序 190
7.7 本章小结 191
第8章 表单 193
8.1 表单具有状态 193
8.2 受控输入与非受控输入 194
8.2.1 更新受控输入 195
8.2.2 控制函数组件中的
输入 195
8.2.3 控制类组件中的输入 196
8.3 提升输入状态 197
8.4 使用非受控输入 199
8.5 使用不同的表单元素 200
8.5.1 控制input元素 200
8.5.2 控制textarea元素 201
8.5.3 控制select元素 201
8.6 阻止默认操作 202
8.7 本章小结 203
第9章 ref 205
9.1 什么是ref 205
9.2 如何在类组件中
创建ref 206
9.3 如何在函数组件中
创建ref 206
9.4 使用ref 206
9.5 创建回调ref 208
9.6 何时应使用ref 209
9.7 何时不应使用ref 210
9.8 示例 210
9.8.1 管理焦点 210
9.8.2 自动选择文本 210
9.8.3 控制媒体播放 212
9.8.4 设置滚动位置 212
9.9 本章小结 213
第10章 样式化React 215
10.1 样式的重要性 215
10.2 将CSS导入HTML
文件 216
10.3 在组件中使用普通的旧
CSS 216
10.4 编写内联样式 218
10.4.1 JavaScript样式
语法 219
10.4.2 为什么使用内联
样式 220
10.4.3 为什么不使用内联
样式 220
10.4.4 使用样式模块改进
内联样式 220
10.5 CSS模块 221
10.5.1 命名CSS模块
文件 222
10.5.2 高级CSS模块
功能 223
10.6 CSS-IN-JS和样式化
组件 224
10.7 本章小结 226
第11章 hook介绍 227
11.1 什么是hook 227
11.2 为什么要引入hook 227
11.3 使用hook的规则 228
11.4 内置hook 229
11.4.1 使用useState管理
状态 229
11.4.2 使用useEffect链入
生命周期 233
11.4.3 使用useContext订阅
全局数据 240
11.4.4 将逻辑和状态与
useReducer相结合 241
11.4.5 使用useCallback缓存
回调函数 242
11.4.6 使用useMemo缓存
计算值 245
11.4.7 使用useRef访问
子对象 246
11.4.8 使用useImperativeHandle
自定义公开值 247
11.4.9 使用useLayoutEffect
同步更新DOM 248
11.5 编写自定义hook 248
11.6 使用UseDebugValue标记
自定义hook 250
11.7 查找并使用自定义
hook 252
11.7.1 use-http 252
11.7.2 react-fetch-hook 252
11.7.3 axios-hook 252
11.7.4 react-hook-form 253
11.7.5 @rehooks/local-
storage 253
11.7.6 use-local-storage-
state 254
11.7.7 其他有趣的hook 254
11.7.8 hook列表 254
11.8 本章小结 254
第12章 路由 257
12.1 什么是路由 257
12.2 React中路由的用法 259
12.3 使用React Router 260
12.3.1 安装并导入
react-router-dom 260
12.3.2 路由器组件 261
12.3.3 链接到路由 263
12.3.4 创建路由 268
12.3.5 location、history和
match对象 274
12.4 React Router hook 280
12.4.1 useHistory 281
12.4.2 useLocation 281
12.4.3 useParams 281
12.4.4 useRouteMatch 281
12.5 本章小结 281
第13章 错误边界 283
13.1 锦囊妙计 283
13.2 什么是错误边界 284
13.3 实现错误边界 286
13.3.1 构建自己的
ErrorBoundary组件 286
13.3.2 安装预先构建的
ErrorBoundary组件 295
13.4 错误边界无法捕获的
错误 296
13.4.1 使用try/catch捕获
错误边界中的错误 296
13.4.2 使用react-error-boundary
捕获事件处理程序中的
错误 297
13.5 本章小结 298
第14章 部署React 299
14.1 什么是部署 299
14.2 构建应用程序 299
14.2.1 运行build脚本 300
14.2.2 检查build目录 300
14.2.3 filenames的由来 302
14.3 部署的应用程序有何
不同 303
14.4 开发模式与生产模式 303
14.5 发布到Web上 304
14.5.1 Web服务器托管 304
14.5.2 节点托管 304
14.5.3 使用Netlify进行
部署 305
14.6 本章小结 308
第15章 从头开始初始化React
项目 309
15.1 构建自己的工具链 309
15.1.1 初始化项目 310
15.1.2 HTML文档 310
15.1.3 主JavaScript文件 311
15.1.4 根组件 311
15.1.5 在浏览器中运行 312
15.2 Webpack的工作原理 315
15.2.1 加载器 315
15.2.2 插件 315
15.3 自动化构建过程 316
15.3.1 制作HTML模板 316
15.3.2 开发服务器和热
重载 317
15.3.3 测试工具 317
15.3.4 创建npm脚本 321
15.4 构建源目录 322
15.4.1 按文件类型分组 322
15.4.2 按功能分组 323
15.5 本章小结 323
第16章 获取和缓存数据 325
16.1 异步代码:与时间
有关 325
16.2 JavaScript永不休眠 326
16.3 在React中如何运行异步
代码 329
16.4 获取数据的方法 331
16.5 使用Fetch获取数据 332
16.6 使用axios获取数据 332
16.7 使用Web Storage 334
16.7.1 Web Storage的两个
属性 334
16.7.2 何时使用
Web Storage 335
16.7.3 何时不使用
Web Storage 335
16.7.4 Web Storage是
同步的 335
16.7.5 使用localStorage的
示例 336
16.7.6 使用localStorage
存储数据 336
16.7.7 从localStorage
读取数据 337
16.7.8 从localStorage中
删除数据 339
16.8 本章小结 339
第17章 Context API 341
17.1 什么是prop drilling 341
17.2 Context API如何解决
问题 342
17.2.1 创建Context 342
17.2.2 创建Provider 343
17.2.3 使用Context 343
17.3 Context的常见用例 345
17.4 不适用Context的情况 345
17.5 合成模式作为Context的
替代方案 346
17.6 示例应用程序:用户偏好
设置 349
17.7 本章小结 351
第18章 React Portal 353
18.1 什么是Portal 353
18.1.1 如何创建Portal 353
18.1.2 为什么不直接渲染
多个组件树 356
18.2 常见用例 357
18.2.1 模态对话框的渲染与
交互 357
18.2.2 使用模态管理键盘
焦点 362
18.3 本章小结 363
第19章 React中的无障碍性 365
19.1 为什么无障碍性
很重要 365
19.2 无障碍性基础 366
19.2.1 Web内容无障碍性
指南(WCAG) 366
19.2.2 Web无障碍计划-无障碍
富互联网应用程序
(WAI-ARIA) 367
19.3 在React组件中实现无障
碍性 367
19.3.1 React中的ARIA
属性 367
19.3.2 语义化的HTML 368
19.3.3 表单无障碍性 369
19.3.4 React中的焦点
控制 369
19.3.5 React中的媒体
查询 371
19.4 本章小结 373
第20章 高级主题 375
20.1 测试 375
20.1.1 Mocha 376
20.1.2 Enzyme 376
20.1.3 Chai 377
20.2 服务器端渲染 379
20.2.1 Flux 380
20.2.2 Redux 380
20.2.3 GraphQL 382
20.2.4 Apollo 383
20.2.5 React Native 383
20.2.6 Next.js 384
20.2.7 Gatsby 384
20.3 需要关注的人 384
20.4 有用的链接和资源 385
20.5 本章小结 385
內容試閱 :
自2013年由Facebook创建以来,ReactJS已成为网络上最受欢迎和广泛使用的前端用户界面库之一。随着2015年推出React Native,ReactJS也已成为移动应用开发中使用最广泛的库之一。
ReactJS一直在不断发展。多年来它经历了几次重大变化,但自始至终,React的核心原则都保持不变。
如果你想学习如何使用最新的语法和工具来开发下一代跨平台的Web和移动应用,那么本书非常适合。书中汇总了我从网络和书本上搜集整理出来的各种开发经验,目的是避免你因无休止的试错而耗费大量的时间和精力。
无论你是作为一名移动开发者、Web开发者还是其他任何类型的软件开发者来学习React,本书都适合你。如果你有早期使用ReactJS(约为版本16之前)的经验,本书也适合你!
在本书中,我不仅尝试提供了开发ReactJS应用程序所需的最新语法和模式,还介绍了足够多的背景知识和原理机制,以使其在未来几年仍然可用。
所以,欢迎使用ReactJS。
为什么选择本书
感谢你选择和我一起开始或继续你的React之旅。我写本书的初衷是为React及其生态系统提供最新和全面的解释,以及实际操作的代码,使你能够在现实世界中快速有效地使用React。
我很高兴能在这个时候撰写本书,原因有以下几点:
1. 我有足够的经验和知识来做好这件事。
2. React是当今最流行的JavaScript库之一。
3. 我相信React在未来会更受欢迎。
4. 针对如何使用React进行编程,现有的在线资源和书籍提供的信息往往不完整并已过时。
下面快速了解一下这些要点,首先介绍我是谁,以及为何要写这本关于React的书。
关于我
我从1997年开始从事网页开发工作,从1998年开始使用JavaScript编程。多年来,我为一些全球最大的公司构建或管理Web应用程序。作为一名Web开发人员、作家和教师,我必须学习和使用多种语言和JavaScript框架。理论学习和实践应用是有区别的,到目前为止,我已使用React开发了多个项目并从事React咨询工作多年。
自2000年以来,我一直在线或面对面地教授Web开发和JavaScript,自2015年以来,我一直在教授React。在教授React的这几年里,我专门为面对面授课而设计制作了三门为期一周的课程,还有许多短视频课程和两门更长的视频课程。我在三大洲教授过React,我的学生中有Web开发人员、Java和C程序员、COBOL程序员、数据库管理员、网络管理员、项目经理、平面设计师和大学生。
就在我写本书时,全球COVID-19的大流行已严重影响了面授培训行业。这种情况下让我有更多的时间在家陪宠物,也让我有时间深入研究React并构思了这本React教材。在写本书之前,我查阅了所有关于React的畅销书籍,了解了React的使用现状以及React未来可能的发展趋势。
React很受欢迎
React是一个JavaScript库,源自Facebook需要创建可扩展和快速用户界面的需求。自从Facebook将其作为开源项目发布以来,它一直是构建动态网页和移动应用最广泛使用的方法之一。
JavaScript开发人员中流行的一个游戏是想出一个名词,为其添加“.js”后缀之后,再搜索GitHub,找到同名的JavaScript框架。如今新的JavaScript框架和库层出不穷,其中一些只是昙花一现,而React是自2010年发布以来被开发人员广泛使用的三个库之一,它将在未来很长一段时间内得到支持和推广。
React既进步又保守
React之所以能够坚持这么久并收获如此多的用户,是因为它始终是一个前瞻性的框架,能够灵活更新以适应JavaScript中的新特性、用户界面的新编写方法以及来自开发人员的反馈。多年来,在编写React应用程序的基本单元(组件)方面,React经历了几次重大改动。但是,在所有这些改动中,React始终坚持着一个核心范式,并且React的每次重大改动都与之前版本兼容。
不要盲信互联网
尽管所有这些改动的最终结果是,这些年来React变得更容易编写、更健壮,但互联网和书籍中往往提供的是一堆过时且通常有误的示例代码和教程。如果你在购买本书之前深入研究过React,你肯定注意到了这一点,并可能会为此感到困惑。也许在阅读本书前,你有过一段在网上学习React的沮丧经历,通过对比可以发现网上的在线教程只介绍了React的旧版本。
本书全面而又深入地介绍了React中使用的所有最重要(以及一些不太重要的)特性、概念和语法。
本书内容
本书涵盖了编写高质量React代码要掌握的一切内容。你将学习使用函数方法和类方法编写React组件;学习如何使用几种不同的方法来管理应用程序的状态,包括使用React Hooks和setState方法;学习如何将组件合在一起来创建完整的动态用户界面;还将学习如何从外部数据源获取数据并在应用程序中使用。此外,本书介绍了如何在用户的Web浏览器中存储数据,以提高应用程序的性能和可用性。谈到可用性,你将会了解在移动设备和桌面上运行应用程序的最佳实践,还将了解如何确保应用程序可访问。
因为React利用了许多对底层JavaScript语言的最新且最好的改进和增强,所以本书将为你提供JavaScript教程。一些新的JavaScript语法可能会让初学者感到困惑,但我将提供大量简单和真实的示例来解释每种新的语法或快捷方式。
本书读者对象
尽管React是一个JavaScript库,但本书并不适合JavaScript或Web编程新手。我希望你至少有一些使用JavaScript的经验。如果你不熟悉JavaScript的最新添加和修订,那没有问题。但如果你是JavaScript或编程新手,我建议你在使用React之前先学习JavaScript编程的基础知识。
同样,这不是一本网页设计的书。本书假定你熟悉HTML和CSS,并且能轻松地使用这两种语言。我还假设你对Web浏览器的工作方式以及网页在浏览器中的渲染方式有基本的了解。
最后,本书旨在向任何希望掌握React应用程序编写技能的人传授React的基础知识。尽管它确实涵盖React开发中许多最常用的模式和约定,也涵盖React中许多更高级的主题,但仍有许多主题仅会简单提及,或者由于篇幅的原因不得不省略。如果要介绍所有与更高级React开发相关的内容,我们需要几本书的篇幅,并且每隔几个月就需要更新一次。
一旦你理解了本书中讲授的React基本原理,就有能力去探索广阔的React在线生态系统,并找到适合的教程、文档和示例代码来继续学习React。
超出本书范围的一些更高级的主题包括单元测试,以及使用React Native、Redux和同构/通用React来构建移动应用。如果这些内容听起来毫无概念,那么你来对地方了!到本书末尾,你可能还不知道如何实现所有这些更高级的功能,但你肯定会知道它们的概念,以及如何开始使用它们。
编程的先决条件
React编程就像在瑞典家具店组装一件复杂的家具。有很多部分单独来说没有太大意义,但当你按照说明并以正确的方式将它们组合在一起时,整体的简约和完美可能会令你惊讶。
互联网连接与计算机
我假定你有一台配置足够高的台式机或笔记本电脑并能连接到互联网。在平板电脑或智能手机上编写代码是可能的,但可行性不强。本书的示例和截图在台式机或笔记本电脑上均可用,但不保证示例代码能在更小的设备上运行。此外,一些用于构建React应用程序的工具根本无法在智能手机或平板电脑上运行。
Web开发基础知识
如前所述,在开始学习React之前,了解HTML、CSS和JavaScript是必不可少的。如果你的经验主要是复制和粘贴别人编写的代码,但乐意对代码进行更改以及通过查阅资料来解决疑问,那么你会喜欢本书。
代码编辑器
你需要一个代码编辑器。我目前使用并推荐的是Microsoft Visual Studio Code。它可以在macOS、Linux和Windows上免费使用。如果你愿意使用其他代码编辑器,当然也可以。这些年来,我使用过许多不同的代码编辑器,我相信无论开发人员选择使用哪种代码编辑器,只要它最有效,就都是正确的选择。
浏览器
你还需要一个主流的Web浏览器。尽管Mozilla Firefox、Google Chrome和Windows Edge都可以满足我们的需求,但本书中的截图都是基于macOS上的Google Chrome。请按个人喜好随意使用三种主流浏览器中的任一种,但是请理解你的体验可能与书中的截图略有不同,并且某些React开发者工具目前仅适用于Chrome和Firefox。
安装所需的依赖项
虽然只需要一个文本编辑器和一个Web浏览器就可以在连接到互联网的计算机上编写并运行React应用程序,但是如果想要构建任何部署到公共Web上的应用程序,则需要在计算机上安装一些额外的软件包。当这些软件包组合在一起时,就是Web开发人员所说的工具链。
React工具链中的所有工具都是免费的、开源的,易于下载和安装。接下来,我将逐步引导你安装并配置工具链,并展示使用新工具的一些操作,以现代、标准和专业的方式帮助你高效地构建、编译和部署React应用程序。
Visual Studio Code简介
在我超过25年的Web开发职业生涯中,我用过许多不同的代码编辑器,但仍会根据项目或编写的代码类型不时地更换代码编辑器。
然而,似乎总有一种“流行”的代码编辑器是大多数Web开发人员都使用的。在过去的几年中,最受欢迎的编辑器已变换了几次,但在撰写本书时,最广泛用于编写前端Web代码的代码编辑器似乎是微软的Visual Studio Code(简称VS Code),如图0-1所示。
图0-1 VS Code
Visual Studio Code是免费和开源的,可用于Windows、Linux和macOS。它提供了对React开发的内置支持,并且已开发了许多插件,这些插件有助于编写和调试React项目。
出于这些原因,我将在本书中使用最新版本的 Visual Studio Code,并且某些地方的屏幕截图和分步说明可能仅适用于Visual Studio Code。如果你选择使用不同的代码编辑器,请注意需要将一些特定的指令转换到所处的开发环境中。