測驗：用 Vite 建立 React 專案

共 5 題，點選答案後會立即顯示結果

1. 使用 Vite 建立 React + TypeScript 專案時，應該使用哪個指令？

A. npm init react-app my-app --typescript
B. npm create vite@latest my-app -- --template react-ts
C. npx create-react-app my-app --template typescript
D. vite create my-app react-typescript

2. Vite 專案中，程式碼的進入點是哪個檔案？

A. index.html
B. App.tsx
C. main.tsx
D. vite.config.ts

3. HMR（Hot Module Replacement）的主要優點是什麼？

A. 讓專案編譯速度更快
B. 修改程式碼後自動更新畫面，且保留原有狀態
C. 自動修復程式碼中的錯誤
D. 讓打包後的檔案體積更小

4. 在 Vite 專案結構中，`<div id="root"></div>` 的作用是什麼？

A. 存放靜態資源的容器
B. 定義網頁的根目錄路徑
C. 設定 CSS 樣式的作用範圍
D. React 將畫面渲染到這個元素中

5. 執行 `npm run build` 後，Vite 會做什麼？

A. 啟動開發伺服器並開啟瀏覽器
B. 安裝專案所需的所有相依套件
C. 將專案打包成靜態檔案，用於部署到伺服器
D. 檢查程式碼是否有語法錯誤

一句話說明

用一行指令建立 React 專案，開發時修改程式碼馬上看到結果。

前置知識

讀過本系列第 1 篇（了解什麼是 Vite）
已安裝 Node.js（18 以上版本）

最小範例：建立專案

打開終端機，執行這一行：

npm create vite@latest my-app -- --template react-ts
Code language: CSS (css)

這行在幹嘛：

npm create vite@latest – 執行 Vite 的專案建立工具
my-app – 專案資料夾名稱（可以改成你要的名字）
--template react-ts – 使用 React + TypeScript 模板

執行後會看到：

Scaffolding project in /path/to/my-app...

Done. Now run:

  cd my-app
  npm install
  npm run dev

照著做就對了：

cd my-app
npm install
npm run dev

瀏覽器打開 http://localhost:5173，看到 Vite + React 的歡迎畫面就成功了。

專案目錄結構

建立完成後，資料夾長這樣：

my-app/
├── node_modules/      # 套件安裝位置（不用管）
├── public/            # 靜態檔案（favicon 等）
├── src/               # 你的程式碼都放這裡
│   ├── App.tsx        # 主要的 React 元件
│   ├── App.css        # App 元件的樣式
│   ├── main.tsx       # 程式進入點
│   ├── index.css      # 全域樣式
│   └── vite-env.d.ts  # TypeScript 型別定義
├── index.html         # HTML 模板
├── package.json       # 專案設定和相依套件
├── tsconfig.json      # TypeScript 設定
└── vite.config.ts     # Vite 設定
Code language: PHP (php)

必看懂的檔案

1. src/main.tsx – 程式進入點

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
Code language: JavaScript (javascript)

逐行翻譯：

第 1-4 行：引入需要的東西
第 6 行：找到 HTML 裡 id 為 root 的元素，建立 React 根節點
第 7-9 行：把 <App /> 元件渲染到畫面上

2. src/App.tsx – 主元件

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <h1>Vite + React</h1>
      <button onClick={() => setCount((count) => count + 1)}>
        count is {count}
      </button>
    </>
  )
}

export default App
Code language: JavaScript (javascript)

逐行翻譯：

第 1 行：從 React 引入 useState（管理狀態用）
第 5 行：建立一個狀態 count，預設值 0，用 setCount 來更新
第 8-13 行：回傳要顯示的畫面（JSX）
第 10-12 行：按鈕被點擊時，count 加 1

3. index.html – HTML 模板

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
Code language: HTML, XML (xml)

重點：

<div id="root"></div> – React 會把畫面渲染到這裡
<script type="module" src="/src/main.tsx"> – 直接載入 TypeScript 檔案！Vite 會即時轉換

體驗 HMR 熱更新

HMR（Hot Module Replacement）是 Vite 最強大的功能之一。

實驗看看

確保開發伺服器正在跑（npm run dev）
打開 src/App.tsx
把 <h1>Vite + React</h1> 改成 <h1>Hello Vite!</h1>
存檔

馬上看到瀏覽器更新了，不需要手動重新整理！

更神奇的是

點幾下按鈕，讓 count 變成 5
修改 <h1> 的文字，存檔
看！count 還是 5，沒有被重置

這就是 HMR 的威力：只更新你修改的部分，保留其他狀態。

常見指令

# 啟動開發伺服器
npm run dev

# 建置正式版本
npm run build

# 預覽建置結果
npm run preview
Code language: PHP (php)

翻譯：

dev – 開發用，有 HMR，會即時顯示修改
build – 打包成靜態檔案，用於部署到伺服器
preview – 在本地預覽打包後的結果

常見問題

問題 1：模板有哪些選擇？

# React + TypeScript（推薦）
npm create vite@latest my-app -- --template react-ts

# React + JavaScript
npm create vite@latest my-app -- --template react

# 互動式選擇（不指定模板）
npm create vite@latest my-app
Code language: PHP (php)

不指定模板時會出現選單讓你選：

? Select a framework: >> - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    ...
Code language: PHP (php)

問題 2：為什麼是 5173 埠號？

這是 Vite 的預設埠號。如果被占用，Vite 會自動找下一個可用的（5174、5175…）。

想指定埠號可以修改 vite.config.ts：

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,  // 改成你要的埠號
  },
})
Code language: CSS (css)

問題 3：`vite-env.d.ts` 是什麼？

/// <reference types="vite/client" />
Code language: HTML, XML (xml)

一句話：告訴 TypeScript「Vite 提供了哪些特殊功能」，例如引入圖片、CSS 等。不用動它。

Vibe Coder 檢查點

看到 AI 幫你建立 Vite + React 專案時確認：

[ ] 有用 --template react-ts 嗎？（TypeScript 比較安全）
[ ] npm install 跑過了嗎？
[ ] 能成功執行 npm run dev 嗎？
[ ] 修改程式碼後有自動更新嗎？（HMR 正常運作）

小結

這篇你學會了：

用 npm create vite@latest 一行指令建立專案
專案目錄結構：src/ 放程式碼，main.tsx 是進入點，App.tsx 是主元件
HMR 熱更新：改程式碼馬上看到結果，狀態還不會消失

下一篇會介紹 Vite 的設定檔 vite.config.ts，讓你可以自訂更多行為。

進階測驗：用 Vite 建立 React 專案

測驗目標：驗證你是否能在實際情境中應用所學。
共 5 題，包含情境題與錯誤診斷題。

1. 你剛加入一個新專案，需要從零開始建立 React 開發環境情境題

主管要求使用 TypeScript 來確保程式碼品質，而且要用 Vite 作為建構工具。你已經安裝好 Node.js 18，現在要建立名為 dashboard 的專案。

你應該執行哪個指令？

A. npm create vite@latest dashboard，然後在選單中選擇 React 和 TypeScript
B. npx create-react-app dashboard --template typescript
C. npm create vite@latest dashboard -- --template react-ts
D. npm init vite dashboard react-typescript

2. 團隊成員反映開發伺服器的埠號 5173 與其他服務衝突情境題

你們的專案需要同時執行多個微服務，5173 埠號已經被另一個服務佔用。主管希望把 Vite 開發伺服器改到 3000 埠號。

你應該在哪個檔案進行設定？

A. package.json 的 scripts 區塊加上 --port 3000
B. vite.config.ts 中加上 server: { port: 3000 }
C. index.html 的 meta 標籤中設定
D. .env 檔案中設定 PORT=3000

3. 專案完成開發，準備部署到正式環境情境題

你的 React 專案已經開發完成，QA 測試也通過了。現在需要把程式碼打包成靜態檔案，交給 DevOps 團隊部署到 AWS S3。

你應該依序執行哪些指令？

A. npm run dev 然後複製 public 資料夾
B. npm run preview 然後擷取網頁內容
C. npm run build 然後交付 dist 資料夾的內容
D. npm install --production 然後交付整個專案資料夾

4. 新同事照著教學建立專案，但瀏覽器開啟後是空白頁錯誤診斷

小明執行完 npm create vite@latest my-app -- --template react-ts 後，直接執行 cd my-app && npm run dev，開啟瀏覽器卻看到錯誤訊息。

$ npm run dev > [email protected] dev > vite sh: vite: command not found

最可能的原因是什麼？

A. Node.js 版本太舊，需要升級到 18 以上
B. 沒有執行 npm install 安裝相依套件
C. 需要全域安裝 Vite：npm install -g vite
D. --template react-ts 參數寫錯了

5. 同事修改了按鈕文字，但 HMR 沒有正常運作錯誤診斷

小華修改了 App.tsx 中的按鈕文字，存檔後發現瀏覽器沒有自動更新。他說他之前點按鈕把 count 加到 5，現在重新整理後 count 又變回 0 了。

根據描述，最可能的情況是什麼？

A. Vite 的 HMR 功能壞掉了，需要重新安裝
B. TypeScript 編譯失敗導致更新無法生效
C. 瀏覽器快取了舊的 JavaScript 檔案
D. 小華手動重新整理了頁面，所以狀態被重置

【Vite 教學】#02 用 Vite 建立 React 專案

測驗：用 Vite 建立 React 專案

1. 使用 Vite 建立 React + TypeScript 專案時，應該使用哪個指令？

2. Vite 專案中，程式碼的進入點是哪個檔案？

3. HMR（Hot Module Replacement）的主要優點是什麼？

4. 在 Vite 專案結構中，`<div id="root"></div>` 的作用是什麼？

5. 執行 `npm run build` 後，Vite 會做什麼？

一句話說明

前置知識

最小範例：建立專案

專案目錄結構

必看懂的檔案

體驗 HMR 熱更新

實驗看看

更神奇的是

常見指令

常見問題

問題 1：模板有哪些選擇？

問題 2：為什麼是 5173 埠號？

問題 3：`vite-env.d.ts` 是什麼？

Vibe Coder 檢查點

小結

進階測驗：用 Vite 建立 React 專案

1. 你剛加入一個新專案，需要從零開始建立 React 開發環境情境題

2. 團隊成員反映開發伺服器的埠號 5173 與其他服務衝突情境題

3. 專案完成開發，準備部署到正式環境情境題

4. 新同事照著教學建立專案，但瀏覽器開啟後是空白頁錯誤診斷

5. 同事修改了按鈕文字，但 HMR 沒有正常運作錯誤診斷

發佈留言取消回覆

測驗：用 Vite 建立 React 專案

1. 使用 Vite 建立 React + TypeScript 專案時，應該使用哪個指令？

2. Vite 專案中，程式碼的進入點是哪個檔案？

3. HMR（Hot Module Replacement）的主要優點是什麼？

4. 在 Vite 專案結構中，<div id="root"></div> 的作用是什麼？

5. 執行 npm run build 後，Vite 會做什麼？

一句話說明

前置知識

最小範例：建立專案

專案目錄結構

必看懂的檔案

體驗 HMR 熱更新

實驗看看

更神奇的是

常見指令

常見問題

問題 1：模板有哪些選擇？

問題 2：為什麼是 5173 埠號？

問題 3：vite-env.d.ts 是什麼？

Vibe Coder 檢查點

小結

進階測驗：用 Vite 建立 React 專案

1. 你剛加入一個新專案，需要從零開始建立 React 開發環境 情境題

2. 團隊成員反映開發伺服器的埠號 5173 與其他服務衝突 情境題

3. 專案完成開發，準備部署到正式環境 情境題

4. 新同事照著教學建立專案，但瀏覽器開啟後是空白頁 錯誤診斷

5. 同事修改了按鈕文字，但 HMR 沒有正常運作 錯誤診斷

相關文章

【Vite 教學】#04 Vite 生產環境打包與部署

【Vite 教學】#03 Vite 設定檔與環境變數

【Vite 教學】#01 Vite 是什麼？現代前端構建工具入門

發佈留言取消回覆

4. 在 Vite 專案結構中，`<div id="root"></div>` 的作用是什麼？

5. 執行 `npm run build` 後，Vite 會做什麼？

問題 3：`vite-env.d.ts` 是什麼？

1. 你剛加入一個新專案，需要從零開始建立 React 開發環境情境題

2. 團隊成員反映開發伺服器的埠號 5173 與其他服務衝突情境題

3. 專案完成開發，準備部署到正式環境情境題

4. 新同事照著教學建立專案，但瀏覽器開啟後是空白頁錯誤診斷

5. 同事修改了按鈕文字，但 HMR 沒有正常運作錯誤診斷