如何使用 Create React App 設置 React 項目

作者選擇 Creative Commons 來接受捐贈，作為 Write for DOnations 計劃的一部分。

簡介

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 的更多信息 ，看看我們的 How To Use Node.js Modules with npm and package.json 教程。

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 的列表 yarn start 等命令 與 npm 的工作方式相同 命令。你可以運行 npm 即使你有 yarn 的命令 安裝。如果你喜歡 yarn , 只需替換 npm 使用 yarn 在任何未來的命令中。結果將是相同的。

現在您的項目已設置在一個新目錄中。切換到新目錄：

cd digital-ocean-tutorial

您現在位於項目的根目錄中。此時，您已經創建了一個新項目並添加了所有依賴項。但是您還沒有採取任何行動來運行該項目。在下一部分中，您將運行自定義腳本來構建和測試項目。

第二步——使用 react-scripts

在這一步中，您將了解不同的 react-scripts 與 repo 一起安裝的。您將首先運行 test 執行測試代碼的腳本。然後你將運行 build 創建縮小版本的腳本。最後，您將了解 eject 腳本可以讓您完全控制自定義。

現在您在項目目錄中，看看周圍。您可以在文本編輯器中打開整個目錄，或者如果您在終端上，您可以使用以下命令列出文件：

ls -a

-a flag 確保輸出還包括隱藏文件。

無論哪種方式，你都會看到這樣的結構：

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

讓我們一一解釋：

• node_modules/ 包含應用程序使用的所有外部 JavaScript 庫。您很少需要打開它。

• public/ 目錄包含一些基本的 HTML、JSON 和圖像文件。這些是您項目的根源。您將有機會在第 4 步中進一步探索它們。

• src/ 目錄包含項目的 React JavaScript 代碼。您所做的大部分工作都將在該目錄中。您將在第 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 .

這些腳本按重要性順序列出。第一個腳本啟動本地開發環境；您將在下一步中了解這一點。第二個腳本將構建您的項目。您將在第 4 步中詳細探討這一點，但現在值得運行看看會發生什麼。

build 腳本

要運行任何 npm 腳本，您只需要輸入 npm run script_name 在您的終端中。有一些特殊的腳本可以省略 run 命令的一部分，但運行完整的命令總是可以的。運行 build 腳本，在終端中輸入以下內容：

npm run build

您將立即看到以下消息：

Output
> [email protected] 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 script 是不需要 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 的新版本，您必須自己手動添加任何增強功能。

此時，您已執行腳本來構建和測試代碼。在下一步中，您將在實時服務器上啟動項目。

第三步——啟動服務器

在此步驟中，您將初始化本地服務器並在瀏覽器中運行項目。

你用另一個 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 如何呈現到頁面。

第四步——修改主頁

在此步驟中，您將修改 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，你可以將它添加到 robots.txt 並且它仍然是公開的，但不會被搜索引擎索引。

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"> .這是 div React 將用於所有未來的更新。更改 id 來自 root 到 base ：

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

<!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 代碼。

第五步——修改標題標籤和样式

在這一步中，您將對 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();

此代碼指示 React 查找具有 id 的元素 root 並在那裡註入 React 代碼。 <App/> 是你的根元素，一切都會從那里分支。這是所有未來 React 代碼的起點。

在文件的頂部，您會看到一些導入。你導入 index.css ，但實際上不做任何事情。通過導入它，您通過 React 腳本告訴 Webpack 將該 CSS 代碼包含在最終編譯的包中。不導入就不會顯示。

從 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，您可以通過右鍵單擊該元素並選擇 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

你會看到這樣的：

<!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 的數據。