使用 Create React App 搭建 React 项目

React 是最流行的用于开发前端应用的 JavaScript 库之一。它是一个最初由 Facebook 开发的开源库。React 很快因能够利用 JSX – 一种将 JavaScript 与类似 HTML 的语法相结合的编程范式。

以前，设置 React 项目是一个复杂的过程。它需要手动配置以下组件：

• 构建系统
• 代码转译器（将现代语法转换为浏览器可读的代码）
• 项目的基本目录结构

庆幸的是，这些日子已经一去不复返了，这要归功于 Create React App。这是一个非常棒的工具，可以自动执行所有这些步骤。Create React App 负责代码转译、代码检查（linting）、测试和构建系统。此外，它还配备了一个支持热重载（hot reloading）的服务器，这意味着在做出更改时会自动刷新网页。当然，所有这些都是在一个有条理的目录结构中完成的。

简而言之，无需经历手动配置构建系统的繁琐工作，例如 Webpack，或转译器，例如 Babel。需要担心的事变少了，您就可以完全专注于前端开发。Create React App 允许您以最少的准备工作开始使用 React。

在本指南中，我们将展示如何使用 Create React App 并运行一个基础的 React 应用程序。它可以作为未来任何应用程序项目的基础.

前提条件

要执行本教程中演示的步骤，您需要预先配置以下软件。

• • 一个配置妥当的 Ubuntu 服务器。您可以按照 在 CloudSigma 上配置 Ubuntu 服务器.
  • 安装最新版本的 Node.js。这里有一份关于 在 Ubuntu 上安装 Node.js.

步骤 1：创建专用的 npm 项目目录

对于 Node.js 包，npm 是默认的包管理器。我们将使用 npm 来创建一个专用的项目目录。它将托管重要的文件，例如 package.json，其中存储了关于项目的所有元数据以及其他 Node.js 依赖模块。JSON 是一种基于 JavaScript 对象的标准数据共享格式。请参考 本指南 如果您想了解更多关于 JSON 的信息。

首先，创建一个专用目录：

接下来，我们将告诉 npm 在该文件夹内初始化一个开发环境。它将创建项目所需的 package.json 文件。更改当前目录：

运行 npm init 命令：

请注意，如果您希望此目录成为 git 仓库的一部分，建议先进行设置。初始化脚本将自动检测并进行相应配置。完成后，目录中应该会有一个 package.json 文件。使用文本编辑器查看它：

步骤 2：使用 Create React App 创建 React 项目

在这一步中，我们将调用 Create React App 来建立我们的示例 React 项目。该脚本会将所有必要的内容以及所有依赖项复制到一个新目录中。 npm 包管理器还附带了工具 npx。它用于运行可执行包。我们将使用它来运行 Create React App 脚本，而无需实际下载该项目。

执行将运行 create-react-app 在指定的目录上。它还会运行 npm install 命令来安装依赖项。为了便于使用，我们将使用名称 cloudsigma-react-react-tutorial。运行以下命令：

在过程结束时，您将看到以下通知。如果安装成功，这就是成功消息。它还会报告创建项目的路径。

步骤 3：应用 React-Scripts

现在，我们将简要概述在安装过程中安装的各种 react-scripts。

• • 我们将运行 test 脚本来执行测试代码。
  • 该 build 脚本将创建我们项目的缩小版本（用于生产环境）。
  • 最后， eject 脚本提供了对自定义的完全控制。

首先，检查 React 项目目录的内容：

以下是每个文件的说明：

• • node_modules/：此目录包含该应用程序要使用的所有外部 JavaScript 库。极少需要在这里进行修改。
  • public/：它托管了一些基础的 HTML、JSON 和图像文件。它作为项目的根目录。
  • src/：此目录包含我们项目的 React JavaScript 代码。这是我们花费大部分时间的地方。我们将在指南的下一部分中进一步探索此目录。
  • .gitignore：这是一个描述 git 将忽略哪些目录的文件，例如 node_modules 目录。通常，最好排除包含大文件或托管日志文件的目录，这些文件不需要包含在版本控制中。在这种情况下，它还将包含一些特定于 React 的目录。
  • README.md：这是一个 markdown 文件，包含许多关于 Create React App 的有用信息。例如，它包含了用于高级配置的命令链接摘要。目前，我们不需要处理它。然而，随着项目的进展，您将添加更多关于该项目的文档。

文件 package.json 和 package-lock.json 是被 npm 使用的。当运行初始的 npx 命令时，它创建了基础项目。当安装了额外的依赖项时，它创建了 package-lock.json. npm 使用 package-lock.json 来确保包与确切的版本匹配。这样，如果其他人安装您的项目，他们也会获得完全相同的依赖项。由于它是自动创建和管理的，您极少需要动它。

我们需要讨论的最后一个文件是 package.json。它包含有关项目的元数据。例如，元数据可能包括项目标题、版本号和依赖项。它还包括可用于运行项目的脚本。查看 package.json 文件的内容：

这是一个包含各种对象的 JSON 文件。看一下 scripts 对象。它包含四个不同的脚本：

• • start
  • build
  • test
  • eject

这些脚本是根据它们的重要性列出的。 start 脚本启动本地开发服务器。接下来，我们将详细阐述如何使用其余的脚本。

• • Build 脚本

要运行 npm 脚本，命令结构如下：

要运行 build 脚本，请使用以下命令：

它将开始将代码编译为可用包的过程。完成后，查看输出目录：

请注意，有一个新目录 build/ 可用。它包含其他文件的缩小和优化版本。建议将其放入 .gitignore 文件中，因为我们总是可以使用 build 脚本来生成它。

• • Test 脚本

该 test 脚本是那些不需要 run 参数即可让 npm 运行它的脚本之一。然而，带上它运行也完全没问题。运行时，此脚本将启动一个名为 Jest 的测试运行器。该测试器会搜索任何文件扩展名为 .spec.js 或 test.js 的项目文件并运行这些文件。

以下 npm 命令将运行 test 脚本：

输出中有些事项需要注意。还记得测试运行器只寻找具有特定扩展名的文件吗？在这种情况下，只有一个测试套件（只有一个文件带有 .test.js 后缀）。它只包含一个测试。Jest 可以自动检测代码层级中的测试，因此你可以自由地在目录中嵌套测试。

此外，Jest 不仅仅是运行一次测试然后退出。它会在终端中持续运行测试。如果对源代码进行了任何更改，它将重新运行测试。Jest 还允许限制运行哪些测试。例如，通过按 0，你可以让 Jest 仅测试那些已更改的文件。随着测试套件的增长，此选项可以节省大量时间。要退出 Jest 测试运行器，请按 q.

• • Eject 脚本

该 eject 脚本会将所有依赖项和配置文件复制到项目中，从而让你完全控制代码。然而，这样做会使项目脱离 Create React App 集成工具链。一旦运行，就无法撤销。

Create React App 的好处在于，它免去了繁琐配置的负担。构建任何现代 JavaScript 应用程序都需要许多工具协同工作。Create React App 会为你处理所有配置，因此弹出项目意味着之后你必须手动完成所有这些配置。

Create React App 一个明显的缺点是，由于它自己管理所有配置，因此无法提供项目的完全自定义。对于大多数项目来说，这不是问题。但是，如果你想完全控制项目，就必须弹出代码。一旦弹出，你将无法更新到新版本的 Create React App。你必须手动管理所有增强功能。

步骤 4：启动服务器

现在，我们将启动本地服务器并在 Web 浏览器上运行该项目。为了启动服务器，我们手头有另一个脚本。执行它不需要 npm run 命令。运行时，该脚本会启动本地服务器，运行项目代码，启动监听器并监听代码更改。更改会直接显示在浏览器上。以下命令将启动服务器：

输出将显示在浏览器中访问该项目的 URL。它还将显示有关正在运行的项目的各种信息。在浏览器中打开该 URL：

如输出所示，Create React App 使用端口 3000 来提供项目服务。如果该端口已被占用，Create React App 将使用下一个可用端口。如果你配置了防火墙，则它必须允许流量通过端口 3000（或 Create React App 报告的端口）。你可以了解更多关于 在此处管理 UFW 防火墙.

要退出服务器，请按 Ctrl+C （在终端窗口中）。它将终止运行中的进程（服务器实例）。

步骤 5：修改首页

接下来，我们将学习如何 modify 存储在 public/ 目录中的代码。它包含基础 HTML 页面，并作为项目的根目录。虽然你将来可能不需要进一步编辑它，但它构成了项目的基础。

首先，使用 npm 启动服务器，然后移动到 public/ 目录：

该目录将包含类似于 favicon.ico, logo192.png, logo512.png 等文件。这些是访问网页的用户在标签页、浏览器或手机上看到的图标。浏览器会自动选择大小合适的图标。最终，你将用适合你项目的图标替换它们。目前，我们先保持原样。

文件 manifest.json 包含一组结构化的 元数据。它描述了项目，列出了可用的图标等。

文件 robots.txt 包含用于 网络爬虫 的信息。网络爬虫在万维网上“爬行”，为搜索引擎索引页面。除非你有特定的原因，否则无需修改该文件。例如，你可能希望使指向特定内容的某些 URL 不易被访问。将该位置添加到 robots.txt，它就不会被搜索引擎索引。

文件 index.html 是我们应用程序的根。每当访问该应用时，这就是被提供服务的文件。这就是您在显示屏上看到的文件。让我们快速看一下。在文本编辑器中打开它：

这是一个非常短的文件。请注意，在 <body> 中没有图像或文字。React 使用其自身的引擎构建这些内容，并使用 JavaScript 将其注入。然而，React 需要知道在哪里注入代码。文件 index.html 就是起这个作用的。

让我们将 <title> 更改为 My React App:

然后，保存文件并关闭编辑器。现在，在浏览器中查看网页：

如您所见，标签页的标题已更改为 My React App。如果它没有自动更改，请通过按 F5 或 Ctrl+R.

让我们回到文本编辑器。所有 React 项目都必须从一个根元素开始。在单个页面上可以有多个根元素。然而，至少有一个是必不可少的。它告诉 React 将所有生成的 HTML 代码放在哪里。在我们的 index.html 中，找到元素 <div id="root"> 的位置。这就是 React 将用于未来更改的 <div>。尝试将 id 值从 root 更改为 base:

 

 

之后，在浏览器上重新加载页面。它将不显示任何内容。正如 Firefox 的 Web 开发者工具 所显示的，它抛出了一个错误：

回到文本编辑器，将 id 的值改回 root:

步骤 6：标题标签和样式更改

到目前为止，我们已经启动了本地服务器，并对根 HTML 文件进行了微小的更改。现在，我们将处理位于 src/ 目录中的 React 组件。我们将对 CSS 和 JavaScript code 进行更改。这些更改将通过热重载自动应用。

如果服务器已停止，请使用 npm 启动它。然后，查看 src/ 目录的内容：

这里有多个 JavaScript 和 CSS 文件。我们将逐一介绍它们。

• ServiceWorker.js

如果您想制作渐进式 Web 应用程序，这是一个重要的文件。此 Service Worker 提供了各种功能，如推送通知、离线缓存等。目前，我们先不管它。

• SetupTests.js 和 App.test.js

正如这些文件的命名所暗示的，它们用于测试文件。每当我们运行 test 脚本（使用 npm）时，它都会运行这些文件。文件 setupTests.js 包含一些自定义的 expect 方法。

让我们来看看 App.test.js。在文本编辑器中打开它：

它包含一个基本测试，用于在文档中查找短语 learn react 是否存在。如果您打开了浏览器标签页，您可以在页面上看到该短语。与其他单元测试不同，React 测试有所不同。因为组件可以包含诸如标记之类的视觉信息（以及数据操作逻辑），传统的单元测试并不容易奏效。在这方面，将 React 测试描述为一种功能测试或集成测试更为贴切。

• CSS 文件

有各种样式文件可用： App.css, index.css，以及 logo.svg。在 React 中，您可以采用多种方法来进行样式设计。最简单的方法是编写纯 CSS，因为不需要额外的配置。

您被允许直接将 CSS 导入到组件中。这允许拆分 CSS 文件，使其仅应用于单个组件。实际上，您并没有将 CSS 与 JavaScript 分离。相反，您是将所有相关的组件（CSS、JavaScript、图像和标记）组合在一起。

打开 App.css ，使用文本编辑器：

这是一个标准的 CSS 文件，没有特殊的 CSS 预处理器。如果需要，您可以在以后添加它们。Create React App 力求保持中立，同时提供可靠的开箱即用体验。

让我们做个修改并看看它的实际效果。修改 background-color 为 blue:

在浏览器中查看更改：

• • Index.js

现在，是时候修改 React JavaScript 代码了。打开 index.js 使用文本编辑器：

在顶部，它正在导入 React, ReactDOM, index.css, App，以及 serviceWorker。通过导入 React，我们引入了将 JSX 转换为 JavaScript 所需的代码。 ReactDOM 是将我们的 React 代码连接到基础元素（例如 index.html）的代码。看看下面这一行：

它指示 React 寻找一个 id 标记为 root，并在该处注入 React 代码。 <App/> 是根元素，所有其他元素都从此分支出来。

请注意，我们还导入了 CSS 文件（例如 index.css），但实际上并没有对其进行任何操作。通过导入，我们实际上是在告诉 Webpack 通过 React 脚本将 CSS 代码包含到最终编译的包中。否则，CSS 样式将不会显示。

• App.js

接下来，我们将看看 App.js。在文本编辑器中打开它：

 

让我们看看修改其内容如何影响我们的项目。修改 <p> 标签的内容：

然后，保存文件并在浏览器中查看更改：

瞧！您已经完成了对第一个 React 组件的微调！

还有一件事需要注意。看看元素 <img>:

请注意， logo 被传入花括号中。每当传递属性（不是字符串或数字）时，都必须将它们传入花括号中。然后，React 会将它们视为 JavaScript 对象而不是字符串。

在这种情况下，应用实际上并没有导入图像。相反，它是对图像的引用。当 Webpack 构建项目时，它会将图像放在合适的位置。我们可以在浏览器中进行验证。在 Firefox 中打开 Web 开发者工具：

Webpack 想要为所有图像分配唯一的文件路径。因此，即使导入的图像名称相同，它们也会有不同的路径。

步骤 7：项目构建

在这一步中，我们将学习如何将项目编译成可部署的包。启动终端并运行项目的 build 脚本：

编译器将创建专用目录 build/，并在其中放置输出。要查看编译过程的作用，请打开 index.html 文件，它位于 build/ 目录中：

如您所见，所有代码都被编译并压缩到最小的可用状态。可读性并不是问题，因为这不是面向公众的代码。压缩后的代码占用更少的空间，同时保留了其所有功能。与空格非常重要的语言（例如 Python）不同，网页语言（HTML、CSS 和 JavaScript）不需要适当的空格即可让浏览器进行解析。

结语

在本指南中，我们成功演示了如何创建 React 应用程序。我们还展示了使用 JavaScript 构建工具的一些基本配置，而无需复杂的技术细节。这就是 Create React App 提供的核心价值。您无需了解所有内容即可开始使用 React。您可以不学习复杂的构建步骤，而专注于 React 代码本身。

在这里，我们还演示了如何启动、测试和构建 React 项目。这些命令对于各种规模的项目都是必不可少的。

祝您编程愉快！