如何使用 Create React App 设置 React 项目

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

介绍

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

过去，启动一个新的 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 并创建本地开发环境中的步骤，或如何在 Ubuntu 18.04 上安装 Node.js 中的使用 PPA安装部分进行操作。
它还有助于对 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已在中实现。还包含一些其他功能，例如离线缓存。更多差异请参阅文档。npmyarnyarn

如果您之前已yarn在系统上安装过，您将看到一个命令列表，yarn例如，yarn start其功能与命令相同。即使您已安装，也npm可以运行命令。如果您愿意，只需在任何后续命令中将其替换为即可。结果将是相同的。npmyarnyarnnpmyarn

现在你的项目已在新目录中设置完毕。切换到新目录：

cd digital-ocean-tutorial

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

第 2 步 - 使用`react-scripts`

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

现在你已经进入了项目目录，可以四处看看。你可以在文本编辑器中打开整个目录，或者如果你在终端上，可以使用以下命令列出所有文件：

ls -a

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

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

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

让我们逐一解释一下：

node_modules/包含应用程序使用的所有外部 JavaScript 库。您很少需要打开它。
该public/目录包含一些基础 HTML、JSON和图像文件。这些是项目的根源。您将有机会在第 4 步中进一步探索它们。
该src/目录包含项目的 React JavaScript 代码。您的大部分工作都将在该目录中进行。您将在步骤 5中详细探索此目录。
该文件包含一些git.gitignore （您的源代码管理工具）会忽略的默认目录和文件，例如目录。被忽略的项目通常是较大的目录或日志文件，这些目录或文件在源代码管理工具中是不需要的。它还会包含一些您将使用某些 React 脚本创建的目录。node_modules
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。

这些脚本按重要性排序。第一个脚本启动本地开发环境；您将在下一步中介绍它。第二个脚本将构建您的项目。您将在步骤 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

Output
build/
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 会为您处理所有配置，因此 ejecting 意味着您需要自己处理这些复杂的配置。

Create React App 的缺点是你无法完全自定义项目。对于大多数项目来说，这不是问题，但如果你想掌控构建过程的各个方面，则需要移除代码。然而，如前所述，移除代码后，你将无法更新到 Create React App 的新版本，你需要手动添加任何增强功能。

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

第3步 - 启动服务器

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

你可以使用另一个脚本来启动项目npm。与类似npm test，此脚本不需要run命令。运行该脚本时，你将启动本地服务器，执行项目代码，启动一个监听代码更改的观察程序，并在 Web 浏览器中打开项目。

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

npm start

在服务器启动之前，您将短暂地看到一些占位符文本，给出以下输出：

Output
Compiled 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/

您将看到如下文件列表：

Output
favicon.ico
logo192.png
manifest.json
index.html
logo512.png
robots.txt

favicon.ico、logo192.png和logo512.png是用户在浏览器标签页或手机上看到的图标。浏览器会选择合适大小的图标。最终，您需要用更适合您项目的图标替换这些图标。目前，您可以先保留它们。

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

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

该index.html文件是你应用程序的根目录。服务器会读取它，浏览器也会显示它。用文本编辑器打开它并查看。

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

nano public/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：

<!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">。这是divReact 将来所有更新都会使用的。将更改id为：rootbase

<!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 正在寻找带有idof 的元素root。现在它消失了，React 无法启动项目。

将名称从改base回root：

<!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/

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

Output
App.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。这些文件用于测试。实际上，当您npm test在步骤 2 中运行时，脚本运行了这些文件。该setupTests.js文件很短；它只包含一些自定义expect方法。您将在本系列的后续教程中了解有关这些文件的更多信息。

打开App.test.js：

nano 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

这是您将看到的代码：

.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 的好处之一是它会监视所有文件，因此如果您进行了更改，您将在浏览器中看到它而无需重新加载。

要查看实际效果，请对background-color中的稍作修改App.css。将其从更改#282c34为blue然后保存文件。最终样式将如下所示：

.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。

.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

您将看到以下内容：

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 代码连接到基础元素的代码，就像index.html你在中看到的页面一样public/。请看下面突出显示的行：

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

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

id这段代码指示 React 查找带有of 的元素root，并将 React 代码注入到那里。<App/>这是你的根元素，所有内容都将从那里分支。这是所有未来 React 代码的起点。

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

退出src/index.js。

到目前为止，您还没有在浏览器中看到任何内容。要查看这些内容，请打开App.js：

nano src/App.js

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

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并保存更改。

...

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元素：

...
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 浏览器，你可以通过右键单击该元素并选择“检查”来检查它。

它在浏览器中的显示效果如下：

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

你会看到类似这样的内容：

<!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>

构建目录会将所有代码编译并压缩成最小的可用状态。由于这不是面向公众的代码，因此人类是否能读懂并不重要。像这样压缩可以减少代码占用的空间，同时仍然保证其正常运行。与 Python 等某些语言不同，空格不会改变计算机对代码的解释方式。

结论

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

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

如果您想了解 React 的实际应用，请尝试我们的如何使用 React 教程显示来自 DigitalOcean API 的数据。

文章来源：https://dev.to/digitalocean/how-to-set-up-a-react-project-with-create-react-app-4b2g

如何使用 Create React App 设置 React 项目

如何使用 Create React App 设置 React 项目

介绍

先决条件

步骤 1 — 使用 Create React App 创建新项目

第 2 步 - 使用react-scripts

剧本build​

剧本test​

剧本eject​

第3步 - 启动服务器

第 4 步 - 修改主页

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

第 6 步 - 构建项目

结论

第 2 步 - 使用`react-scripts`

剧本`build`

剧本`test`

剧本`eject`