介绍今天，您将学习如何使用一些合理的、自以为是的默认设置来构建React单页应用程序（SPA）。也许，你以前听说过createreact app，也许你甚至用这个工具来搭建你的react应用。所以，你可能会想："为什么我需要读这篇文章，它对我有什么帮助？"这个问题的答案很简单：create react app是一个很好的起点，但并不能让这个领域成为一个真正的、可以生产的SPA。因此，本文的目标是帮助您完成构建React SPA所需的步骤：具有一致的代码样式（在Prettier（JavaScript格式化程序）的帮助下，安装和配置一些流行的React库（如Redux和Redux Saga），使用样式化组件来帮助您管理React组件的CSS，配置React引导程序，为您提供响应迅速的移动应用程序，它使用Auth0轻松地处理身份验证。完成以下步骤后，您将拥有一个水疗中心：很容易扩展，多个开发人员可以为（而不是以一个意大利面代码结尾），有一个不错的用户界面（基于最流行的React UI库之一），可以轻松处理状态和异步任务（如超时和AJAX请求），这是安全的。如果听起来很有趣，继续读吧！先决条件要继续阅读本文，您需要节点.js在机器上安装npm或纱线。如果您没有这些工具，请在继续之前检查此资源。在大多数装置上，节点.js与npm一起发货。除此之外，你还需要一些反应的基本知识。您不需要多年的经验来理解本文，但是您必须了解它的基本原理（组件、JSX等）。如果您对React完全陌生，请阅读React教程：首先构建和保护您的第一个应用程序。读完那篇文章后，你将有必要的反应知识来遵循这篇文章而不费吹灰之力。你要建造什么在本文中，您将构建一个非常简单的待办事项列表管理器应用程序。你的应用程序将使用来自外部服务器的待办事项列表，并允许用户向本地列表添加新的待办事项。但是，应用程序不会使用用户添加的任何新项目更新此外部服务器。本文的目标不是构建应用程序，而是教您如何将所有东西组合在一起，这样您就可以构建依赖于成熟体系结构的出色React应用程序。搭建React SPA构建新的React SPA的第一件事是使用createreact app。这个工具令人难以置信，因为它让你只需发出一个命令就可以组装一个React应用程序。因此，打开一个终端，移动到要保存项目的目录中，然后发出以下命令：npx创建react app react todo如果您的系统中安装了Yarn，create react app会将其用作项目的包管理器；否则，它将使用npm。如果安装了Yarn但更喜欢使用npm，则可以运行以下命令：npx create react app react todo--使用npmnpx是npmv5.2+中提供的一个工具，它允许您执行一次性命令。如果createreact应用程序没有安装在您的系统中，npx会自动从npm注册表安装它并调用它。一旦完成，安装的软件包就不会出现在你的全局文件中，从长远来看减少了系统中的软件包污染。执行create react app的输出是一个名为react todo的目录。进入新目录（cd react todo），运行yarn start或npm start查看新应用程序。如果一切正常，一个新的网页托管：3000将在默认浏览器中打开。根据您告诉createreact app要使用的包管理器，根据需要将yarn命令替换为npm。安装和配置Prettier所有的软件开发人员在谈到代码风格时都有自己的偏好。有些人喜欢使用分号，有些人则不使用分号。有些人喜欢用制表符缩进代码，有些人喜欢使用两个空格。然而，重要的是它们不会在一个代码基上混合这些不同的样式。为了容易地实现这一点，您将使用Prettier，一种固执己见的代码格式化程序，您可以使用它来帮助您保持项目代码样式的一致性。如果正确配置Prettier，开发人员就可以直接进入项目并开始编码，而不必担心代码格式。然后，当他们保存修改（或提交修改时），Prettier将确保代码的格式正确。听起来很酷，对吧？发出以下命令以使用此工具：纱线加上沙哑的皮棉上演更漂亮这些软件包很大，安装需要一些时间。我们来分析一下这三个库的作用：husky和lint staged：这些库将允许您将npm脚本注册为githook（这样一来，Prettier将在开发人员提交新代码之前运行）。prettier：这是您想要使用的JavaScript格式化程序。安装这些库后，将以下属性添加到包.json文件：// ./包.json"哈士奇"：{"挂钩"：{"预提交"："lint暂存"}},"lint staged"：{"src/**/*.{js，jsx，ts，tsx，json，css，scss，md}"：["更漂亮——单引号——写"，"git添加"]},"更漂亮"：{"单引号"：正确}第一个属性husky将使lint在Git的预提交阶段运行。第二个属性lint staged指明了npm究竟必须在这个阶段上运行什么。第三个属性prettier将prettier的默认配置更改为使用单引号而不是双引号。这样，您就可以查看Prettier编辑器集成文档，了解如何将Prettier集成到IDE中。在该文档中，您会发现社区已经为最流行的文本编辑器和ide（例如WebStorm和VSCode）构建了更漂亮的插件例如，如果你正在使用WebStorm，你必须安装这个插件。然后，在安装之后，您可以使用带有更漂亮操作的"重新格式化"（在macOS上为Alt+Shift+Cmd+P，在Windows和Linux上为Alt+Shift+Ctrl+P）格式化所选代码、文件或整个目录。另外，您可能有兴趣添加一个WebStorm文件监视程序来执行重新格式化，并对文件修改执行更漂亮的操作。如果您对此感兴趣，请查看此资源。安装和配置React引导在项目中配置Prettier之后，下一件事就是安装和配置React引导程序。这个库是引导工具包的一个专门化。由于Bootstrap依赖jQuery来运行一些组件，React社区认为删除这个依赖项并重新构建Bootstrap以与React紧密集成是一个好主意。React Bootstrap就是这样诞生的。因此，要安装此库，请从终端发出以下命令：纱线添加反应引导带之后，打开./public/索引.html文件，并在title DOM元素之后，导入引导程序的CSS文件：在如官方React引导文件所述：此库不依赖于特定版本的引导。因此，这个库没有附带任何CSS文件。但是，使用这些组件需要一些样式表。如何以及包含哪些引导样式由您决定，但最简单的方法是包含来自CDN的最新样式。-React引导程序介绍现在，要检查配置是否有效，请打开./src/应用程序js文件并将其代码替换为：//./src公司/应用程序js导入React，{Component}来自'React'；从"react bootstrap/Container"导入容器；从"react bootstrap/Button"导入按钮；从'react bootstrap/Col'导入Col；从'react bootstrap/Row'导入行；类应用程序扩展组件{渲染（）{返回(我的新React Bootstrap SPA听着，我是个按钮！);}}导出默认应用程序；如果一切正常，您将能够看到一个带有h1标题和使用引导CSS规则的按钮的页面。注意：您不再使用两个文件：./src/应用程序.css和/src/徽标.svg. 因此，请随意删除它们。安装PropTypes作为React开发人员，您可能已经知道什么是PropTypes，但是如果您不知道，下面是React文档中的定义：PropTypes导出一系列验证器，可用于确保您（您的React组件）接收的数据有效。-使用PropTypes进行排版也就是说，PropTypes允许您轻松地向项目添加一些类型检查功能。例如，如果您有一个输出所需消息的组件，则可以使用PropTypes添加类型检查，如下所示：从"React"导入React；从"prop types"导入PropTypes；const Header=（{description}）=>{description}；标题.propTypes= {说明：PropTypes.string.is必需};之后，无论何时使用头组件而不向其传递描述，PropTypes都会在JavaScript控制台中显示一条警告消息。请注意，这个工具在开发过程中可以帮助您。此外，出于性能原因，React只在开发模式下检查PropTypes。可以通过运行以下命令安装PropTypes：纱线添加道具类型安装Redux并将其与React集成接下来，您将在React应用程序中安装并集成Redux。对于那些不知道的人来说，Redux是React开发人员中最流行的状态管理库。Redux本身不需要反应，但是，mos