如何使用CreateReactApp设置React项目

作为 Write for DOnations 计划的一部分，作者选择了 Creative Commons 来接受捐赠。

介绍

React 是一个流行的 JavaScript 框架，用于创建前端应用程序。它最初由 Facebook 创建，通过允许开发人员使用直观的编程范式创建快速应用程序而广受欢迎，这种编程范式将 JavaScript 与称为 JSX 的类似 HTML 的语法联系起来。

开始一个新的 React 项目曾经是一个复杂的多步骤过程，包括设置构建系统、将现代语法转换为所有浏览器都可读的代码的代码转换器以及基本目录结构。但是现在，Create React App 包含了运行 React 项目所需的所有 JavaScript 包，包括代码转译、基本 linting、测试和构建系统。它还包括一个带有 热重载 的服务器，它会在您更改代码时刷新您的页面。最后，它将为您的目录和组件创建一个结构，这样您就可以在几分钟内开始编写代码。

换句话说，您不必担心配置像 Webpack 这样的构建系统。您无需设置 Babel 即可将您的代码转译为跨浏览器可用。您不必担心现代前端开发的大多数复杂系统。您可以以最少的准备开始编写 React 代码。

在本教程结束时，您将拥有一个正在运行的 React 应用程序，您可以将其用作任何未来应用程序的基础。您将对 React 代码进行第一次更改、更新样式并运行构建以创建应用程序的完全缩小版本。您还将使用具有热重载功能的服务器来为您提供即时反馈，并将深入探索 React 项目的各个部分。最后，您将开始编写自定义组件并创建一个可以随着您的项目发展和适应的结构。

先决条件

要学习本教程，您需要以下内容：

Node.js 版本 10.16.0 安装在您的计算机上。要在 macOS 或 Ubuntu 18.04 上安装它，请按照如何在 macOS 上安装 Node.js 和创建本地开发环境中的步骤或的 使用 PPA 部分安装如何在 Ubuntu 18.04 上安装 Node.js。
它还有助于对 JavaScript 有一个基本的了解，您可以在如何在 JavaScript 中编码系列中找到这些知识，以及 HTML 和 CSS 的基本知识。

第 1 步 — 使用 Create React App 创建一个新项目

在这一步中，您将使用 npm 包管理器创建一个新应用程序来运行远程脚本。该脚本会将必要的文件复制到一个新目录中并安装所有依赖项。

安装 Node 时，您还安装了一个名为 npm 的包管理应用程序。 npm 将在您的项目中安装 JavaScript 包，并跟踪有关项目的详细信息。如果您想了解有关 npm 的更多信息，请查看我们的如何使用带有 npm 和 package.json 的 Node.js 模块教程。

npm 还包括一个名为 npx 的工具，它将运行可执行包。这意味着您无需先下载项目即可运行 Create React App 代码。

可执行包会将 create-react-app 安装到您指定的目录中。它将首先在一个目录中创建一个新项目，在本教程中将称为 digital-ocean-tutorial。同样，这个目录不需要事先存在；可执行包将为您创建它。该脚本还将在项目目录中运行 npm install，这将下载任何其他依赖项。

要安装基础项目，请运行以下命令：

npx create-react-app digital-ocean-tutorial

该命令将启动一个构建过程，该过程将下载基本代码以及许多依赖项。

脚本完成后，您将看到一条成功消息，内容为：

Output...
Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd digital-ocean-tutorial
  npm start

Happy hacking!

your_file_path 将是您当前的路径。如果您是 macOS 用户，它将类似于 /Users/your_username; 如果您在 Ubuntu 服务器上，它会显示类似 /home/your_username 的内容。

您还将看到 npm 命令列表，允许您运行、构建、启动和测试您的应用程序。您将在下一节中进一步探索这些内容。

注意： 还有另一个 JavaScript 包管理器叫做 yarn。它受到 Facebook 的支持，并与 npm 做许多相同的事情。最初，yarn 提供了锁定文件等新功能，但现在这些在 npm 中也实现了。 yarn 还包括一些其他功能，例如离线缓存。更多差异可以在纱线文档中找到。

如果您之前在系统上安装了 yarn，您将看到 yarn 命令列表，例如 yarn start，它们的工作方式与 npm 命令相同。即使您安装了 yarn，也可以运行 npm 命令。如果您更喜欢 yarn，只需在以后的任何命令中将 npm 替换为 yarn 即可。结果将是相同的。

现在您的项目已设置在一个新目录中。切换到新目录：

cd digital-ocean-tutorial

您现在位于项目的根目录中。此时，您已经创建了一个新项目并添加了所有依赖项。但是您还没有采取任何行动来运行该项目。在下一部分中，您将运行自定义脚本来构建和测试项目。

第 2 步 — 使用 `react-scripts`

在此步骤中，您将了解与 repo 一起安装的不同 react-scripts。您将首先运行 test 脚本来执行测试代码。然后您将运行 build 脚本来创建一个缩小版本。最后，您将了解 eject 脚本如何让您完全控制自定义。

现在您在项目目录中，看看周围。您可以在文本编辑器中打开整个目录，或者如果您在终端上，您可以使用以下命令列出文件：

ls -a

-a 标志确保输出还包括隐藏文件。

无论哪种方式，您都会看到这样的结构：

Outputnode_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json

让我们一一解释：

node_modules/ 包含应用程序使用的所有外部 JavaScript 库。您很少需要打开它。
public/ 目录包含一些基本的 HTML、JSON 和图像文件。这些是您项目的根源。您将有机会在 Step 4 中进一步探索它们。
src/ 目录包含项目的 React JavaScript 代码。您所做的大部分工作都将在该目录中。您将在 Step 5 中详细探索这个目录。
.gitignore 文件包含一些默认目录和 git（您的源代码控制）将忽略的文件，例如 node_modules 目录。被忽略的项目往往是您在源代码控制中不需要的较大目录或日志文件。它还将包括一些您将使用一些 React 脚本创建的目录。
README.md 是一个 markdown 文件，其中包含许多有关 Create React App 的有用信息，例如命令摘要和高级配置的链接。现在，最好保留您所看到的 README.md 文件。随着项目的进展，您将使用有关项目的更详细信息替换默认信息。

最后两个文件由您的包管理器使用。当您运行最初的 npx 命令时，您创建了基础项目，但您还安装了其他依赖项。安装依赖项时，您创建了一个 package-lock.json 文件。 npm 使用此文件来确保包与确切的版本匹配。这样，如果其他人安装您的项目，您可以确保他们具有相同的依赖项。由于此文件是自动创建的，因此您很少会直接编辑此文件。

最后一个文件是 package.json。这包含有关您的项目的元数据，例如标题、版本号和依赖项。它还包含可用于运行项目的脚本。

在您喜欢的文本编辑器中打开 package.json 文件：

nano package.json

打开文件时，您将看到一个包含所有元数据的 JSON 对象。如果查看 scripts 对象，您会发现四个不同的脚本：start、build、test 和 eject。

这些脚本按重要性顺序列出。第一个脚本启动本地开发环境；您将在下一步中了解这一点。第二个脚本将构建您的项目。您将在 Step 4 中详细探讨这一点，但现在值得运行看看会发生什么。

`build` 脚本

要运行任何 npm 脚本，您只需在终端中输入 npm run script_name。有一些特殊的脚本可以省略命令的 run 部分，但运行完整的命令总是可以的。要运行 build 脚本，请在终端中键入以下内容：

npm run build

您将立即看到以下消息：

Output> digital-ocean-tutorial@0.1.0 build your_file_path/digital-ocean-tutorial
> react-scripts build

Creating an optimized production build...
...

这告诉你 Create React App 正在将你的代码编译成一个可用的包。

完成后，您将看到以下输出：

Output...
Compiled successfully.

File sizes after gzip:

  39.85 KB  build/static/js/9999.chunk.js
  780 B      build/static/js/runtime-main.99999.js
  616 B     build/static/js/main.9999.chunk.js
  556 B     build/static/css/main.9999.chunk.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

Find out more about deployment here:

  bit.ly/CRA-deploy

列出项目内容，您将看到一些新目录：

ls -a

Outputbuild/
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json

您现在有一个 build 目录。如果你打开了 .gitignore 文件，你可能已经注意到 build 目录被 git 忽略了。这是因为 build 目录只是其他文件的缩小和优化版本。无需使用版本控制，因为您始终可以运行 build 命令。稍后您将进一步探索输出；现在，是时候转到 test 脚本了。

`test` 脚本

test 脚本是不需要 run 关键字的特殊脚本之一，但即使包含它也可以工作。该脚本将启动一个名为 Jest 的测试运行器。测试运行程序会在您的项目中查找任何带有 .spec.js 或 .test.js 扩展名的文件，然后运行这些文件。

要运行 test 脚本，请键入以下命令：

npm test

运行此脚本后，您的终端将获得测试套件的输出，并且终端提示符将消失。它看起来像这样：

Output PASS  src/App.test.js
  ✓ renders learn react link (67ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.204s
Ran all test suites.

Watch Usage
 › Press f to run only failed tests.
 › Press o to only run tests related to changed files.
 › Press q to quit watch mode.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press Enter to trigger a test run.

这里有几点需要注意。首先，如前所述，它会自动检测任何带有测试扩展名的文件，包括 .test.js 和 .spec.js。在这种情况下，只有一个 测试套件——即只有一个扩展名为 .test.js 的文件——并且该测试套件只包含一个测试。 Jest 可以检测代码层次结构中的测试，因此您可以将测试嵌套在一个目录中，Jest 会找到它们。

其次，Jest 不会运行您的测试套件一次然后退出。相反，它继续在终端中运行。如果您对源代码进行任何更改，它将再次重新运行测试。

您还可以使用键盘选项之一来限制您运行的测试。例如，如果您键入 o，您将只对已更改的文件运行测试。随着测试套件的增长，这可以为您节省大量时间。

最后，您可以通过键入 q 退出测试运行程序。现在执行此操作以重新获得命令提示符。

`eject` 脚本

最终的脚本是 npm eject。此脚本将您的依赖项和配置文件复制到您的项目中，让您完全控制您的代码，但将项目从 Create React App 集成工具链中弹出。你现在不会运行它，因为一旦你运行了这个脚本，你就不能撤消这个操作，你将失去任何未来的 Create React App 更新。

Create React App 的价值在于您不必担心大量的配置。构建现代 JavaScript 应用程序需要大量工具，从构建系统（例如 Webpack）到编译工具（例如 Babel）。 Create React App 为您处理所有配置，因此弹出意味着您自己处理这种复杂性。

Create React App 的缺点是您将无法完全自定义项目。对于大多数项目来说，这不是问题，但是如果您想控制构建过程的所有方面，则需要弹出代码。但是，如前所述，一旦您弹出代码，您将无法更新到 Create React App 的新版本，您必须自己手动添加任何增强功能。

此时，您已执行脚本来构建和测试代码。在下一步中，您将在实时服务器上启动项目。

第 3 步 — 启动服务器

在此步骤中，您将初始化本地服务器并在浏览器中运行项目。

您使用另一个 npm 脚本开始您的项目。与 npm test 一样，此脚本不需要 run 命令。当您运行脚本时，您将启动一个本地服务器，执行项目代码，启动一个监听代码更改的监视器，并在 Web 浏览器中打开项目。

通过在项目的根目录中键入以下命令来启动项目。对于本教程，项目的根目录是 digital-ocean-tutorial 目录。请务必在单独的终端或选项卡中打开它，因为只要您允许，此脚本就会继续运行：

npm start

在服务器启动之前，您会在短时间内看到一些占位符文本，并给出以下输出：

OutputCompiled successfully!

You can now view digital-ocean-tutorial in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

如果您在本地运行脚本，它将在您的浏览器窗口中打开项目并将焦点从终端转移到浏览器。

如果这没有发生，您可以访问 http://localhost:3000/ 以查看该站点的运行情况。如果您已经碰巧在端口 3000 上运行了另一台服务器，那很好。 Create React App 将检测下一个可用端口并使用它运行服务器。换句话说，如果您已经有一个项目在端口 3000 上运行，那么这个新项目将在端口 3001 上启动。

如果您从远程服务器运行它，您仍然可以在没有任何额外配置的情况下看到您的站点。地址将是 http://your_server_ip:3000。如果您配置了防火墙，则需要打开远程服务器上的端口。

在浏览器中，您将看到以下 React 模板项目：

只要脚本正在运行，您就会拥有一个活动的本地服务器。要停止脚本，请关闭终端窗口或选项卡，或者在运行脚本的终端窗口或选项卡中键入 CTRL+C 或 ⌘-+c。

此时，您已经启动了服务器并正在运行您的第一个 React 代码。但在对 React JavaScript 代码进行任何更改之前，您将首先看到 React 如何呈现到页面。

第 4 步 — 修改主页

在此步骤中，您将修改 public/ 目录中的代码。 public 目录包含您的基本 HTML 页面。这是将作为您的项目的根的页面。以后你将很少编辑这个目录，但它是项目开始的基础，也是 React 项目的关键部分。

如果您取消了服务器，请继续使用 npm start 重新启动它，然后在新的终端窗口中在您最喜欢的文本编辑器中打开 public/：

nano public/

或者，您可以使用 ls 命令列出文件：

ls public/

您将看到如下文件列表：

Outputfavicon.ico
logo192.png
manifest.json
index.html
logo512.png
robots.txt

favicon.ico、logo192.png 和 logo512.png 是用户可以在浏览器选项卡或手机上看到的图标。浏览器将选择适当大小的图标。最终，您会希望用更适合您项目的图标替换这些图标。现在，您可以不理会它们。

manifest.json 是一组结构化的元数据，用于描述您的项目。除其他外，它列出了将用于不同尺寸选项的图标。

robots.txt 文件是网络爬虫的信息。它告诉爬虫他们允许或不允许索引哪些页面。除非有令人信服的理由，否则您无需更改任何一个文件。例如，如果您想为某些用户提供一个您不希望轻松访问的特殊内容的 URL，您可以将其添加到 robots.txt，它仍然是公开可用的，但不会被搜索引擎索引。

index.html 文件是应用程序的根。这是服务器读取的文件，也是您的浏览器将显示的文件。在文本编辑器中打开它并查看。

如果您从命令行工作，则可以使用以下命令打开它：

nano public/index.html

以下是您将看到的内容：

数字海洋教程/公共/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

该文件很短。 <body>中没有图像或文字。这是因为 React 自己构建了整个 HTML 结构并用 JavaScript 注入它。但是 React 需要知道在哪里注入代码，这就是 index.html 的作用。

在您的文本编辑器中，将 <title> 标签从 React App 更改为 Sandbox：

数字海洋教程/公共/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    ...
    <title>Sandbox</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

保存并退出您的文本编辑器。检查您的浏览器。标题是位于浏览器选项卡上的名称。它会自动更新。如果没有，请刷新页面并注意更改。

现在回到你的文本编辑器。每个 React 项目都从一个根元素开始。一个页面上可以有多个根元素，但至少要有一个。这就是 React 知道将生成的 HTML 代码放在哪里的方式。找到元素 <div id="root">。这是 React 将用于所有未来更新的 div。将 id 从 root 更改为 base：

数字海洋教程/公共/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    ...
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="base"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

保存更改。

您将在浏览器中看到一个错误：

React 正在寻找 id 为 root 的元素。现在它已经消失了，React 无法启动项目。

将名称从 base 改回 root：

数字海洋教程/公共/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    ...
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

保存并退出index.html。

此时，您已经启动了服务器并对根 HTML 页面进行了一些小改动。您尚未更改任何 JavaScript 代码。在下一部分中，您将更新 React JavaScript 代码。

第 5 步 - 修改标题标签和样式

在这一步中，您将对 src/ 目录中的 React 组件进行第一次更改。您将对 CSS 和 JavaScript 代码进行一些小改动，这些代码将使用内置的热重载在您的浏览器中自动更新。

如果您停止了服务器，请务必使用 npm start 重新启动它。现在，花点时间看看 src/ 目录的各个部分。您可以在您喜欢的文本编辑器中打开完整目录，也可以使用以下命令在终端中列出项目：

ls src/

您将在终端或文本编辑器中看到以下文件。

OutputApp.css
App.js
App.test.js
index.css
index.js
logo.svg
serviceWorker.js
setupTests.js

让我们一次一个地浏览这些文件。

一开始您不会花太多时间在 serviceWorker.js 文件上，但是当您开始制作渐进式 Web 应用程序时，它可能很重要。 Service Worker 可以做很多事情，包括推送通知和离线缓存，但现在最好不要管它。

下一个要查看的文件是 setupTests.js 和 App.test.js。这些用于测试文件。事实上，当您在步骤 2 中运行 npm test 时，脚本会运行这些文件。 setupTests.js 文件很短；它只包含一些自定义的 expect 方法。您将在本系列的后续教程中了解更多有关这些内容的信息。

打开App.test.js：

nano src/App.test.js

当你打开它时，你会看到一个基本的测试：

数字海洋教程/src/App.test.js

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  const { getByText } = render(<App />);
  const linkElement = getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

测试在文档中寻找短语 learn react。如果您返回运行项目的浏览器，您将在页面上看到该短语。 React 测试不同于大多数单元测试。由于组件可以包含可视信息（例如标记）以及用于操作数据的逻辑，因此传统的单元测试并不容易工作。 React 测试更接近于功能或集成测试的一种形式。

接下来，您将看到一些样式文件：App.css、index.css 和 logo.svg。在 React 中有多种使用样式的方法，但最简单的是编写纯 CSS，因为这不需要额外的配置。

有多个 CSS 文件，因为您可以将样式导入组件，就像它们是另一个 JavaScript 文件一样。由于您有权将 CSS 直接导入到组件中，因此您不妨将 CSS 拆分为仅应用于单个组件。你正在做的是分离关注点。您没有将所有 CSS 与 JavaScript 分开。相反，您将所有相关的 CSS、JavaScript、标记和图像组合在一起。

在文本编辑器中打开 App.css。如果您从命令行工作，则可以使用以下命令打开它：

nano src/App.css

这是您将看到的代码：

数字海洋教程/src/App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这是一个没有特殊 CSS 预处理器的标准 CSS 文件。如果需要，您可以稍后添加它们，但一开始，您只有纯 CSS。 Create React App 试图在提供开箱即用的环境的同时保持冷静。

回到 App.css，使用 Create React App 的好处之一是它监视所有文件，因此如果您进行更改，您将在浏览器中看到它而无需重新加载。

要查看实际情况，请对 App.css 中的 background-color 进行小改动。将其从 #282c34 更改为 blue 然后保存文件。最终样式将如下所示：

数字海洋教程/src/App.css

.App {
  text-align: center;
}
...
.App-header {
  background-color: blue
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}
...

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

检查您的浏览器。这是它以前的样子：

以下是更改后的外观：

继续将 background-color 改回 #282c34。

数字海洋教程/src/App.css

.App {
  text-align: center;

...

.App-header {
  background-color: #282c34
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

...

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

保存并退出文件。

你做了一个小的 CSS 更改。现在是时候对 React JavaScript 代码进行更改了。首先打开 index.js。

nano src/index.js

以下是您将看到的内容：

数字海洋教程/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

在顶部，您正在导入 React、ReactDOM、index.css、App 和 serviceWorker。通过导入 React，您实际上是在拉入代码以将 JSX 转换为 JavaScript。 JSX 是类似 HTML 的元素。例如，请注意当您使用 App 时，您将其视为 HTML 元素 <App />。您将在本系列的后续教程中对此进行更多探索。

ReactDOM 是将您的 React 代码连接到基本元素的代码，例如您在 public/ 中看到的 index.html 页面。查看以下突出显示的行：

数字海洋教程/src/index.js

...
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
...
serviceWorker.unregister();

此代码指示 React 查找具有 root 的 id 的元素并在那里注入 React 代码。 <App/> 是你的根元素，一切都会从那里分支。这是所有未来 React 代码的起点。

在文件的顶部，您会看到一些导入。您导入 index.css，但实际上并没有对它做任何事情。通过导入它，您通过 React 脚本告诉 Webpack 将该 CSS 代码包含在最终编译的包中。如果您不导入它，它将不会显示。

从 src/index.js 退出。

此时，您仍然没有看到您在浏览器中查看的任何内容。要查看此内容，请打开 App.js：

nano src/App.js

此文件中的代码看起来像一系列常规 HTML 元素。以下是您将看到的内容：

数字海洋教程/src/App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

将 <p> 标签的内容从 Edit <code>src/App.js</code> and save to reload. 更改为 Hello, world 并保存更改。

数字海洋教程/src/App.js

...

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
            Hello, world
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
...

转到您的浏览器，您会看到更改：

您现在已经对 React 组件进行了第一次更新。

在你走之前，请注意一些其他的事情。在此组件中，您导入 logo.svg 文件并将其分配给变量。然后在 <img> 元素中，将该代码添加为 src。

这里发生了一些事情。查看 img 元素：

数字海洋教程/src/App.js

...
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
            Hello, world
        </p>
...

请注意如何将 logo 传递到花括号中。每当您传递不是字符串或数字的属性时，都需要使用花括号。 React 会将它们视为 JavaScript 而不是字符串。在这种情况下，您实际上并没有导入图像；相反，您正在引用图像。当 Webpack 构建项目时，它将处理图像并将源设置到适当的位置。

退出文本编辑器。

如果您查看浏览器中的 DOM 元素，您会看到它添加了一个路径。如果您使用 Chrome，您可以通过右键单击元素并选择 Inspect 来检查元素。

这是它在浏览器中的外观：

DOM 有这一行：

<img src="/static/media/logo.5d5d9eef.svg" class="App-logo" alt="logo">

您的代码会略有不同，因为徽标会有不同的名称。 Webpack 想要确保图像路径是唯一的。因此，即使您导入同名的图像，它们也会以不同的路径保存。

至此，您已经对 React JavaScript 代码进行了一些小改动。在下一步中，您将使用 build 命令将代码压缩为可以部署到服务器的小文件。

第 6 步 — 构建项目

在这一步中，您将把代码构建成一个可以部署到外部服务器的包。

返回您的终端并构建项目。您之前运行过此命令，但提醒一下，此命令将执行 build 脚本。它将创建一个包含合并和缩小文件的新目录。要执行构建，请从项目的根目录运行以下命令：

npm run build

代码编译时会有延迟，编译完成后，您将拥有一个名为 build/ 的新目录。

在文本编辑器中打开 build/index.html。

nano build/index.html

你会看到这样的东西：

数字海洋教程/构建/index.html

<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><link href="/static/css/main.d1b05096.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,p=r[0],l=r[1],c=r[2],i=0,s=[];i<p.length;i++)a=p[i],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,p=1;p<t.length;p++){var l=t[p];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/";var p=this["webpackJsonpdo-create-react-app"]=this["webpackJsonpdo-create-react-app"]||[],l=p.push.bind(p);p.push=r,p=p.slice();for(var c=0;c<p.length;c++)r(p[c]);var f=l;t()}([])</script><script src="/static/js/2.c0be6967.chunk.js"></script><script src="/static/js/main.bac2dbd2.chunk.js"></script></body></html>

build 目录获取所有代码并将其编译并缩小为最小的可用状态。人类是否可以阅读它并不重要，因为这不是面向公众的代码。像这样缩小将使代码占用更少的空间，同时仍然允许它工作。与 Python 等某些语言不同，空格不会改变计算机解释代码的方式。

结论

在本教程中，您已经创建了您的第一个 React 应用程序，使用 JavaScript 构建工具配置您的项目，而无需深入了解技术细节。这就是 Create React App 的价值所在：您无需了解所有内容即可开始使用。它允许您忽略复杂的构建步骤，因此您可以专注于 React 代码。

您已经学习了启动、测试和构建项目的命令。您将定期使用这些命令，因此请注意以后的教程。最重要的是，您更新了您的第一个 React 组件。

如果您想看到 React 的实际应用，请尝试我们的如何使用 React 教程从 DigitalOcean API 显示数据。

如何使用CreateReactApp设置React项目

介绍

先决条件

第 1 步 — 使用 Create React App 创建一个新项目

第 2 步 — 使用 react-scripts

build 脚本

test 脚本

eject 脚本

第 3 步 — 启动服务器

第 4 步 — 修改主页

第 5 步 - 修改标题标签和样式

第 6 步 — 构建项目

结论

第 2 步 — 使用 `react-scripts`

`build` 脚本

`test` 脚本

`eject` 脚本