上一個

下一個

建立入門專案

已完成

我們將使用入門專案，以便可以快速地開始撰寫程式碼。 入門包含使用 Snowpack 來開始開發 React 應用程式所需的最小結構：

• 兩個檔案
• 兩個空目錄

複製存放庫和安裝套件

1. 開啟終端或命令視窗，然後執行下列命令：

   # Linux or macOS
   git clone https://github.com/MicrosoftDocs/mslearn-react
   cd mslearn-react/code/0-starter
   
   # Windows
   git clone https://github.com/MicrosoftDocs/mslearn-react
   cd mslearn-react/code/0-starter
   

2. 在同一終端或命令視窗中，使用下列命令來安裝必要的套件：

   npm install
   

3. 執行下列命令，在 Visual Studio Code 中開啟目錄：

   code .
   

探索入門

讓我們探索入門專案中的資料夾和檔案：

• package.json 包含套件和指令碼的清單：
  • 套件：
    • React 代表 React
    • ReactDOM，用來在瀏覽器內裝載我們的應用程式
  • 指令碼:
    • start，用來從 Snowpack 執行開發伺服器：
      • 其會虛擬地建置所有 JavaScript 和 HTML 檔案。
      • 當檔案變更時，其會裝載並自動重新啟動伺服器。
    • build，用來產生用於部署的生產檔案
• snowpack.config.js 包含 Snowpack 的核心設定。
  • mount 可為我們的 Snowpack 伺服器建立兩個虛擬目錄。
    • public 包含所有靜態檔案 (例如 HTML、CSS 和影像)。 其裝載為 /。
    • src 包含所有 JSX 檔案和相關聯的 React 檔案。 其裝載為 dist。
• public 包含所有靜態檔案。
• src 包含所有 React 檔案。

繼續