測驗：React 是什麼？用 AI 加速學習的正確姿勢

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

1. React 的核心概念是什麼？

A. 用 HTML 直接寫網頁，不需要 JavaScript
B. 用 JavaScript 寫可重複使用的 UI 元件
C. 用 CSS 控制所有的頁面邏輯
D. 用 Python 後端渲染網頁

2. 在 JSX 中，如何顯示 JavaScript 變數的值？

const name = “Vibe Coder”
// 如何在 JSX 中顯示 name？

A. 直接寫 name
B. 用 (name) 包起來
C. 用 {name} 包起來
D. 用 [name] 包起來

3. 使用 Vite 建立 React 專案後，啟動開發伺服器的指令是什麼？

A. npm start
B. npm run dev
C. npm run build
D. npm serve

4. 關於 Vibe Coder 的學習方式，下列何者正確？

A. 必須先背熟所有語法才能開始寫程式
B. 從頭開始自己打字，不要依賴 AI
C. 追求記住所有 API 的用法
D. 先讓 AI 寫，看不懂再學，遇到時認得出來就好

5. 在 React 專案中，主要的程式碼修改應該從哪個檔案開始？

my-react-app/
├── src/
│   ├── App.jsx
│   ├── App.css
│   ├── main.jsx
│   └── index.css

A. App.jsx – 主要元件
B. main.jsx – 進入點
C. index.css – 全域樣式
D. App.css – 樣式檔

一句話說明

React 是用 JavaScript 寫出可重複使用的 UI 元件的框架。

為什麼要學 React？

當你請 AI 幫你寫前端程式，有很高機率會看到這樣的代碼：

function App() {
  return <h1>Hello World</h1>;
}
Code language: JavaScript (javascript)

這不是 HTML，也不是純 JavaScript——這是 JSX，React 的語法。

React 之所以流行，是因為它解決了一個核心問題：UI 很複雜，但用元件拆開就簡單了。

想像你要做一個購物網站，傳統做法是把所有 HTML 堆在一起。React 的做法是：

<ShoppingCart>
  <ProductCard product={shirt} />
  <ProductCard product={pants} />
</ShoppingCart>
Code language: HTML, XML (xml)

翻譯：「購物車裡面放兩張商品卡片，一個是襯衫，一個是褲子」

每個元件（Component）可以重複使用，這就是 React 的核心思維。

Vibe Coding 學習心法

Vibe Coder 學 React 的方式跟傳統不一樣：

傳統學習	Vibe Coder 學習
先背語法再寫程式	先讓 AI 寫，看不懂再學
從頭開始打字	讀懂 AI 的代碼，改成需要的樣子
追求記住所有 API	知道有什麼功能，用時再問

三個核心原則

1. 不死背

你不需要記住 useState 的完整語法。你只需要知道：

「useState 是用來存資料的，改變時畫面會自動更新」

遇到時認得出來，不會用就問 AI。

2. 多問 AI

看不懂這段代碼？直接貼給 AI 問：

「這段 React 代碼在做什麼？請用白話解釋」

AI 會逐行翻譯給你聽。

3. 快速迭代

改一行 → 看結果 → 再改一行。

React 的開發伺服器會即時更新，你改完存檔，瀏覽器立刻顯示變化。這讓你可以快速實驗、快速學習。

環境設定：三步搞定

需要安裝的東西

Node.js：JavaScript 的執行環境（讓你在電腦上跑 JS）

到 https://nodejs.org 下載 LTS 版本，安裝完畢後確認：

node --version   # 應該顯示 v18 以上
npm --version    # 應該顯示 9 以上
Code language: PHP (php)

建立專案（用 Vite）

Vite 是目前最快的 React 開發工具。一行指令建立專案：

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

這行指令做了什麼：

npm create vite@latest – 用 npm 執行 Vite 的專案建立工具
my-react-app – 專案資料夾名稱
--template react – 使用 React 模板

啟動專案

cd my-react-app    # 進入專案資料夾
npm install        # 安裝依賴套件
npm run dev        # 啟動開發伺服器
Code language: PHP (php)

成功的話會看到：

  VITE v5.x.x  ready in xxx ms

  ➜  Local:   http://localhost:5173/
Code language: JavaScript (javascript)

打開瀏覽器進入 http://localhost:5173，看到 React 的歡迎畫面就成功了！

專案結構導覽

my-react-app/
├── node_modules/    # 套件（不用管）
├── public/          # 靜態檔案
├── src/             # 你的程式碼
│   ├── App.jsx      # 主要元件 ← 從這裡開始改
│   ├── App.css      # 樣式
│   ├── main.jsx     # 進入點（不太需要改）
│   └── index.css    # 全域樣式
├── index.html       # HTML 模板
├── package.json     # 專案設定
└── vite.config.js   # Vite 設定
Code language: PHP (php)

你需要關注的檔案

App.jsx – 主要元件，你大部分的修改都在這裡

function App() {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  )
}

export default App
Code language: JavaScript (javascript)

逐行翻譯：

function App() {            // 定義一個叫 App 的元件
  return (                  // 這個元件會顯示...
    <div>                   // 一個 div
      <h1>Hello World</h1>  // 裡面有標題
    </div>
  )
}

export default App          // 讓其他檔案可以引入這個元件
Code language: JavaScript (javascript)

最小範例：你的第一個修改

打開 src/App.jsx，把內容改成：

function App() {
  const name = "Vibe Coder"

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>歡迎來到 React 的世界</p>
    </div>
  )
}

export default App
Code language: JavaScript (javascript)

存檔後，瀏覽器會自動更新。

這段代碼做了什麼

代碼	翻譯
`const name = "Vibe Coder"`	建立一個變數叫 name
`{name}`	在 JSX 裡顯示變數的值
`<h1>...</h1>`	HTML 標題標籤

JSX 的規則（知道就好）

用 {} 放 JavaScript：{name} 會顯示變數的值
最外層要一個根元素：要用 <div> 或 <> 包起來
class 要寫成 className：<div className="box">

AI 最常這樣用 React

用法 1：條件顯示

function Welcome({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>歡迎回來！</p> : <p>請登入</p>}
    </div>
  )
}
Code language: JavaScript (javascript)

翻譯：「如果已登入，顯示『歡迎回來』，否則顯示『請登入』」

用法 2：列表渲染

function TodoList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  )
}
Code language: JavaScript (javascript)

翻譯：「把 items 陣列的每個元素變成一個 <li>」

用法 3：事件處理

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

  return (
    <button onClick={() => setCount(count + 1)}>
      點擊次數：{count}
    </button>
  )
}
Code language: JavaScript (javascript)

翻譯：「按鈕被點擊時，把 count 加 1，畫面自動更新」

Vibe Coder 檢查點

看到 React 代碼時確認：

[ ] 有沒有 export default？（沒有的話其他檔案引入不了）
[ ] JSX 有沒有用 {} 包住 JavaScript？
[ ] 列表的每個元素有沒有 key？
[ ] 元件名稱是不是大寫開頭？（小寫會被當成 HTML 標籤）

下一步

你現在已經：

知道 React 是什麼（元件化 UI 框架）
會用 Vite 建立 React 專案
能看懂基本的 JSX 語法
知道如何讓 AI 幫你解釋代碼

下一篇我們會深入 React 最重要的概念：元件（Component）與 Props。你會學到如何把 UI 拆成可重複使用的小塊，這是 React 的核心精髓。

延伸：知道就好

這些進階功能遇到再查：

TypeScript 版本：npm create vite@latest my-app -- --template react-ts
嚴格模式：<React.StrictMode> 會在開發時做額外檢查
CSS Modules：讓樣式只作用於單一元件

本篇重點整理

概念	一句話
React	用 JavaScript 寫可重複使用的 UI 元件
JSX	HTML 寫在 JavaScript 裡的語法
Vite	快速建立 React 專案的工具
元件	可重複使用的 UI 區塊
`{}`	在 JSX 裡放 JavaScript 的方式

進階測驗：React 是什麼？用 AI 加速學習的正確姿勢

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

1. 你剛加入一個新專案，打開程式碼看到以下 AI 生成的代碼，想要修改顯示的文字。你應該從哪裡開始？情境題

function Welcome({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>歡迎回來！</p> : <p>請登入</p>}
    </div>
  )
}

A. 直接問同事這段代碼是什麼意思
B. 把代碼貼給 AI，請它用白話解釋，然後找到要修改的文字
C. 先花一週背熟 React 所有語法再來看
D. 刪掉重寫，因為看不懂就不應該用

2. 小明想要建立一個新的 React 專案，執行了以下指令但專案無法正常啟動。最可能的原因是什麼？錯誤診斷

$ npm create vite@latest my-app — –template react
$ cd my-app
$ npm run dev
npm ERR! Missing script: “dev”

A. Node.js 版本太舊，需要更新到 v18 以上
B. Vite 安裝失敗，需要重新執行 npm create
C. 忘記執行 npm install 安裝依賴套件
D. React 模板有問題，應該改用 react-ts 模板

3. 你正在開發一個購物網站，需要顯示商品列表。根據 React 的元件化思維，下列哪種做法最佳？情境題

A. 把所有商品的 HTML 直接寫在一個大檔案裡
B. 建立一個 ProductCard 元件，用 props 傳入不同商品資料來重複使用
C. 為每個商品建立獨立的 HTML 檔案
D. 用 CSS 隱藏不需要的商品

4. 小華寫了以下代碼，但畫面沒有顯示列表項目，而是報錯。問題出在哪裡？錯誤診斷

function TodoList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li>{item.text}</li>
      ))}
    </ul>
  )
}

A. items 應該用 forEach 而不是 map
B. 箭頭函數的括號應該改成大括號
C. ul 標籤應該改成 ol 標籤
D. 列表的每個 li 元素缺少 key 屬性

5. 你想讓按鈕被點擊時更新畫面上的數字。根據文章內容，下列哪個做法能讓畫面自動更新？情境題

// 目標：點擊按鈕時，count 從 0 變成 1，畫面自動更新

A. 用 let count = 0，然後在 onClick 裡寫 count = count + 1
B. 用 document.getElementById 取得元素後修改 innerHTML
C. 用 useState 存資料，呼叫 setCount 時畫面會自動更新
D. 每次點擊都重新載入整個頁面

【Vibe Coder 的 React 教學】#01 React 是什麼？用 AI 加速學習的正確姿勢

測驗：React 是什麼？用 AI 加速學習的正確姿勢

1. React 的核心概念是什麼？

2. 在 JSX 中，如何顯示 JavaScript 變數的值？

3. 使用 Vite 建立 React 專案後，啟動開發伺服器的指令是什麼？

4. 關於 Vibe Coder 的學習方式，下列何者正確？

5. 在 React 專案中，主要的程式碼修改應該從哪個檔案開始？

一句話說明

為什麼要學 React？

Vibe Coding 學習心法

三個核心原則

環境設定：三步搞定

需要安裝的東西

建立專案（用 Vite）

啟動專案

專案結構導覽

你需要關注的檔案

最小範例：你的第一個修改

這段代碼做了什麼

JSX 的規則（知道就好）

AI 最常這樣用 React

用法 1：條件顯示

用法 2：列表渲染

用法 3：事件處理

Vibe Coder 檢查點

下一步

延伸：知道就好

本篇重點整理

進階測驗：React 是什麼？用 AI 加速學習的正確姿勢

1. 你剛加入一個新專案，打開程式碼看到以下 AI 生成的代碼，想要修改顯示的文字。你應該從哪裡開始？情境題

2. 小明想要建立一個新的 React 專案，執行了以下指令但專案無法正常啟動。最可能的原因是什麼？錯誤診斷

3. 你正在開發一個購物網站，需要顯示商品列表。根據 React 的元件化思維，下列哪種做法最佳？情境題

4. 小華寫了以下代碼，但畫面沒有顯示列表項目，而是報錯。問題出在哪裡？錯誤診斷

5. 你想讓按鈕被點擊時更新畫面上的數字。根據文章內容，下列哪個做法能讓畫面自動更新？情境題

發佈留言取消回覆

測驗：React 是什麼？用 AI 加速學習的正確姿勢

1. React 的核心概念是什麼？

2. 在 JSX 中，如何顯示 JavaScript 變數的值？

3. 使用 Vite 建立 React 專案後，啟動開發伺服器的指令是什麼？

4. 關於 Vibe Coder 的學習方式，下列何者正確？

5. 在 React 專案中，主要的程式碼修改應該從哪個檔案開始？

一句話說明

為什麼要學 React？

Vibe Coding 學習心法

三個核心原則

環境設定：三步搞定

需要安裝的東西

建立專案（用 Vite）

啟動專案

專案結構導覽

你需要關注的檔案

最小範例：你的第一個修改

這段代碼做了什麼

JSX 的規則（知道就好）

AI 最常這樣用 React

用法 1：條件顯示

用法 2：列表渲染

用法 3：事件處理

Vibe Coder 檢查點

下一步

延伸：知道就好

本篇重點整理

進階測驗：React 是什麼？用 AI 加速學習的正確姿勢

1. 你剛加入一個新專案，打開程式碼看到以下 AI 生成的代碼，想要修改顯示的文字。你應該從哪裡開始？ 情境題

2. 小明想要建立一個新的 React 專案，執行了以下指令但專案無法正常啟動。最可能的原因是什麼？ 錯誤診斷

3. 你正在開發一個購物網站，需要顯示商品列表。根據 React 的元件化思維，下列哪種做法最佳？ 情境題

4. 小華寫了以下代碼，但畫面沒有顯示列表項目，而是報錯。問題出在哪裡？ 錯誤診斷

5. 你想讓按鈕被點擊時更新畫面上的數字。根據文章內容，下列哪個做法能讓畫面自動更新？ 情境題

相關文章

【Vibe Coder 的 React 教學】#05 實戰：用 Vibe Coding 打造完整應用

【Vibe Coder 的 React 教學】#04 useEffect 與生命週期：處理副作用

【Vibe Coder 的 React 教學】#03 Props 與 State：資料流的核心概念

發佈留言取消回覆

1. 你剛加入一個新專案，打開程式碼看到以下 AI 生成的代碼，想要修改顯示的文字。你應該從哪裡開始？情境題

2. 小明想要建立一個新的 React 專案，執行了以下指令但專案無法正常啟動。最可能的原因是什麼？錯誤診斷

3. 你正在開發一個購物網站，需要顯示商品列表。根據 React 的元件化思維，下列哪種做法最佳？情境題

4. 小華寫了以下代碼，但畫面沒有顯示列表項目，而是報錯。問題出在哪裡？錯誤診斷

5. 你想讓按鈕被點擊時更新畫面上的數字。根據文章內容，下列哪個做法能讓畫面自動更新？情境題