使用 Create React App 建立 React 專案

React 是最受歡迎的 JavaScript 函式庫之一，用於開發前端應用程式。它是一個最初由 Facebook 開發的開源函式庫。React 很快就因能建立快速的應用程式而變得流行，並搭配 JSX – 一種將 JavaScript 與類似 HTML 語法相結合的程式設計範式。

以前，設定 React 專案是一個複雜的過程。它需要手動設定以下元件：

• 建置系統
• 程式碼轉譯器（將現代語法轉換為瀏覽器可讀的程式碼）
• 專案的基本目錄結構

幸好，那些日子已經過去了，這要歸功於 Create React App。它是一個非常棒的工具，可以自動執行所有這些步驟。Create React App 負責處理程式碼轉譯、Linter 檢查、測試和建置系統。此外，它還配備了一個支援熱重載（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 ，其中儲存了關於專案的所有中介資料（metadata）以及額外的 Node.js 依賴模組。JSON 是一種基於 JavaScript 物件的標準資料共享格式。如果您想了解更多關於 JSON 的資訊，請參考 this guide 這裡。

首先，建立一個專用目錄：

接下來，我們將指示 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-腳本，這些是在安裝過程中安裝的。

• • 我們將執行 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 執行的腳本之一。然而，加上 run 參數也同樣能正常運作。執行時，此腳本將啟動一個名為 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：啟動伺服器

現在，我們將啟動本機伺服器並在網頁瀏覽器上執行專案。要啟動伺服器，我們有另一個腳本可用。執行它不需要 npm run 指令。執行時，該腳本會啟動本機伺服器、執行專案程式碼、啟動監聽器並監聽程式碼變更。變更會直接顯示在瀏覽器上。以下指令將啟動伺服器：

輸出將顯示在瀏覽器中造訪該專案的 URL。它還會顯示有關執行中專案的各種資訊。在瀏覽器中開啟該 URL：

如輸出所示，Create React App 使用連接埠 3000 來提供專案服務。如果該連接埠已被使用，Create React App 將使用下一個可用連接埠。如果您設定了防火牆，則它必須允許流量通過連接埠 3000 （或 Create React App 回報的連接埠）。您可以由此處深入了解 管理 UFW 防火牆.

要退出伺服器，請在終端機視窗中按 Ctrl+C 。它將終止執行中的程序（伺服器執行個體）。

步驟 5：修改首頁

接下來，我們將學習如何修改儲存在 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> 修改為 我的 React 應用程式:

然後，儲存檔案並關閉編輯器。現在，在瀏覽器中查看網頁：

如您所見，分頁的標題已變更為 我的 React 應用程式。如果它沒有自動變更，請按下 F5 或 Ctrl+R.

讓我們回到文字編輯器。所有 React 專案都必須從一個根元素開始。單一頁面上可以有多個根元素。然而，至少必須有一個。它會告訴 React 要將所有產生的 HTML 程式碼放在哪裡。在我們的 index.html 中，尋找元素 <div id="root"> 的位置。這就是 <div>，React 將使用它來進行未來的變更。嘗試將 id 值從 root 變更為 base:

 

 

之後，在瀏覽器上重新載入頁面。它將不會顯示任何內容。正如 Firefox 的 網頁開發者工具 所顯示的，它拋出了一個錯誤：

回到文字編輯器，並將 id 的值改回 root:

步驟 6：標題標籤與樣式變更

到目前為止，我們已經啟動了本機伺服器，並對根 HTML 檔案進行了微小的變更。現在，我們將處理位於 src/ 目錄中的 React 元件。我們將對 CSS 和 JavaScript 程式碼進行變更。這些變更將透過熱重載（hot reloading）自動套用。

如果伺服器已停止，請使用 npm 啟動它。然後，查看 src/ 目錄的內容：

這裡有多個 JavaScript 和 CSS 檔案。我們將逐一介紹它們。

• ServiceWorker.js

如果您想製作漸進式網頁應用程式（PWA），這是一個重要的檔案。此 Service Worker 提供了各種功能，例如推播通知、離線快取等。目前，我們先保持原樣。

• SetupTests.js and App.test.js

正如這些檔案的命名所示，它們用於測試檔案。每當我們使用 test 腳本時，npm 就會執行這些檔案。檔案 setupTests.js 包含一些自訂的 expect 方法。

讓我們來看看 App.test.js。在文字編輯器中打開它：

它包含一個基本的測試，用於尋找文件中是否存在短語 learn react。如果您已打開瀏覽器分頁，您可以在頁面上看到該短語。與其他單元測試不同，React 測試有所不同。因為元件可能包含視覺資訊（如標記）以及數據處理邏輯，傳統的單元測試不易進行。在這方面，將 React 測試描述為一種功能測試或整合測試會更為貼切。

• CSS Files

有各種樣式檔案可用： 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 程式碼包含到最終編譯的套件（bundle）中。否則，CSS 樣式將不會顯示。

• App.js

接下來，我們來看看 App.js。在文字編輯器中開啟它：

 

讓我們看看修改其內容如何影響我們的專案。修改 <p>標籤的內容：

然後，儲存檔案並在瀏覽器中查看變更：

哇！您已經完成了第一次的 React 元件微調！

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

請注意， logo 是被傳入大括號中。每當傳遞屬性（非字串或數字）時，都必須將它們傳入大括號中。然後，React 會將它們視為 JavaScript 物件，而不是字串。

在這種情況下，應用程式實際上並沒有匯入圖片。相反地，它是對圖片的引用。當 Webpack 建置專案時，它會將圖片放在適當的位置。我們可以在瀏覽器中進行驗證。開啟 Firefox 中的 Web Developer Tools ：

Webpack 想要為所有圖片分配唯一的檔案路徑。因此，即使匯入的圖片名稱相同，它們也會有不同的路徑。

步驟 7：專案建置

在此步驟中，我們將學習如何將專案編譯為可部署的套件。啟動終端機並執行專案的 build 腳本：

編譯器將建立專屬目錄 build/並將輸出放在該處。要查看編譯過程的作用，請開啟 index.html 檔案，其位於 build/目錄：

如您所見，所有程式碼都被編譯並縮減（minify）到最小的可用狀態。由於這不是面向大眾的程式碼，因此不需要考慮可讀性。縮減後的程式碼佔用較少空間，同時保留其所有功能。與空白字元非常重要的語言（例如 Python）不同，網頁語言（HTML、CSS 和 JavaScript）不需要適當的間距即可讓瀏覽器進行解析。

結語

在本指南中，我們成功演示了如何建立 React 應用程式。我們還展示了使用 JavaScript 建置工具進行的一些基本設定，而無需複雜的技術細節。這就是 Create React App 所提供之核心價值。您不需要了解所有內容即可開始使用 React。您可以不用學習複雜的建置步驟，而專注於 React 程式碼本身。

在這裡，我們也演示了如何啟動、測試和建置 React 專案。這些指令對於各種規模的專案都至關重要。

祝您開發愉快！