如何使用创建 React 应用程序设置 React 项目

作者选择了 Creative Commons以作为 Write for Donations计划的一部分获得捐赠。

介绍

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

开始一个新的React项目曾经是一个复杂的多步进程,涉及建立一个构建系统,一个代码转换器来将现代语法转换为所有浏览器可读的代码,以及一个基础目录结构,但现在,Create React App包含你需要运行React项目的所有JavaScript包,包括代码转换,基本链接,测试和构建系统。它还包括一个服务器 hot reloading 将更新你的页面,当你进行代码更改。

换句话说,你不必担心配置一个构建系统,如 Webpack。你不需要设置 Babel来转载你的代码,以便跨浏览器可用。

到本教程结束时,您将有一个运行的 React 应用程序,您可以使用作为任何未来的应用程序的基础。您将对 React 代码进行首次更改,更新风格,并运行构建,以创建您的应用程序的完全小型版本。您还将使用一个热重载的服务器,为您提供即时反馈,并将深入探索 React 项目的部分。

前提条件

要遵循本教程,您将需要以下内容:

Node.js版本 10.16.0 安装在您的计算机上. 要在 macOS 或 Ubuntu 18.04 上安装此功能,请遵循如何在 macOS 上安装 Node.js 并创建本地开发环境或 [如何在 Ubuntu 18.04 上安装 Node.js 中的 [How To Install Node.js**]部分的步骤。
它还将有助于您对 JavaScript 的基本理解,您可以在 How To Code in JavaScript series中找到,以及对 HTML 和 CSS 的基本知识。

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

在此步骤中,您将使用 npm包管理器创建一个新的应用程序,以运行远程脚本。

当您安装 Node 时,您还安装了一个名为 npm的包管理应用程序)。 npm 将在您的项目中安装 JavaScript 包,并跟踪有关项目的详细信息。

npm还包括一个名为npx(LINK0)的工具,该工具将运行可执行的包,这意味着您将运行Create React App代码,而不会先下载该项目。

可执行的包将运行创建响应应用的安装到您指定的目录中。它将通过在目录中创建一个新项目开始,在本教程中将被称为数字海洋教程。

要安装基础项目,请运行以下命令:

1npx create-react-app digital-ocean-tutorial

此命令将启动一个构建过程,将下载基础代码以及一系列依赖。

当脚本完成时,你会看到一个成功消息,其中说:

 1[secondary_label Output]
 2...
 3Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
 4Inside that directory, you can run several commands:
 5
 6  npm start
 7    Starts the development server.
 8
 9  npm run build
10    Bundles the app into static files for production.
11
12  npm test
13    Starts the test runner.
14
15  npm run eject
16    Removes this tool and copies build dependencies, configuration files
17    and scripts into the app directory. If you do this, you can’t go back!
18
19We suggest that you begin by typing:
20
21  cd digital-ocean-tutorial
22  npm start
23
24Happy hacking!

your_file_path将是您当前的路径,如果您是 macOS 用户,它将是类似的/Users/your_username;如果您在 Ubuntu 服务器上,它将说出类似的/home/your_username。

您还会看到一个列表的npm命令,允许您运行,构建,启动和测试您的应用程序。

<$>[注] 注: JavaScript 还有另一个名为 yarn的包管理器。它由 Facebook 支持,并且可以做许多与 'npm' 相同的事情。最初, 'yarn' 提供了新的功能,如锁文件,但现在这些功能也在 'npm' 中实现。

如果你以前在你的系统上安装了yarn,你会看到一个列表的yarn命令,如yarn start,这些命令与npm命令相同。即使你安装了yarn,你也可以运行npm命令。如果你更喜欢yarn,那么在任何未来的命令中只需用yarn代替npm。结果将是相同的。

现在您的项目已设置在新目录中. 更改到新目录:

1cd digital-ocean-tutorial

您现在已经进入了项目的根部。在此时,您已经创建了一个新项目并添加了所有依赖性,但您没有采取任何操作来运行该项目。

步骤 2 – 使用`响应脚本`

在此步骤中,您将了解与 repo 一起安装的不同反应脚本。您将首先运行测试脚本来执行测试代码。然后您将运行构建脚本来创建一个小型版本。

现在你在项目目录中,你可以打开整个目录在文本编辑器中,或者如果你在终端,你可以用以下命令列出文件:

1ls -a

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

无论如何,你会看到这样的结构:

1[secondary_label Output]
2node_modules/
3public/
4src/
5.gitignore
6README.md
7package-lock.json
8package.json

让我们一个接一个解释一下:

node_modules/包含应用程序使用的所有外部JavaScript库。你很少需要打开它。
`public/' 目录包含一些基础HTML,JSON,和图像文件. 这些是你项目的根源您将有机会在 [步骤4] (# step-4-% E2%- 80%93- modifying- the homepage) 中更多探索它们。
`src/' 目录中包含您工程的回放JavaScript代码。你所做的大部分工作都会在目录里您可以在 [步骤5] (# step-5-%E2%- 80%- 93- 修改- 标题- tag- and- styling) 中详细探索此目录。
`.gitignore' 文件包含一些默认目录和文件,这些目录和文件git——你的源控件——将会被忽略,例如"node_modules"目录. 被忽略的项目往往是您在源控中不需要的更大的目录或日志文件。它也会包括一些目录,由您与一些反应脚本共同创建.
‘README.md'是一款包含大量关于Create React App的有用信息,例如命令摘要和高级配置的链接. 目前,最好按你的看法离开`README.md'档案。随着项目的进展,您将用关于您的项目的更详细信息替换默认信息。 (英语)

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

最后一个文件是 package.json。它包含有关您的项目的元数据,如标题、版本号码和依赖性。

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

1nano package.json

当你打开文件时,你会看到一个包含所有元数据的 JSON 对象. 如果你看看脚本对象,你会发现四种不同的脚本:开始,构建,测试和排出。

这些脚本以重要性顺序列出。第一个脚本启动了本地开发环境;您将在下一步获得这一点。第二个脚本将构建您的项目。您将在步骤 4中详细探索这一点,但现在值得运行才能看到发生了什么。

《构建》剧本

要运行任何 npm 脚本,您只需要在终端中键入npm run script_name。您可以省略命令的运行部分的几种特殊脚本,但要运行构建脚本,请在终端中键入以下内容:

1npm run build

您将立即看到以下消息:

1[secondary_label Output]
2> [email protected] build your_file_path/digital-ocean-tutorial
3> react-scripts build
4
5Creating an optimized production build...
6...

这会告诉您,Create React App正在将您的代码编译成可用包。

当它完成时,你会看到以下输出:

 1[secondary_label Output]
 2...
 3Compiled successfully.
 4
 5File sizes after gzip:
 6
 7  39.85 KB build/static/js/9999.chunk.js
 8  780 B build/static/js/runtime-main.99999.js
 9  616 B build/static/js/main.9999.chunk.js
10  556 B build/static/css/main.9999.chunk.css
11
12The project was built assuming it is hosted at the server root.
13You can control this with the homepage field in your package.json.
14For example, add this to build it for GitHub Pages:
15
16  "homepage" : "http://myname.github.io/myapp",
17
18The build folder is ready to be deployed.
19You may serve it with a static server:
20
21  serve -s build
22
23Find out more about deployment here:
24
25  bit.ly/CRA-deploy

列出项目内容,你会看到一些新的目录:

1ls -a

1[secondary_label Output]
2build/
3node_modules/
4public/
5src/
6.gitignore
7README.md
8package-lock.json
9package.json

如果你打开了.gitignore 文件,你可能已经注意到 git 忽略了 'build' 目录,因为 'build' 目录只是其他文件的缩小和优化版本,没有必要使用版本控制,因为你总是可以运行 'build' 命令。

《测试》剧本

这个测试脚本是那些不需要运行关键字的特殊脚本之一,但即使你包含它,它也会起始一个名为Jest(https://jestjs.io/)的测试运行程序。

要运行测试脚本,请输入以下命令:

1npm test

运行此脚本后,您的终端将有测试套件的输出,终端提示将消失。

 1[secondary_label Output]
 2 PASS src/App.test.js
 3  ✓ renders learn react link (67ms)
 4
 5Test Suites: 1 passed, 1 total
 6Tests:       1 passed, 1 total
 7Snapshots:   0 total
 8Time:        4.204s
 9Ran all test suites.
10
11Watch Usage
12 › Press f to run only failed tests.
13 › Press o to only run tests related to changed files.
14 › Press q to quit watch mode.
15 › Press p to filter by a filename regex pattern.
16 › Press t to filter by a test name regex pattern.
17 › Press Enter to trigger a test run.

首先,如前所述,它会自动检测具有测试扩展的任何文件,包括 .test.js 和 .spec.js. 在这种情况下,只有一个 test suite - 即只有一个具有 .test.js 扩展的文件 - 并且该测试套件只包含一个测试。

其次,Jest不会一次运行您的测试套件,然后退出,而是继续在终端运行,如果您对源代码进行任何更改,它将重新启动测试。

您也可以使用键盘选项来限制运行哪些测试. 例如,如果您键入o,您只会在已更改的文件上运行测试。

最后,您可以通过键入q来退出测试运行器,现在即可恢复命令提示。

《Eject》剧本

此脚本将您的依赖和配置文件复制到您的项目中,为您提供对您的代码的完全控制,但将该项目从Create React App集成工具链中排除。

构建现代JavaScript应用程序需要大量的工具,从构建系统,如Webpack(https://andsky.com/tech/tutorials/whats-new-in-webpack-4),到构建工具,如Babel(https://babeljs.io/)。

创建反应应用程序的缺点是,您将无法完全定制该项目。对于大多数项目来说,这不是一个问题,但如果您想控制构建过程的所有方面,您将需要驱逐代码。

在此时刻,您已执行脚本来构建和测试您的代码. 在下一步,您将在现场服务器上启动该项目。

步骤 3 – 启动服务器

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

您将使用另一个npm脚本启动您的项目,就像npm test一样,此脚本不需要运行命令。当您运行脚本时,您将启动本地服务器,执行项目代码,启动听取代码更改的观察器,并在 Web 浏览器中打开该项目。

开始项目,键入以下命令在你的项目的根部. 对于这个教程,你的项目的根是数字海洋教程目录. 请确保在一个单独的终端或卡中打开,因为这个脚本将继续运行,只要你允许它:

1npm start

在服务器启动之前,您会看到一些位置保持者文本,提供此输出:

1[secondary_label Output]
2Compiled successfully!
3
4You can now view digital-ocean-tutorial in the browser.
5
6  http://localhost:3000
7
8Note that the development build is not optimized.
9To create a production build, use npm run build.

如果您在本地运行脚本,它会在浏览器窗口打开该项目,并将焦点从终端移动到浏览器。

如果不这样做,你可以访问 http://localhost:3000/ 查看该网站正在运作. 如果你已经有另一个服务器在端口 3000 上运行,那就没问题了. Create React App 会检测到下一个可用的端口并运行该服务器。

如果你正在从远程服务器运行,你仍然可以看到你的网站没有任何额外的配置. 地址将是 http://your_server_ip:3000. 如果你有一个防火墙配置,你需要在你的远程服务器上打开端口(https://andsky.com/tech/tutorials/ufw-essentials-common-firewall-rules-and-commands)。

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

React template project

要停止脚本,要么关闭终端窗口或卡,要么在正在运行你的脚本的终端窗口或卡中键入CTRL+C或-+c。

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

第4步:修改主页

在此步骤中,您将修改公共/目录中的代码。公共目录包含您的基本HTML页面. 这是将作为您的项目的根页面。

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

1nano public/

或者,您可以用ls命令列出文件:

1ls public/

你会看到这样的文件列表:

1[secondary_label Output]
2favicon.ico
3logo192.png
4manifest.json
5index.html
6logo512.png
7robots.txt

favicon.ico、logo192.png和logo512.png是用户在浏览器或手机的标签中看到的图标,浏览器会选择适当大小的图标,最终你会想用更适合你的项目的图标来代替它们。

manifest.json是一个结构化的集合元数据,描述您的项目,其中包括列出哪些图标将用于不同的尺寸选项。

该robots.txt文件是web crawler的信息(https://developer.mozilla.org/en-US/docs/Glossary/Robots.txt)。它告诉浏览器他们被允许索引哪些页面或不被允许索引。除非有强有力的理由,否则您不需要更改任何文件。例如,如果您想给一些用户一个不想要容易访问的特殊内容的URL,您可以将其添加到robots.txt,并且它仍然可供公众使用,但不会被搜索引擎索引。

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

如果您正在从命令行工作,您可以使用以下命令打开它:

1nano public/index.html

这里是你会看到的:

 1[label digital-ocean-tutorial/public/index.html]
 2<!DOCTYPE html>
 3<html lang="en">
 4  <head>
 5    <meta charset="utf-8" />
 6    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 7    <meta name="viewport" content="width=device-width, initial-scale=1" />
 8    <meta name="theme-color" content="#000000" />
 9    <meta
10      name="description"
11      content="Web site created using create-react-app"
12    />
13    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
14    <!--
15      manifest.json provides metadata used when your web app is installed on a
16      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
17    -->
18    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
19    <!--
20      Notice the use of %PUBLIC_URL% in the tags above.
21      It will be replaced with the URL of the `public` folder during the build.
22      Only files inside the `public` folder can be referenced from the HTML.
23
24      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
25      work correctly both with client-side routing and a non-root public URL.
26      Learn how to configure a non-root public URL by running `npm run build`.
27    -->
28    <title>React App</title>
29  </head>
30  <body>
31    <noscript>You need to enable JavaScript to run this app.</noscript>
32    <div id="root"></div>
33    <!--
34      This HTML file is a template.
35      If you open it directly in the browser, you will see an empty page.
36
37      You can add webfonts, meta tags, or analytics to this file.
38      The build step will place the bundled scripts into the <body> tag.
39
40      To begin the development, run `npm start` or `yarn start`.
41      To create a production bundle, use `npm run build` or `yarn build`.
42    -->
43  </body>
44</html>

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

在文本编辑器中,将<title>标签从React App更改为Sandbox:

 1[label digital-ocean-tutorial/public/index.html]
 2<!DOCTYPE html>
 3<html lang="en">
 4  <head>
 5    <meta charset="utf-8" />
 6    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 7    <meta name="viewport" content="width=device-width, initial-scale=1" />
 8    <meta name="theme-color" content="#000000" />
 9    ...
10    <title>Sandbox</title>
11  </head>
12  <body>
13    <noscript>You need to enable JavaScript to run this app.</noscript>
14    <div id="root"></div>
15    <!--
16      This HTML file is a template.
17      If you open it directly in the browser, you will see an empty page.
18
19      You can add webfonts, meta tags, or analytics to this file.
20      The build step will place the bundled scripts into the <body> tag.
21
22      To begin the development, run `npm start` or `yarn start`.
23      To create a production bundle, use `npm run build` or `yarn build`.
24    -->
25  </body>
26</html>

保存和退出您的文本编辑器检查您的浏览器. 标题是位于浏览器卡上的名称. 它将自动更新. 否则,更新页面并注意到变化。

现在回到你的文本编辑器,每个 React 项目都从一个根元素开始,页面上可能有多个根元素,但至少必须有一个。 React 知道如何将生成的 HTML 代码放到哪里。找到元素

。这是 React 将为所有未来的更新使用的div。将id从root更改为base:

 1[label digital-ocean-tutorial/public/index.html]
 2<!DOCTYPE html>
 3<html lang="en">
 4  <head>
 5    <meta charset="utf-8" />
 6    ...
 7  <body>
 8    <noscript>You need to enable JavaScript to run this app.</noscript>
 9    <div id="base"></div>
10    <!--
11      This HTML file is a template.
12      If you open it directly in the browser, you will see an empty page.
13
14      You can add webfonts, meta tags, or analytics to this file.
15      The build step will place the bundled scripts into the <body> tag.
16
17      To begin the development, run `npm start` or `yarn start`.
18      To create a production bundle, use `npm run build` or `yarn build`.
19    -->
20  </body>
21</html>

保存这些变化。

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

Error message saying "Target container is not a DOM element"

React 正在寻找一个具有root的id的元素,现在它已经消失了,React 无法启动该项目。

将名称从基础更改为根:

 1[label digital-ocean-tutorial/public/index.html]
 2<!DOCTYPE html>
 3<html lang="en">
 4  <head>
 5    <meta charset="utf-8" />
 6    ...
 7  <body>
 8    <noscript>You need to enable JavaScript to run this app.</noscript>
 9    <div id="root"></div>
10    <!--
11      This HTML file is a template.
12      If you open it directly in the browser, you will see an empty page.
13
14      You can add webfonts, meta tags, or analytics to this file.
15      The build step will place the bundled scripts into the <body> tag.
16
17      To begin the development, run `npm start` or `yarn start`.
18      To create a production bundle, use `npm run build` or `yarn build`.
19    -->
20  </body>
21</html>

保存和退出index.html。

在此时刻,您已经启动了服务器,并对根 HTML 页面进行了小小的更改. 您尚未更改任何 JavaScript 代码. 在下一节,您将更新 React JavaScript 代码。

步骤 5 – 更改标题标签和风格

在此步骤中,您将对src/目录中的 React 组件进行首次更改,您将对 CSS 和 JavaScript 代码进行小小的更改,这些更改将在您的浏览器中使用内置的 Hot Reload 自动更新。

如果你停止了服务器,请务必用npm start重新启动它. 现在,花一些时间查看src/目录的部分。您可以在您最喜欢的文本编辑器中打开完整目录,或者您可以用以下命令在终端中列出项目:

1ls src/

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

1[secondary_label Output]
2App.css
3App.js
4App.test.js
5index.css
6index.js
7logo.svg
8serviceWorker.js
9setupTests.js

让我们一次次通过这些文件。

起初你不会花很多时间使用 serviceWorker.js 文件,但当你开始创建进步式 Web 应用程序时,这可能很重要。

下一个要查看的文件是setupTests.js和App.test.js。这些文件用于测试文件。事实上,当你在步骤 2中运行npm test时,脚本运行了这些文件。

打开App.test.js:

1nano src/App.test.js

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

 1[label digital-ocean-tutorial/src/App.test.js]
 2import React from 'react';
 3import { render } from '@testing-library/react';
 4import App from './App';
 5
 6test('renders learn react link', () => {
 7  const { getByText } = render(<App />);
 8  const linkElement = getByText(/learn react/i);
 9  expect(linkElement).toBeInTheDocument();
10});

测试正在寻找该文档中的学习反应短语。如果您返回运行项目的浏览器,您将看到页面上的短语。反应测试与大多数单位测试不同。由于组件可以包含视觉信息,如标记,以及操作数据的逻辑,传统单元测试并不容易工作。

接下来,你会看到一些样式文件: App.css, index.css和 logo.svg.在React中有多个方法可以使用样式,但最简单的是写简单的CSS,因为这不需要额外的配置。

有多个CSS文件,因为你可以将风格导入一个组件,就像它们是另一个JavaScript文件一样。由于你有权直接导入CSS到一个组件,你也可以将CSS划分,只适用于一个单独的组件。你正在做的是分离问题。你不会将所有CSS与JavaScript分开。相反,你将所有相关的CSS、JavaScript、标记和图像组合在一起。

在文本编辑器中打开App.css。如果你正在从命令行工作,你可以用以下命令打开它:

1nano src/App.css

这是你会看到的代码:

 1[label digital-ocean-tutorial/src/App.css]
 2.App {
 3  text-align: center;
 4}
 5
 6.App-logo {
 7  height: 40vmin;
 8  pointer-events: none;
 9}
10
11@media (prefers-reduced-motion: no-preference) {
12  .App-logo {
13    animation: App-logo-spin infinite 20s linear;
14  }
15}
16
17.App-header {
18  background-color: #282c34;
19  min-height: 100vh;
20  display: flex;
21  flex-direction: column;
22  align-items: center;
23  justify-content: center;
24  font-size: calc(10px + 2vmin);
25  color: white;
26}
27
28.App-link {
29  color: #61dafb;
30}
31
32@keyframes App-logo-spin {
33  from {
34    transform: rotate(0deg);
35  }
36  to {
37    transform: rotate(360deg);
38  }
39}

这是一个标准的CSS文件,没有特殊的CSS预处理器. 如果你愿意,你可以稍后添加它们,但起初,你只有简单的CSS。

回到App.css,使用Create React App的优点之一是它监控所有文件,所以如果你做出更改,你会在浏览器中看到它而不重新加载。

若要在動作中看到這一點,請在「App.css」中改變「背景顏色」。將它從「#282c34」改為「藍色」,然後儲存檔案。

 1[label digital-ocean-tutorial/src/App.css]
 2.App {
 3  text-align: center;
 4}
 5...
 6.App-header {
 7  background-color: blue
 8  min-height: 100vh;
 9  display: flex;
10  flex-direction: column;
11  align-items: center;
12  justify-content: center;
13  font-size: calc(10px + 2vmin);
14  color: white;
15}
16...
17
18@keyframes App-logo-spin {
19  from {
20    transform: rotate(0deg);
21  }
22  to {
23    transform: rotate(360deg);
24  }
25}

看看你的浏览器,这就是以前的样子:

React app with dark background

以下是它将如何看待变化:

React app with blue background

继续前进并将背景颜色更改为#282c34。

 1[label digital-ocean-tutorial/src/App.css]
 2.App {
 3  text-align: center;
 4
 5...
 6
 7.App-header {
 8  background-color: #282c34
 9  min-height: 100vh;
10  display: flex;
11  flex-direction: column;
12  align-items: center;
13  justify-content: center;
14  font-size: calc(10px + 2vmin);
15  color: white;
16}
17
18...
19
20@keyframes App-logo-spin {
21  from {
22    transform: rotate(0deg);
23  }
24  to {
25    transform: rotate(360deg);
26  }
27}

保存和退出文件。

你已经做了一个小 CSS 更改,现在是时候对 React JavaScript 代码进行更改了。

1nano src/index.js

这里是你会看到的:

 1[label digital-ocean-tutorial/src/index.js]
 2import React from 'react';
 3import ReactDOM from 'react-dom';
 4import './index.css';
 5import App from './App';
 6import * as serviceWorker from './serviceWorker';
 7
 8ReactDOM.render(<App />, document.getElementById('root'));
 9
10// If you want your app to work offline and load faster, you can change
11// unregister() to register() below. Note this comes with some pitfalls.
12// Learn more about service workers: https://bit.ly/CRA-PWA
13serviceWorker.unregister();

在顶部,你正在导入React,ReactDOM,index.css,App和serviceWorker。通过导入React,你实际上正在拖入代码来将JSX转换为JavaScript。 _JSX_是类似HTML的元素。

ReactDOM是将您的React代码连接到基础元素的代码,例如您在public/中看到的index.html页面。

1[label digital-ocean-tutorial/src/index.js]
2...
3import * as serviceWorker from './serviceWorker';
4
5ReactDOM.render(<App />, document.getElementById('root'));
6...
7serviceWorker.unregister();

此代码指示 React 找到一个具有root的id元素,然后在那里注入 React 代码。

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

输出src/index.js字段。

此时此刻,您仍未在浏览器中看到任何您正在浏览的内容. 若要查看此信息,请打开App.js:

1nano src/App.js

此文件中的代码将看起来像一系列常规的HTML元素。

 1[label digital-ocean-tutorial/src/App.js]
 2import React from 'react';
 3import logo from './logo.svg';
 4import './App.css';
 5
 6function App() {
 7  return (
 8    <div className="App">
 9      <header className="App-header">
10        <img src={logo} className="App-logo" alt="logo" />
11        <p>
12          Edit <code>src/App.js</code> and save to reload.
13        </p>
14        <a
15          className="App-link"
16          href="https://reactjs.org"
17          target="_blank"
18          rel="noopener noreferrer"
19        >
20          Learn React
21        </a>
22      </header>
23    </div>
24  );
25}
26
27export default App;

从编辑 <code>src/App.js</code>更改<p>标签的内容,然后将其保存为重新加载。

 1[label digital-ocean-tutorial/src/App.js]
 2...
 3
 4function App() {
 5  return (
 6    <div className="App">
 7      <header className="App-header">
 8        <img src={logo} className="App-logo" alt="logo" />
 9        <p>
10            Hello, world
11        </p>
12        <a
13          className="App-link"
14          href="https://reactjs.org"
15          target="_blank"
16          rel="noopener noreferrer"
17        >
18          Learn React
19        </a>
20      </header>
21    </div>
22  );
23}
24...

转到你的浏览器,你会看到变化:

React app with "Hello, world" in paragraph tag

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

在你進去之前,請注意一些其他的事情. 在這個組件中,你輸入「logo.svg」檔案並將其分配到變數中.然後在「」元素中,你將該代碼添加為「src」。

这里发生了一些事情,看看img元素:

 1[label digital-ocean-tutorial/src/App.js]
 2...
 3function App() {
 4  return (
 5    <div className="App">
 6      <header className="App-header">
 7        <img src={logo} className="App-logo" alt="logo" />
 8        <p>
 9            Hello, world
10        </p>
11...

注意如何将logo传递到弯曲的字符串中。每当你传递不是字符串或数字的属性时,你需要使用弯曲的字符串。 React 会将这些作为 JavaScript 而不是字符串来处理。在这种情况下,你实际上不会导入图像;相反,你正在引用图像。当 Webpack 构建该项目时,它将处理图像并将来源设置到适当的位置。

离开文本编辑器。

如果您正在使用 Chrome,您可以通过右键单击该元素检查该元素并选择 Inspect。

以下是它将在浏览器中看起来像这样:

Inspecting element with chrome dev tools

DOM有这条线:

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

您的代码将略有不同,因为标志将有不同的名称. Webpack 希望确保图像路径是独一无二的.因此,即使您导入具有相同名称的图像,它们也将以不同的路径保存。

在此时刻,您已经对 React JavaScript 代码做了一些小改变,在下一步,您将使用构建命令将代码缩小为一个可以部署到服务器的小文件。

步骤6 - 构建项目

在此步骤中,您将构建代码为可部署到外部服务器的包。

返回您的终端并构建项目. 您以前运行过此命令,但作为提醒,此命令将执行构建脚本. 它将创建一个新的目录,包含组合和缩小文件。

1npm run build

当代码编译时会出现延迟,当它完成时,您将有一个名为构建/的新目录。

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

1nano build/index.html

你会看到这样的东西:

1[label digital-ocean-tutorial/build/index.html]
2<!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>

构建目录会收集您的所有代码,并将其编译成最小的可用状态,无论人类是否能够读取它,因为这不是一个面向公众的代码。

结论

在本教程中,您创建了您的第一个React应用程序,使用JavaScript构建工具来配置您的项目,而无需进入技术细节。

您已经学会了启动、测试和构建项目的命令,您将定期使用这些命令,因此请注意未来的教程。

如果您想看到 React 在行动中,请尝试我们的如何使用 React 显示来自 DigitalOcean API 的数据教程。