翻译 | 《JavaScript Everywhere》第12章 使用React构建Web客户端（^_^）

翻译 | 《JavaScript Everywhere》第12章 使用React构建Web客户端（^_）

写在最前面

大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。

为了提高大家的阅读体验，对语句的结构和内容略有调整。如果发现本文中有存在瑕疵的地方，或者你有任何意见或者建议，可以在评论区留言，或者加我的微信：code_maomao，欢迎相互沟通交流学习。

(σﾟ∀ﾟ)σ…:*☆哎哟不错哦

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

超文本背后的原始想法是获取相关文档并将它们链接在一起：如果学术论文A引用学术论文B，让我们可以轻松地单击某些内容并在它们之间导航。1989年，CERN的一位名为Tim Berners-Lee的软件工程师提出了将超文本与联网计算机相结合的想法，从而使人们可以轻松地建立这些连接，而不管文档的位置如何。每张猫的照片、新闻、推文、流媒体视频、求职网站和餐厅评论都应归功于全局链接文档的简单想法。

从本质上讲，网络仍然是将文档链接在一起的媒介。在网络浏览器中，每个页面都是HTML，带有CSS（用于样式设置）和JavaScript（用于增强功能）。今天，我们使用这些技术来构建从个人博客和小型手册站点到复杂的交互式应用程序的所有内容。其根本优点是Web提供了通用访问权限。任何人只需要一个可以连接网络的网络浏览器，会创建一个默认的环境。

我们正在构建什么

在接下来的章节中，我们将为社交笔记应用Notedly构建Web客户端。用户将能够创建和登录帐户，在Markdown中编写笔记，编辑他们的笔记，查看其他用户笔记的摘要以及“收藏”其他用户笔记。为此，我们将与GraphQL服务器API进行交互。

在我们的Web应用程序中：

• 用户将能够创建笔记、阅读、更新和删除他们创建的笔记。

• 用户将能够查看其他用户创建的笔记的摘要，并阅读其他人创建的单个笔记，尽管他们将无法更新或删除它们。

• 用户将能够创建帐户，登录和注销。

• 用户将能够检索其个人资料信息以及其他用户的公共个人资料信息。

• 用户将能够收藏其他用户的笔记以及检索其收藏夹列表。

这些功能将涉及很多领域，但是在本书的这一部分中，我们将把它们分成小块。一旦学会了使用所有这些功能构建React应用程序，就可以将工具和技术应用于构建各种富Web应用程序。

我们将如何构建它

你可能已经猜到了，要构建此应用程序，我们将使用React作为客户端JavaScript库。此外，我们将从GraphQL API查询数据。为了帮助查询，修改和缓存数据，我们将使用Apollo客户。Apollo Client包含用于使用GraphQL的一系列开源工具。我们将使用库的React版本，但是Apollo的团队还开发了Angular，Vue，Scala.js，Native iOS和Native Android集成。

其他GraphQL客户端库

尽管我们将在本书中使用Apollo，但它远远不是唯一一个GraphQL客户端选项。Facebook的Relay和Formiddable的urql也是两个受欢迎的选择。

此外，我们将使用parcel作为我们的代码捆绑器。代码捆绑器使我们可以使用Web浏览器中可能不具备的功能（例如，较新的语言功能，代码模块，压缩）编写JavaScript，并将其打包以供在浏览器环境中使用。Parcel是Webpack等应用程序构建工具的无配置替代方案。它提供了许多不错的功能，例如代码拆分和在开发过程中自动更新浏览器（又称热模块替换），而无需建立构建。如上一章所述，create-react-app它还提供了零配置的初始设置，在后台使用Webpack，但Parcel允许我们从头开始构建应用程序，这是我发现学习的理想方式。

入门

在开始开发之前，我们需要将项目启动代码文件复制到我们的电脑上。

项目的源代码包含我们开发应用程序所需的所有脚本和对第三方库的引用。要将代码克隆到本地计算机，请打开终端，导航到保存项目的目录，然后git clone项目存储库。如果你已经遍历了API章节，则可能已经创建了一个notedly目录来保持项目代码的条理性：

# change into the Projects directory
$ cd
$ cd Projects
$ # type the `mkdir notedly` command if you don't yet have a notedly directory  
$ cd notedly  
$ git clone git@github.com:javascripteverywhere/web.git
$ cd web
$ npm install 

安装第三方依赖项

通过使用本书的入门代码的副本并在目录中运行npm install，你无需为任何第三方依赖项再次运行npm install。

该代码的结构如下：

• /src

  这是你随书一起进行开发的目录。

• /solutions

  该目录包含每章的解决方案。如果你卡住了，这些可以供你参考。

• /final

  该目录包含最终的工作项目。

现在，你已经在电脑上安装了代码，复制项目的.env文件。这个文件保存了我们特殊的工作环境变量。

例如，在本地工作时，我们将指向API的本地实例，但是在部署应用程序时，我们将指向我们远程的API。复制.env文件，从Web目录在终端中键入以下内容：

$ cp .env.example .env

你现在应该看到一个.env文件。你无需对该文件做任何事情，但是随着API后端的开发，我们将向其中添加信息。项目附带的.gitignore文件将确保你不会无意间提交.env文件。

求助，我看不到.env文件！

默认情况下，操作系统隐藏以句点开头的文件，因为这些文件通常由系统使用，而不是最终用户使用。如果看不到.env文件，请尝试在文本编辑器中打开目录。该文件应该在编辑器的文件浏览器中可见。或者，在终端窗口中键入ls -a将列出当前工作目录中的文件。

构建Web应用程序

在本地克隆了启动代码之后，我们就可以构建React Web应用程序了。首先让我们看一下src/index.html文件。这看起来像一个标准的但完全为空的HTML文件，但请注意以下两行：

<div id="root"></div>
<script src="./App.js"></script> 

这两行对我们的React应用程序非常重要。

root将提供整个应用程序的容器。同时，App.js文件将成为我们JavaScript应用程序的入口。

现在我们可以开始在src/App.js文件中开发React应用程序了。如果你跟随上一章中的React简介，可能会觉得很熟悉。在src/App.js中，我们首先导入react和react-dom库：

import React from 'react';
import ReactDOM from 'react-dom'; 

现在，我们将创建一个名为App的函数，该函数将返回应用程序的内容。现在，这将只是元素中包含的两行HTML：

const App = () => {
   
  return (
   <div>
    <h1>Hello Notedly!</h1>
    <p>Welcome to the Notedly application</p>
   </div>
  );
}; 

和所有的div相关的是什么？

如果你只是从React入手，你可能会想知道用标签包围组件的趋势。React的组件必须包含于父元素，这往往是一种标签，但也可以是任何其他适当的HTML标签，例如,或.

如果感觉包含HTML的标记多余，我们可以用空的<>标记在我们的JavaScript代码中包含这些组件。

最后，我们将通过添加以下内容来指示React在根ID为root</