JavaScript全栈开发实战

本书详细说明了如何创建一个能适应各种平台的CRUD风格的应用。本书主要内容有：了解GraphQL查询数据的简单流程。学习API、Web应用和原生应用验证身份的共同方式。使用React和Styled Components构建高性能的Web应用。使用React Native编写可编译为原生代码的iOS和Android跨平台应用。学习使用Electron编写桌面应用。

Adam D. Scott生活在美国康涅狄格州，是一名工程经理、Web开发者和教育工作者。他目前在美国消费者金融保护局担任Web开发主管，与才华横溢的团队一起专注于构建开源Web应用。他从事教育工作已经十多年，经历了很多技术变革。他教授和编写了一系列技术课程。

JavaScript是一门小型编程语言，但它能做到的事可不少。JavaScript曾经主要用于增加Web浏览器窗口的交互性，现在已经发展成构建强大而健壮的应用的重要工具。这是一本从实际出发的书，适合新手和有经验的JavaScript开发人员阅读，学习如何使用JavaScript语言创建API，以及Web、移动和桌面应用。

本书作者Adam D. Scott是一名工程主管，他将带领你学习Node.js、GraphQL、React、React Native和Electron等技术。本书非常适合想要构建全栈应用的开发人员，以及志向高远、想自创公司的Web开发初学者阅读。本书详细说明了如何创建一个能适应各种平台的CRUD风格的应用。本书主要内容有：了解GraphQL查询数据的简单流程。学习API、Web应用和原生应用验证身份的共同方式。使用React和Styled Components构建高性能的Web应用。使用React Native编写可编译为原生代码的iOS和Android跨平台应用。学习使用Electron编写桌面应用。

前言
笔者开发完第一个 Electron 桌面应用后萌生了撰写这本书的想法。使用 Web技术构建跨平台应用成为可能，这让从事 Web 开发工作的笔者深感震撼。同一时期，React、React Native 和 GraphQL 开始迅速发展。笔者四处寻找资源，想系统学习这些技术，可是总找不到合适的。而这本书就是笔者当时希望能读到的指南。
本书的最终目标是介绍如何使用一门编程语言（即 JavaScript）去构建各种各样的应用。
目标读者
本书面向具有一定 HTML、CSS 和 JavaScript 经验的中级开发人员，或者是希望学习开展业务或业余项目所需工具的初学者。
内容编排
本书指导你开发一个可在不同平台上运行的示例应用。整书内容分为以下几部分：
?? 第 1 章指导你搭建 JavaScript 开发环境。
?? 第 2~10 章介绍使用 Node、Express、MongoDB 和 Apollo Server 构建一个 API。
?? 第 11~25 章说明使用 React、Apollo 和其他工具构建跨平台的用户界面。具体而言：
— 第 11 章介绍用户界面开发和 React。
— 第12~17 章说明如何使用 React、Apollo Client 和 CSS-in-JS 构建 Web应用。
— 第18~20 章指导你构建简单的 Electron 应用。
— 第21~25 章介绍使用 React Native 和 Expo 为 iOS 和 Android 构建移动应用。
排版约定
本书采用下述排版约定。
斜体
表示新术语、URL、电子邮件地址、文件名和扩展名。
等宽字体（Constant Width）
表示程序清单，在段落中出现则表示程序元素，例如变量、函数名、数据库、数据类型、环境变量、语句和关键字。
粗体等宽字体（Constant width bold）
表示命令或者应由用户原样输入的文本。
斜体等宽字体（Constant Width Italic）
表示应该替换成用户提供的值，或者由上下文决定的值。
使用代码示例
本书的补充材料（ 代码示例、练习题等） 可到 https://github.com/javascripteverywhere 下载。
如果你有技术问题， 或者在使用代码示例上有疑问， 请发电子邮件到[email protected]。
本书是要帮你完成工作的。一般来说，如果本书提供了示例代码，你可以把它用在你的程序或文档中。除非你使用了很大一部分代码，否则无需联系我们获得许可。比如，用本书的几个代码片段写一个程序就无需获得许可，销售或分发 O’Reilly 图书的示例光盘则需要获得许可；引用本书中的示例代码回答问题无需获得许可，将书中大量的代码放到你的产品文档中则需要获得许可。
我们很希望但并不强制要求你在引用本书内容时加上引用说明。引用说明一般包括书名、作者、出版社和 ISBN。比如：“JavaScript Everywhere by Adam D. Scott (O’Reilly). Copyright 2020 Adam D. Scott, 978-1-492-04698-1”。如果你觉得自己对示例代码的用法超出了上述许可的范围， 请通过[email protected] 与我们联系。
O’Reilly 在线学习平台（O’Reilly Online Learning）
近40 年来，O’Reilly Media 致力于提供技术和商业
培训、知识和卓越见解，来帮助众多公司取得成功。
我们拥有独一无二的专家和革新者组成的庞大网络，他们通过图书、文章、会议和我们的在线学习平台分享他们的知识和经验。O’Reilly 的在线学习平台允许你按需访问现场培训课程、深入的学习路径、交互式编程环境，以及O’Reilly 和200 多家其他出版商提供的大量文本和视频资源。有关的更多信息，请访问http://oreilly.com。
联系我们
请把对本书的评价和问题发给出版社。
美国：
O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
中国：
北京市西城区西直门南大街2号成铭大厦C座807室（100035）
奥莱利技术咨询（北京）有限公司
本书的勘误、示例和其他信息可到 https://oreil.ly/javascript-everywhere 上获取。
对本书的评论或技术疑问，可以发电子邮件到 [email protected]。
欲了解本社图书、课程、会议和新闻等更多信息，请访问我们的网站 http://www.oreilly.com。
我们的 Facebook：http://facebook.com/oreilly。
我们的 Twitter：http://twitter.com/oreillymedia。
我们的 YouTube：http://www.youtube.com/oreillymedia。
致谢
感谢 O’Reilly 公司过去和现在所有优秀的人，他们多年来一直欢迎我说出自己的想法，对不同的观点包容开放。我要特别感谢编辑 Angela Rufino，她给我反馈、鼓励和许多善意的提醒。我还要感谢 Mike Loukides，他为我提供了咖啡因，与我促膝长谈。最后，感谢 Jennifer Pollock 的支持和鼓励。
由衷感谢开源社区，我学到了很多东西并从中受益。如果没有创建和维护众多库的个人和组织，这本书是不可能问世的。
得益于几位技术审校的帮助，这本书才能以更好的面貌呈现在你面前，才能保证内容准确无误。感谢 Andy Ngom、Brian Sletten、Maximiliano Firtman和 Zeeshan Chawdhary。这次代码审查任务非常繁重，衷心感谢他们所做的努力。特别感谢我的老同事兼朋友 Jimmy Wilson，我在本书付梓之前最后一刻打电话给他，让他再审查一遍，给我提供反馈。这是很高的要求，但就像他所做的每一件事一样，他满怀热情地应允了。没有他的帮助，这本书不可能像现在这么好。
成年后，我非常幸运，与一群聪明、热情、支持我的同事相处。我和他们在一起的时间里学到了很多大大小小的经验，有技术方面的，也有非技术方面的。人员太多，无法一一列出，这里特别向 Elizabeth Bond、John Paul Doguin、Marc Esher、Jenn Lassiter 和 Jessica Schafer 表示敬意。
写作时，音乐一直陪伴着我，没有 Chuck Johnson、Mary Lattimore、Makaya McCraven、G.S.Schray、Sam Wilkes、Hiroshi Yoshimura 等人的美妙声线，我不可能写出这本书。
最后，感谢我的妻子 Abbey，感谢我的孩子 Riley、Harrison 和 Harlow，为了写这本书，我牺牲了很多陪伴他们的时间。 谢谢你们在我深居办公室奋笔疾书时体谅我，有时我身不在但心在。你们四个是我做每件事的动力。

目录
序 .1
前言 .3
第 1 章 开发环境 9
1.1 文本编辑器 . 10
1.2 终端 10
1.2.1 使用专门的终端应用 10
1.2.2 使用 VSCode 11
1.2.3 在文件系统中变换位置 11
1.3 命令行工具和Homebrew（仅适用Mac 用户） 12
1.4 Node.js 和 NPM 12
1.4.1 在 macOS 中安装 Node.js 和 NPM 13
1.4.2 在 Windows 中安装 Node.js 和 NPM 13
1.5 MongoDB 14
1.5.1 在 macOS 中安装和运行 MongoDB . 14
1.5.2 在 Windows 中安装和运行 MongoDB . 15
1.6 Git 16
1.7 Expo 16
1.8 Prettier 17
1.9 ESLint 17
1.10 美化 . 18
1.11 小结 . 18
第 2 章 API 简介 19
2.1 构建什么 19
2.2 如何构建 20
2.3 开始动手 21
2.4 小结 22
第 3 章 使用Node 和Express 开发Web 应用 23
3.1 Hello World . 23
3.2 Nodemon 24
3.3 扩展端口选项 26
3.4 小结 27
第 4 章 首个 GraphQL API 28
4.1 把服务器（初步）改造成 API 28
4.2 GraphQL 基础知识 . 33
4.2.1 模式 33
4.2.2 解析器 . 34
4.3 改造 API 35
4.4 小结 43
第 5 章 数据库 44
5.1 MongoDB 入门 . 45
5.2 在应用中连接 MongoDB . 47
5.3 在应用中读写数据 51
5.4 小结 59
第 6 章 CRUD 操作 60
6.1 分离 GraphQL 模式和解析器 60
6.2 编写 GraphQL CRUD 模式 . 64
6.3 CRUD 解析器 65
6.4 日期和时间 . 67
6.5 小结 70
第 7 章 用户账户和身份验证 71
7.1 应用身份验证流程 71
7.2 加密和令牌 . 73
7.2.1 加密密码. 73
7.2.2 JSON Web Tokens 74
7.3 在 API 中集成身份验证功能 . 75
7.3.1 User 模式 76
7.3.2 身份验证解析器 . 78
7.4 把用户添加到解析器上下文中 . 82
7.5 小结 85
第 8 章 用户操作 .86
8.1 准备工作 86
8.2 新建笔记时指定用户 . 87
8.3 用户的更新和删除权限 89
8.4 用户查询 91
8.5 收藏笔记 94
8.6 嵌套查询 99
8.7 小结 . 102
第 9 章 细节优化 103
9.1 Web 应用和 Express.js 最佳实践 103
9.1.1 Express Helmet . 103
9.1.2 跨域资源共享 104
9.2 分页 . 105
9.3 数据限制 107
9.4 其他事项 109
9.4.1 测试 109
9.4.2 订阅 109
9.4.3 Apollo GraphQL Platform 109
9.5 小结 . 110
第 10 章 部署 API . 111
10.1 托管数据库 112
10.2 部署应用 . 118
10.2.1 项目设置 118
10.2.2 部署 . 120
10.2.3 测试 . 120
10.3 小结 121
第 11 章 用户界面和 React 122
11.1 JavaScript 和 UI 123
11.2 JavaScript 声明式界面 . 124
11.3 React 入门 124
11.4 小结 130
第 12 章 使用React 构建Web 客户端 . 131
12.1 构建什么 . 131
12.2 如何构建 . 132
12.3 开始动手 . 133
12.4 构建 Web 应用 . 134
12.5 路由 136
12.6 UI 组件 141
12.7 小结 144
第 13 章 装饰应用 145
13.1 创建布局组件 145
13.2 CSS 148
13.2.1 CSS-in-JS 149
13.2.2 创建一个按钮组件 150
13.2.3 添加全局样式 . 152
13.2.4 组件样式 154
13.3 小结 158
第 14 章 使用 Apollo Client 159
14.1 设置 Apollo Client . 160
14.2 查询 API . 162
14.3 动态查询 . 173
14.4 分页 177
14.5 小结 179
第 15 章 Web 身份验证和状态管理 180
15.1 创建注册表单 180
15.1.1 React 表单和状态 . 184
15.1.2 signUp 变更操作 186
15.1.3 JSON Web Token 和本地存储器 189
15.2 重定向 . 190
15.3 为请求附加首部 190
15.4 本地状态管理 191
15.5 退出 195
15.6 创建登录表单 198
15.7 受保护的路由 203
15.8 小结 205
第 16 章 创建、读取、更新和删除操作 207
16.1 新建笔记 . 207
16.2 读取用户的笔记 214
16.3 更新笔记 . 218
16.4 删除笔记 . 226
16.5 收藏笔记 . 228
16.6 小结 232
第 17 章 部署Web 应用 . 233
17.1 静态网站 . 233
17.2 我们的部署流水线 . 235
17.2.1 使用 Git 托管源码 235
17.2.2 使用 Netlify 部署 237
17.3 小结 239
第 18 章 使用Electron 开发桌面应用 240
18.1 构建什么 . 240
18.2 如何构建 . 241
18.3 开始动手 . 241
18.4 首个 Electron 应用 . 242
18.5 特别处理 macOS 应用窗口 244
18.6 开发者工具 245
18.7 Electron API 246
18.8 小结 247
第 19 章 使用Electron 集成现有的Web 应用 248
19.1 集成 Web 应用 . 248
19.2 配置 251
19.3 内容安全策略 252
19.4 小结 255
第 20 章 部署Electron 应用 . 256
20.1 Electron Builder 256
20.2 针对当前平台构建 . 258
20.3 应用图标 . 259
20.4 针对多个平台构建 . 260
20.5 代码签名 . 260
20.6 小结 261
第 21 章 使用React Native 开发移动应用 . 262
21.1 构建什么 . 263
21.2 如何构建 . 263
21.3 开始动手 . 264
21.4 小结 268
第 22 章 移动应用shell . 269
22.1 React Native 构件 269
22.2 样式和 Styled Components 271
22.3 路由 275
22.3.1 使用 React Navigation 实现标签页路由 276
22.3.2 堆叠导航 279
22.3.3 添加界面标题 . 284
22.4 图标 285
22.5 小结 287
第 23 章 GraphQL 和React Native 288
23.1 创建列表和滚动内容视图 289
23.2 使用 Apollo Client 操作 GraphQL . 297
23.3 添加加载中指示符 . 304
23.4 小结 306
第 24 章 移动应用身份验证 307
24.1 身份验证路由流程 . 307
24.2 创建登录表单 317
24.3 通过 GraphQL 变更操作验证身份 . 322
24.4 带身份验证信息的 GraphQL 查询 . 324
24.5 添加注册表单 329
24.6 小结 335
第 25 章 分发移动应用 337
25.1 配置 app.json 337
25.2 图标和应用加载界面 340
25.2.1 应用图标 340
25.2.2 启动画面 341
25.3 发布到 Expo 中 342
25.4 创建原生构建包 343
25.4.1 iOS 344
25.4.2 Android 345
25.5 分发到应用商店中 . 346
25.6 小结 346
后记 347
附录A 在本地运行 API 349
附录B 在本地运行Web 应用 . 351
作者介绍 353
封面介绍 353