從頭開始建立 React 專案

7 分鐘

在本課程模組中，我們已使用入門專案來快速啟動並執行。此設定可讓我們專注於 React，以及一些新的語法。您可以自由地將入門專案用於您自己的工作。

您可能會想要嘗試從頭開始建置專案。若要從空白資料夾開始，請遵循本單元中的步驟。這些步驟會使用 Snowpack，就像在入門專案中一樣。

此單元是選用的。如果您不需要建立自己的專案，請繼續下一個單元。

了解專案結構

我們的核心設定有兩個儲存程式碼的主要資料夾：

public
- 包含任何 HTML、CSS、影像或其他靜態檔案
- 儲存我們的 index.html 和 index.css 檔案
src
- 包含需要轉譯的任何檔案
- 儲存所有 .jsx 檔案

我們也會建立兩個檔案來設定應用程式：

package.json：包含應用程式的套件和指令碼清單
snowpack.config.js：包含 Snowpack 的設定選項

我們的應用程式需要三個主要套件：

Snowpack：用來將 JSX 轉譯為 HTML 和 JavaScript
React：用來建立元件
React-DOM：用來裝載應用程式

建立初始結構

在空白目錄中，從使用 npm 安裝必要元件開始。然後，設定 Snowpack，並將指令碼新增至 package.js 檔案。

開啟終端機或命令視窗。然後，執行下列命令，為 npm 建立目錄及 package.js 檔案。在 Mac 或 Linux 上，使用 mkdir，而在 Windows 上，使用 md 來建立目錄。

# Windows
md react-recipes && cd react-recipes
md src
md public
touch package.json
echo "{}" > package.json

# Linux or macOS
mkdir react-recipes && cd react-recipes
mkdir src
mkdir public
touch package.json
echo "{}" > package.json

在相同的終端機或命令視窗中執行下列程式碼。
```
npm install --save-dev snowpack
npm install react react-dom
```
注意

Snowpack 是「開發相依性」。亦即，生產並不需要這麼做，因為其會在建置過程中產生必要的 JavaScript 和 HTML 檔案。
執行下列命令，在 Visual Studio Code 中開啟目錄。
```
code .
```

設定 Snowpack

Snowpack 這類工具的其中一個優點，就是其多數是自我設定。不過，我們的確需要指出程式碼的資料夾結構。為了指出資料夾結構，我們會在 snowpack.config.js 檔案中設定選項。

在 Visual Studio Code 中，選取 [檔案] > [新增檔案]。
將檔案命名為 snowpack.config.js。

在新的檔案中，新增下列程式碼。

module.exports = {
    mount: {
        'public': '/',
        'src': '/dist'
    }
}

此程式碼會告訴 Snowpack 使用我們的 public 資料夾，作為應用程式的根目錄。其也會將 src 目錄設定為其所產生 JavaScript 檔案和 HTML 檔案的虛擬位置。

建立 npm 指令碼

為了支援我們的開發工作，我們將使用兩個指令碼搭配 Snowpack。第一個指令碼會啟動開發伺服器。當我們修改應用程式時，此動作會自動重新整理頁面。當準備好要建置所有檔案以進行部署時，就會使用第二個指令碼。

在 Visual Studio Code 中，開啟 package.json 檔案。

在檔案底部的最後一個大括弧 (}) 上方，新增下列程式碼。此程式碼會建立啟動和建置指令碼。

{
    "scripts": {
        "start": "snowpack dev",
        "build": "snowpack build"
    }
}

您的「整個」檔案現在應該看起來像是下列程式碼。

{
  "devDependencies": {
    "snowpack": "^2.18.5"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "scripts": {
      "start": "snowpack dev",
      "build": "snowpack build"
  }
}

請選取 [檔案]>[全部儲存] 以儲存全部檔案。

您現在已設定入門專案！您可以新增 index.html、App.jsx 和其他檔案，就像您在先前的單元中所做的一樣。

繼續

從頭開始建立 React 專案

了解專案結構

建立初始結構

設定 Snowpack

建立 npm 指令碼

意見反應