关于javascript:翻译-JavaScript-Everywhere第1章-开发环境

目录

前言

第 1 章 咱们的开发环境

第 2 章 API 简介

第 3 章 具备 Node 和 Express 的 Web 应用程序

第 4 章 咱们的第一个 GraphQL API

第 5 章 数据库

第 6 章 CRUD 操作

第 7 章 用户帐户和身份验证

第 8 章 用户操作

第 9 章 详细信息

第 10 章 部署咱们的 API

第 11 章 用户界面和 React

第 12 章 应用 React 构建 Web 客户端

第 13 章 设置应用程序款式

第 14 章 应用 Apollo Client

第 15 章 Web 身份验证和状态

第 16 章 创立，读取，更新和删除操作

第 17 章 部署 Web 应用程序

第 18 章 带 Electron 的桌面应用程序

第 19 章 将现有的 Web 应用程序与 Electron 集成

第 20 章 Electron 部署

第 21 章 应用 React Native 创立挪动应用程序

第 22 章 挪动应用程序 shell

第 23 章 GraphQL 和 React Native

第 24 章 挪动应用程序认证

第 25 章 挪动应用程序公布

后记

附录 A. 在本地运行 API

附录 B. 在本地运行 Web App

为无处不在的 JavaScript 赞美

JavaScript Everywhere 是一本令人难以置信的书，它将为你提供在任何平台上应用 JavaScript 构建应用程序所需的所有。

题目是事实：JavaScript 无处不在，并且本书做出了独特的壮举，就是在本文中为所有级别的开发人员写了所有的内容。

浏览本书，而后编写代码，并自信地做出技术决策。

Eve Porcello，Moon Highway 的软件开发人员和讲师

JavaScript Everywhere 是疏导一直变动的古代 JavaScript 生态系统的完满搭档。Adam 以清晰易懂的形式传授 React，React Native 和 GraphQL，以便你能够构建强壮的 Web、挪动和桌面应用程序。

Apollo GraphQL 的工程经理 Peggy Rayzis

奉献精神

对于我父亲来说，他们既带回了我的第一台被黑客入侵的计算机，又对我写的每篇论文进行了校对。没有你，我不会在这里。惦记你。

序言

1997 年，我在读初中。

我和我的一个敌人在在学校图书馆中的联网计算机上忙时，他向我展现了：你能够单击 View→源代码来查看网页的代码，

几天后，另一个敌人向我展现了如何公布本人的 HTML。我的想法被点燃了。

在那之后，我迷上了。

我到处浏览本人喜爱的网站，以构建本人的 Franken 网站。

我的大部分闲暇工夫都在家里饭厅中花在了组装电脑上，我甚至“编写”（好吧，是复制和粘贴）我的第一个 JavaScript，实现在链接上实现悬停款式，而这对于简略的 CSS 而言尚不可行。

我过来感觉本人是个书呆子，然而，产生了事件的转折，就像是有益健康的电影《Almost Famous》，在我本人的音乐网站上，我失去了相当的好评。

因而，我收到了邮件中的促销 CD，并被安顿在音乐会的嘉宾名单上。然而，对我而言，更重要的是，我正在与世界各地的其他人分享我的趣味。

我只是一个无聊的市区少年，酷爱音乐，然而可能接触到我从未见过的人。那已经是，当初依然是这样的激励。

明天，咱们能够仅应用 Web 技术来构建功能强大的应用程序，但入门可能会令人生畏。

APIs 是提供数据的不可见的背景。

View 视图→Source 源代码 显示链接和压缩的代码。

身份验证和安全性令人蛊惑。将所有这些货色放在一起可能是让人产生压倒性压力的。

如果咱们可能越过这些令人困惑的细节，咱们可能会留神到，我过来 20 年前应用的一些技术，当初能够被用于构建功能强大的 Web 应用程序、原生代码移动用程序，创立功能强大的桌面应用程序，设计 3D 动画，甚至是程序机器人。

作为一名教育者，我发现咱们大部分人学习一个新事物，最好的形式是，合成他们，而后使用它们在咱们理论利用案例中。这就是本书的指标。

如果你理解一些 HTML，CSS 和 JavaScript，但不确定如何应用这些内容来并构建你梦寐以求的弱小应用程序，那么这本书就适宜你。

我将全程疏导你构建 Web 应用程序、挪动应用程序和桌面应用程序的用户界面提供能源的 API。最重要的是，你将理解所有这些局部如何组合在一起，以便能够构建和发明美妙的事物。

我等不及要看你做了什么。

————Adam

前言

写完我的第一个电子桌面应用程序后，我产生了写这本书的想法。

作为一名 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，电子邮件地址，文件名和文件扩展名。

• 宽体

  用于程序清单，以及在段落中用于援用程序元素，例如变量或函数名称，数据库，数据类型，环境变量，语句和关键字。

• 粗体

  显示应由用户间接输出的命令或其余文本。

• 斜体

  显示应由用户提供的值或由上下文确定的值替换的文本。

TIP 倡议

该元素示意提醒或倡议。

留神

此元素示意个别正文。

正告

此元素示意正告或留神。

应用代码示例

补充资料（代码示例，练习等）可从以下网站下载：https://github.com/javascript…。

如果你在应用代码示例时遇到技术问题或疑难，请发送电子邮件至 bookquestions@oreilly.com。

这本书能够帮忙你实现工作。

通常，如果本书提供了示例代码，则能够在程序和文档中应用它。除非你要复制大部分代码，否则无需与咱们分割以获取许可。例如，编写应用本书中若干代码段的程序无需许可。发售或散发 O ’Reilly 书籍中的示例的确须要取得许可。援用本书并援用示例代码来答复问题无需许可。的确须要将本书中的大量示例代码合并到产品的文档中。

咱们感激，但通常不须要申请。出处通常包含题目，作者，出版者和 ISBN。例如：Adam D. Scott（O’Reilly）的“JavaScript Everywhere”。版权 2020 Adam D.Scott，978-1-492-04698-1。”

如果你认为应用代码示例超出正当应用范畴或取得上述容许，请随时与咱们分割 Permissions@oreilly.com。

第 1 章咱们的开发环境

约翰 - 伍德是 UCLA 女子篮球队的已故教练，是有史以来最胜利的教练之一，在 12 年内博得了 10 项全国冠军。

他的团队由顶尖的新兵组成，包含名人堂球员，如卢·阿尔辛多（Kewem Abdul-Jabbar）和比尔·沃尔顿（Bill Walton）。练习的第一天，伍登让他所有的新兵坐下，他们是美国高中最好的球员，并教他们正确的穿袜子。

当被问到这个，伍登说：“细节决定了事件的重大倒退。”

厨师应用“mise en place”一词来 示意“各就各位”，来形容烹饪前筹备菜单所需工具和配料的做法。

因为曾经思考到了小细节，所以这种筹备工作使厨房的厨师可能在忙碌的繁忙期间胜利筹备饭菜。就像 Coach Wooden 的球员和厨师筹备晚饭一样，值得花工夫建设咱们的开发环境。

有用的开发环境不须要低廉的软件或顶级硬件。

实际上，我激励你从简略开始，应用开源软件，并且倒退你的工具。只管跑步者更喜爱特定品牌的运动鞋，而木匠可能始终喜爱上她最喜爱的锤子，然而要花些工夫和教训来确定这些偏好。试用工具，察看其余工具，随着工夫的流逝，你将创立最适宜你本人的环境。

在本章中，咱们将装置文本编辑器，Node.js，Git，MongoDB 和一些有用的 JavaScript 包，并找到咱们的终端应用程序。你可能曾经领有了一个适宜你的开发环境，然而，咱们还将装置将在整本书中应用的一些必须工具。如果你像我一样，通常跳过阐明手册，我依然心愿你通读本指南。

任何时候如果你发现自己有纳闷，请与 JavaScript Everywhere 的社区交换，通过咱们的论坛渠道 spectrum.chat/jseverywhere。

你的文本编辑器

文本编辑器很像衣服。咱们所有人都须要它们，然而咱们的偏好可能会千差万别。有些人喜爱简略和构造便捷。有些人喜爱富丽的佩斯利模式。没有谬误的决定，你应该应用最舒服的形式。

如果你还没有偏好，我强烈建议 Visual Studio 代码（VSCode）。这是一个凋谢源代码的编辑器，可用于 Mac，Windows 和 Linux。此外，它提供了内置性能来简化开发，并且能够通过社区扩大轻松进行批改。它甚至是应用 JavaScript 构建的！

终端

如果你应用的是 VSCode，它带有集成终端。对于大多数开发工作，这可能就是你所须要的。就集体而言，我发现最好应用专用的终端客户端，因为这样能够更轻松地治理多个选项卡并在计算机上应用更多的专用窗口空间。我倡议你同时尝试这两种办法，而后找出最适宜你的办法。

应用专用终端应用程序

所有操作系统都带有内置的终端应用程序，这是上手的好中央。在 macOS 上，它失当地称为终端。在 Windows 操作系统（从 Windows 7 开始）上，该程序为 PowerShell。Linux 发行版的终端名称可能有所不同，但通常包含“Terminal”。

应用 VSCode

要应用 VSCode 拜访终端，请单击终端→新建终端。这将为你提供一个终端窗口。提醒将呈现在与以后我的项目雷同的目录中。

浏览文件系统

找到终端后，你将须要具备更换文件系统目录的要害能力。你能够应用 命令来实现此操作，该 命令代表“更改目录”：cd。

命令行提醒

终端指令通常 在行首蕴含 $ 或 >。这些用于指定提醒，不应复制。在本书中，我将用美元符号（$）批示终端提醒。在终端应用程序中输出阐明时，请勿键入 $。

当你关上终端应用程序时，将呈现一个光标提醒，你能够在其中输出命令。默认状况下，你位于计算机的主目录中。如果你还没有，我倡议创立一个 Projects 文件夹，该文件夹是你的主目录中的子目录。该文件夹能够包容你所有的开发我的项目。你创立一个 Projects 目录并按如下形式导航到该文件夹：

# first type cd, this will ensure you are in your root directory
$ cd# next, if you don't already have a Projects directory, you can create one# this will create Projects as a subfolder in your system's root directory
$ mkdir Projects# finally you can cd into the Projects directory$ cd Projects

未来，你能够 按以下形式导航到 Projects 目录：

$ cd # ensure you are in the root directory
$ cd Projects

当初，假如你 在 Projects 目录中有一个名为 jseverywhere 的文件夹。你能够 从 Projects 目录键入 以导航到该文件夹。要向后导航到目录（在本例中为 Projects），请键入 cd ..（命令后跟两个句点）。

总之，这看起来像：

> $ cd # ensure you are in your root directory
> $ cd Projects # navigate from root dir to Projects dir/Projects 
> $ cd jseverywhere # navigate from Projects dir to jsevewehre dir/Projects/jseverwhere 
> $ cd .. # navigate back from jseverwhere to Projects/Projects 
> $ # Prompt is currently in the Projects dir

如果这对你来说是新的，请花一些工夫浏览文件，直到你感到舒服为止。我发现文件系统问题是老手开发人员常常遇到的问题。把握这一点将为你建设工作流奠定松软的根底。

命令行工具和 Homebrew（仅 Mac）

某些命令行实用程序只有在装置了 Xcode 之后才对 macOS 用户可用。

你能够通过 终端进行装置，而无需装置 Xcode，就能够跳过这个。为此，请运行以下命令，而后单击装置提醒：xcode-select

$ xcode-select --install

Homebrew 是 macOS 的软件包管理器。它使装置开发依赖项（如编程语言和数据库）变得像运行命令行提示符一样简略。如果你应用 Mac，它将大大简化你的开发环境。要装置 Homebrew，请返回 brew.sh 复制并粘贴装置命令，或在一行中键入以下内容：

$ /usr/bin/ruby -e "$(curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"

Node.js 和 NPM

Node.js 是“基于 Chrome 浏览器的 V8 JavaScript 引擎构建的 JavaScript 运行时。”

一个 JavaScript 运行器，建设在 Chrome 的 V8 JavaScript 引擎上。

实际上，这意味着 Node 是一个平台，容许开发人员在浏览器环境之外编写 JavaScript。Node.js 随附 NPM（默认软件包管理器）。NPM 使你能够在我的项目中装置数千个库和 JavaScript 工具。

治理 Node.js 版本

如果打算治理大量的 Node 我的项目，则可能会发现还须要治理计算机上的多个版本的 Node。如果是这种状况，我倡议你应用

Node 版本管理器（NVM）来装置 Node。NVM 是使你可能治理多个流动 Node 版本的脚本。对于 Windows 用户，我倡议应用 nvm-windows。我不会介绍 Node 版本控制，然而它是一个有用的工具。如果这是你第一次应用 Node，倡议对你的零碎依照以下阐明进行操作。

为 macOS 装置 Node.js 和 NPM

macOS 用户能够应用 Homebrew 装置 Node.js 和 NPM。要装置 Node.js，请在终端中键入以下命令：

$ brew update
$ brew install node

装置了 Node 后，关上你的终端应用程序以验证其是否失常运行。

$ node --version## Expected output v12.14.1, your version number may differ
$ npm --version## Expected output 6.13.7, your version number may differ

键入这些命令后，如果看到版本号，那么祝贺，你已胜利装置了实用于 macOS 的 Node 和 NPM！

为 Windows 装置 Node.js 和 NPM

对于 Windows，装置 Node.js 的最间接办法是拜访 nodejs.org 并下载安装程序为你的操作系统。

首先，依照你的操作系统的装置步骤，拜访 nodejs.org 并装置 LTS 版本（在撰写本文时为 12.14.1）。装置了 Node 后，关上你的终端应用程序以验证其是否失常运行。

$ node --version## Expected output v12.14.1, your version number may differ
$ npm --version## Expected output 6.13.7, your version number may differ

什么是 LTS？

LTS 代表“长期反对”，这意味着 Node.js Foundation 致力于为该次要版本号（在本例中为 12.x）提供反对和安全更新。该版本的初始发行后，规范反对窗口将继续三年。在 Node.js 中，偶数版本是 LTS 版本。我倡议应用偶数版本进行利用程序开发。

键入这些命令后，如果你看到版本号，那么祝贺你，你曾经胜利装置了 Windows 版 Node 和 NPM！

MongoDB

MongoDB 是咱们在开发 API 时将应用的数据库。Mongo 是应用 Node.js 的一种风行抉择，因为它将咱们的数据视为 JSON（JavaScript 对象表示法）文档。这意味着 JavaScript 开发人员从一开始就能够轻松应用。

官网的 MongoDB 装置文档

MongoDB 文档提供了无关在各个操作系统上装置 MongoDB Community Edition 的定期更新指南。如果你在装置过程中遇到问题，倡议你参考以下地位的文档

docs.mongodb.com/manual/administration/install-community。

装置和运行实用于 macOS 的 MongoDB

要装置实用于 macOS 的 MongoDB，请首先应用 Homebrew 进行装置：

$ brew update
$ brew tap mongodb/brew
$ brew install mongodb-community@4.2

要启动 MongoDB，咱们能够将其作为 macOS 服务运行：

$ brew services start mongodb-community

这将启动 MongoDB 服务，并使它作为后盾过程运行。请留神，无论何时重新启动计算机并打算应用 Mongo 进行开发，都可能须要再次运行此命令来重新启动 MongoDB 服务。要验证 MongoDB 是否已装置并正在运行，请在终端中键入键入 ps -ef | grep mongod。这将列出以后正在运行的 Mongo 过程。

装置和运行 Windows MongoDB

要装置 Windows 版 MongoDB，请首先从以下地位下载安装程序：

MongoDB 下载核心。下载文件后，请依照装置向导运行安装程序。我倡议抉择“残缺”装置类型，将其配置为“服务”。所有其余值都能够保留为默认值。

装置实现后，咱们可能须要创立 Mongo 将在其中写入数据的目录。在你的终端中，运行以下命令：

$ cd C:\
$ md "\data\db"

要验证是否已装置 MongoDB 并启动 Mongo 服务：

1. 找到 Windows 服务控制台。
2. 查找 MongoDB 服务。
3. 右键单击 MongoDB 服务。
4. 单击开始。

请留神，无论何时重新启动计算机并打算应用 Mongo 进行开发，都可能须要重新启动 MongoDB 服务。

Git

Git 是最风行的版本控制软件，它容许你执行诸如复制代码存储库，与别人合并代码以及创立本人的代码分支而不会相互影响的事件。Git 将有助于“克隆”本书的示例代码存储库，这意味着它将容许你间接复制示例代码文件夹。依据你的操作系统，可能曾经装置了 Git。在终端窗口中输出以下内容：

$ git --version

如果返回了一个数字，那么祝贺你 - 所有就绪！如果没有，请拜访 git-scm.com 装置 Git，或将 Homebrew 用于 macOS。实现装置步骤后，再次输出 git --version 你的终端以验证它是否无效。

Expo

Expo 是一个工具链，可通过 React Native 简化 iOS 和 Android 我的项目的疏导和开发。咱们将须要装置 Expo 命令行工具，以及可选的（只管举荐）（实用于 iOS 或 Android 的 Expo 利用）。咱们将在本书的挪动应用程序局部中对此进行更具体的介绍，然而如果你有趣味入门，请拜访 expo.io 理解更多。要装置命令行工具，请在终端中键入以下内容：

npm install -g expo-cli

应用 -g 全局标记将使该 expo-cli 工具在你的计算机的 Node.js 装置中全局可用。

要装置 Expo 挪动应用程序，请在设施上拜访 Apple App Store 或 Google Play 商店。

Prettier

Prettier 是一种代码格式化工具，反对多种语言，包含 JavaScript，HTML，CSS，GraphQL 和 Markdown。它使遵循根本格局设置规定变得很容易，这意味着当你运行 Prettier 命令时，你的代码将主动设置格局以遵循一组规范的最佳实际。更好的是，你能够将编辑器配置为在每次保留文件时主动执行此操作。这意味着你永远不会再有一个我的项目呈现空格不统一和引号混合的问题。

我倡议在你的计算机上全局装置 Prettier 并为你的编辑器配置一个插件。要全局装置 Prettier，请转到命令行并输出：

npm install -g prettier

一旦装置了 Prettier，请拜访 Prettier.io 查找文本编辑器的插件。装置了编辑器插件后，倡议你在编辑器的设置文件中增加以下设置：

"editor.formatOnSave": true,
"prettier.requireConfig": true

只有.prettierrc 配置文件在我的项目中，这些设置将在保留时主动格式化文件。该 .prettierrc 文件指定了 Prettier 恪守的规范。当初，只有存在该文件，你的编辑器就会主动从新格式化你的代码，以满足我的项目的约定。本书中的每个我的项目都将蕴含一个 .prettierrc 文件。

ESLint

ESLint 是 JavaScript 的代码 linter。linter 与诸如 Prettier 这样的格式化程序的不同之处在于，linter 还查看代码品质规定，例如未应用的变量，有限循环和返回后掉落的无法访问的代码。与 Prettier 一样，我倡议为你喜爱的文本编辑器装置 ESLint 插件。这将在你编写代码时实时提醒你的谬误。你能够在以下地位找到编辑器插件列表

ESLint 网站与 Prettier 类似，我的项目能够在.eslintrc 文件中指定要遵循的 ESLint 规定。这为我的项目维护者提供了对其代码首选项的细粒度管制，以及主动执行编码标准的办法。本书中的每个我的项目都将蕴含一组有用但容许的 ESLint 规定，旨在帮忙你防止常见的陷阱。

使事件看起来不错

这是可选的，然而当我发现自己的设置好看时，我发现自己喜爱编程。我受不了，毕竟我领有艺术学位。花一些工夫来尝试不同的色彩主题和字体。就我集体而言，我曾经开始喜爱 Dracula 主题，它是简直所有文本编辑器和终端都能够应用的色彩主题，以及 Adobe 的 Source Code Pro 字体。

论断

在本章中，咱们在咱们电脑上建设了一个可工作且灵便的 JavaScript 开发环境。编程的最大乐趣之一就是个性化你的环境。我心愿你尝试应用主题、色彩和工具来配置本人的环境。在本书的下一部分中，咱们将通过开发 API 应用程序来使该环境失常工作。

完结

毛毛：如果有了解不到位的中央，欢送大家纠错。如果感觉还能够，就请点赞珍藏或者分享一下，心愿能够帮到更多人。

写在前面

大家好，我是毛毛。正在翻译一本英文技术书籍。

英文书名：《JavaScript Everywhere: Building Cross-Platform Applications with GraphQL, React, React Native, and Electron》

中文译名：《随处可见的 JavaScript: 应用 GraphQL、React、React Native 和 Electron 构建跨平台应用程序》

作者：Adam D. Scott

译者：毛毛

出版工夫：2020 年 2 月 6 日。

翻译工夫：2020 年 10 月 10 日

书封面：

在这个方面，还十分缺乏经验。

看到的读者，有任何想法和倡议都能够在下方留言。心愿能够失去一些反馈。

你的倡议对我很重要。先在这里谢过了。(*~︶~)。