翻译-《JavaScript Everywhere》第12章使用React搭建Web客户端
时间：2023-04-02 19:07:00
HTML
翻译|《JavaScript Everywhere》Chapter12UsingReactBuildaWebClient写在最上面大家好，我是前端开发工程师毛小友。翻译一本英文技术书籍。为了提高大家的阅读体验，对句子的结构和内容进行了微调。如果大家发现本文有什么不妥之处，或者有什么意见和建议，可以在评论区留言，或者加我的微信：code_maomao，欢迎交流，互相学习。(σ???)σ..:*☆不错哦第12章用React构建Web客户端超文本的最初想法是获取相关文档并将它们链接在一起：如果学术论文A引用学术论文B，让我们很容易单击某些内容并在它们之间导航。1989年，CERN的软件工程师TimBerners-Lee想到了将超文本与联网计算机结合起来的想法，让人们可以轻松地建立这些联系，而不管文档位于何处。每一张猫的照片、新闻、推文、流媒体视频、求职网站和餐厅评论都应该归因于一个全球链接文档的简单想法。本质上，网络仍然是将文档链接在一起的媒介。在网络浏览器中，每个页面都是HTML，带有CSS（用于样式）和JavaScript（用于增强功能）。今天，我们使用这些技术来构建从个人博客和小型宣传册网站到复杂的交互式应用程序的一切内容。它的根本优势在于Web提供了通用访问。任何只需要具有Internet连接的Web浏览器的人都会创建一个默认环境。我们正在构建什么在接下来的章节中，我们将为社交笔记应用程序Notedly构建Web客户端。用户将能够创建和登录帐户、在Markdown中编写笔记、编辑他们的笔记、查看其他用户笔记的摘要以及“收藏”其他用户的笔记。为此，我们将与GraphQL服务器API进行交互。在我们的网络应用程序中：用户将能够创建笔记、阅读、更新和删除他们创建的笔记。用户将能够查看其他用户创建的笔记摘要并阅读其他用户创建的个人笔记，但他们将无法更新或删除它们。用户将能够创建帐户、登录和注销。用户将能够检索他们的个人资料信息以及其他用户的公开个人资料信息。用户将能够为其他用户的笔记添加书签并检索他们的收藏夹列表。这些函数涉及很多领域，但在本书的这一部分，我们会将它们分成小块。一旦您学会了构建具有所有这些功能的React应用程序，您就可以应用这些工具和技术来构建各种丰富的Web应用程序。我们将如何构建它您可能已经猜到，要构建此应用程序，我们将使用React作为客户端JavaScript库。此外，我们将从GraphQLAPI查询数据。为了帮助查询、修改和缓存数据，我们将使用Apollo客户端。ApolloClient包括一组用于使用GraphQL的开源工具。我们将使用库的React版本，但Apollo的团队还开发了Angular、Vue、Scala.js、NativeiOS和NativeAndroid集成。其他GraphQL客户端库虽然我们将在本书中使用Apollo，但它远非唯一的GraphQL客户端选项。Facebook的Relay和Formiddable的urql也是两个流行的选择。此外，我们将使用parcel作为我们的代码打包器。代码打包器允许我们编写具有Web浏览器可能不可用的功能（例如，更新的语言功能、代码模块、压缩）的JavaScript，并将其打包以在浏览器环境中使用。Parcel是Webpack等应用程序构建工具的无配置替代品。它提供了许多不错的功能，例如代码拆分和在开发期间自动更新浏览器（也称为热模块替换）而无需构建版本。如前一章所述，create-react-app还提供零配置初始设置，在后台使用Webpack，但Parcel允许我们从头开始构建应用程序，我发现这非常适合学习。入门在开始开发之前，我们需要将项目启动代码文件复制到我们的计算机上。该项目的源代码包含我们开发应用程序所需的所有脚本和对第三方库的引用。要将代码克隆到本地计算机，请打开终端，导航到保存项目的目录，然后gitclone项目存储库。如果你已经阅读了API章节，你可能已经创建了一个显着的目录来组织你的项目代码：但是有一个值得注意的目录$cdnotedly$gitclonegit@github.com:javascripteverywhere/web.git$cdweb$npminstall安装第三方依赖项无需为任何第三方依赖项再次运行npminstall。代码结构如下：/src这是你用本书开发的目录。/solutions该目录包含每一章的解决方案。如果您遇到困难，这些供您参考。/final这个目录包含最终的工作项目。现在您已经在计算机上安装了代码，复制项目的.env文件。该文件包含我们特殊的工作环境变量。例如，在本地工作时，我们将指向API的本地实例，但在部署应用程序时，我们将指向远程API。要复制.env文件，请从Web目录在终端中键入以下内容：$cp.env.example.env您现在应该会看到一个.env文件。您无需对该文件执行任何操作，但我们会随着API后端的开发向其添加信息。项目附带的.gitignore文件将确保您不会意外提交.env文件。求助，我看不到.env文件！默认情况下，操作系统会隐藏以句点开头的文件，因为这些文件通常由系统而非最终用户使用。如果您没有看到.env文件，请尝试在文本编辑器中打开该目录。该文件应该在编辑器的文件浏览器中可见。或者，在终端窗口中键入ls-a将列出当前工作目录中的文件。构建Web应用程序在本地克隆启动代码后，我们可以构建ReactWeb应用程序。首先让我们看一下src/index.html文件。这看起来像一个标准但完全空的HTML文件，但请注意以下两行：
这两行是对我们的React应用程序非常重要。root将为整个应用程序提供一个容器。同时，App.js文件将成为我们的JavaScript应用程序的入口点。现在我们可以开始在src/App.js文件中开发React应用程序。如果你看过上一章对React的介绍，可能会觉得很熟悉。在src/App.js中，我们首先导入react和react-dom库：importReactfrom'react';从'react-dom'导入ReactDOM；现在，我们将创建一个名为App的函数，它将返回应用程序的内容。现在，这只是包含在元素中的两行HTML：constApp=()=>{return(
HelloNotedly!
WelcometotheNotedlyapplication
);};所有的div是怎么回事？如果您刚刚开始使用React，您可能想知道周围组件带有标签的趋势。React组件必须包含在父元素中，父元素通常是一个标签，但也可以是任何其他合适的HTML标签，例如,或。如果我们觉得包含HTML的标签是多余的，我们可以在我们包含这些组件的JavaScript代码中使用空的<>标签。最后，我们将通过添加以下命令指示React在具有根ID的元素内呈现应用程序：ReactDOM.render(
,document.getElementById('root'));现在，我们的src/App.js文件的完整内容应该是：importReactfrom'react';从'react-dom'导入ReactDOM；constApp=()=>{return(
HelloNotedly!
欢迎使用Notedly应用程序
);};ReactDOM.render(
,document.getElementById('根'));完成后，让我们在网络浏览器中查看它。通过在终端应用程序中键入npmrundev启动本地开发服务器。编译代码后，访问http://localhost:1234查看页面（图12-1）。图12-1我们在浏览器中运行的原始React应用程序路由网络的定义特征之一是能够将文档链接在一起。同样，对于我们的应用程序，我们希望用户能够在屏幕或页面之间导航。在HTML呈现应用程序中，这将涉及创建多个HTML文档。每当用户导航到新文档时，整个文档都会重新加载，即使两个页面上有共享方面（例如页眉或页脚）也是如此。在JavaScript应用程序中，我们可以利用客户端路由。在许多方面，这类似于HTML链接。用户将单击一个链接，URL将更新，然后他们将被导航到一个新屏幕。不同之处在于我们的应用程序只会用更改的内容更新页面。体验将是“类似应用程序”的流畅体验，这意味着不会有可见的页面刷新。在React中，最常用的路由库是Router。这个库使我们能够向ReactWeb应用程序添加路由功能。为了在我们的应用程序中引入路由，我们首先创建一个src/pages目录并添加以下文件：/src/pages/index.js/src/pages/home.js/src/pages/mynotes.js/src/pages/favorites.js我们的home.js、mynotes.js和favorite.js文件将成为我们单独的页面组件。我们可以为每个文件创建一些初始内容和效果挂钩，这些挂钩将在用户导航到页面时更新文档标题。在src/pages/home.js中：importReactfrom'react';constHome=()=>{return(
);};导出默认首页;在src/pages/mynotes.js:importReact,{useEffect}from'react';constMyNotes=()=>{useEffect(()=>{//更新文档titledocument.title='MyNotes-Notedly';});return(
);};exportdefaultMyNotes;在src/pages/favorites.js:importReact,{useEffect}from'react';constFavorites=()=>{useEffect(()=>{//更新文档titledocument.title='Favorites-Notedly';});return(
Notedly
Thesearemyfavorites
);};exportdefaultFavorites;useEffect在前面的例子中，我们使用React的useEffecthook来设置页面标题。Effecthooks允许我们在组件中产生副作用，更新与组件本身无关的内容。如果您有兴趣，可以深入研究React的Effecthooks文档。现在，在src/pages/index.js中，我们将使用react-router-dom包导入ReactRouter和Web浏览器路由所需的方法：importReactfrom'react';import{BrowserRouterasRouter,Route}from'反应路由器-dom';接下来，我们将导入我们刚刚创建的页面组件：importHomefrom'./home';从“./mynotes”导入MyNotes；从“./favorites”导入收藏夹；最后，我们创建为路由的每个页面组件都将指定一个特定的URL。请注意，我们的“主页”路由使用了完全匹配，这将确保主页组件仅针对根URL呈现：constPages=()=>{return(
);};导出默认页面；现在，我们完成src/pages/index.js文件应该是这样的：//importReactandroutingdependenciesimportReactfrom'react';import{BrowserRouterasRouter,Route}from'react-router-dom';//导入路由importHomefrom'./home';importMyNotesfrom'./mynotes';importFavoritesfrom'./favorites';//定义路由constPages=()=>{return(
);};导出默认页面;最后，我们可以更新src/App.js文件以通过导入路由和渲染组件来使用我们的路由：importReactfrom'react';从'react-dom'导入ReactDOM；//导入路由importPagesfrom'/pages';骗局stApp=()=>{return(
);};ReactDOM.render(
,document.getElementById('root'));现在，如果您在Web浏览器中手动更新URL，您应该能够查看每个组件。例如，键入http://localhost:1234/favorites以呈现收藏夹页面。链接我们已经创建了页面，但是我们缺少将它们链接在一起的关键部分。因此，让我们添加从主页到其他页面的链接。为此，我们将使用ReactRouter的链接组件。在src/pages/home.js中：从'react'导入React；//从react-router导入Link组件import{Link}from'react-router-dom';constHome=()=>{return(
);};导出默认首页；这样我们就可以浏览我们的应用程序了。单击主页上的链接之一将导航到相应的页面组件。浏览器的核心导航功能，如后退和前进按钮，也将继续发挥作用。UI组件我们已经成功地创建了单独的页面组件并且可以在它们之间导航。在构建页面时，它们将具有多个共享的用户界面元素，例如标题和站点范围的导航。每次使用它们时都重写它们不是很有效（而且会很烦人）。相反，我们可以编写可重用的界面组件并在需要的地方导入它们。事实上，将我们的UI视为由微小的组件组??成是React的核心功能之一，也是我掌握框架的突破。我们将从为应用程序创建标题和导航组件开始。首先，让我们在src目录中创建一个名为components的新目录。在src/components目录中，我们将创建两个名为Header.js和Navigation.js的新文件。React组件必须大写，因此我们也将遵循大写文件名的约定。我们先在src/components/Header.js中编写header组件。为此，我们将导入logo.svg文件并为我们的组件添加适当的标记：从'../img/logo.svg'导入徽标；constHeader=()=>{return(
);};export默认标题；对于我们的导航组件，我们将导入ReactRouter的链接功能并标记一个无序列表的链接。在src/components/Navigation.js中：从'react'导入React；从'react-router-dom'导入{链接}；constNavigation=()=>{return(
);};exportdefaultNavigation;在屏幕截图中，您会注意到我还包含了表情符号字符作为导航图标。如果您要这样做，包含表情符号字符的可访问标记如下所示：
之后完成标题和导航组件，我们现在可以在我们的应用程序中使用它们。让我们更新src/pages/home.js文件以包含这些组件。我们将首先导入它们，然后将组件包含在我们的JSX标记中。我们的src/pages/home.js现在看起来像这样（图12-2）：importReactfrom'react';从'../components/Header'导入标头；从'../components/Navigation'导入导航；constHome=()=>{return();};导出默认主页；图12-2使用React组件，我们可以轻松编写可共享的UI功能。这是我们在应用程序中创建可共享组件所需的一切。有关在UI中使用组件的更多信息，我强烈建议阅读React文档页面“ThinkinginReact”。结论Web仍然是分发应用程序的极其重要的媒介。它使开发人员能够实时访问更新。在本章中，我们在React中构建了一个JavaScriptWeb应用程序。在下一章中，我们将使用React组件和CSS-in-JS为应用程序添加布局和样式。如果有什么不明白的地方，请指正。如果您觉得还可以，请点赞、收藏或分享，希望能帮助到更多的人。
