React 前端開發

一句話：用組件與 Hooks 組出互動介面，再用 Vite 在幾分鐘內跑起第一個 React 專案。

本課面向初學者與一人公司：先理解概念，再跟著官方教材做小專案。全部內容公開，無需會員。

1. React 基本概念

• 組件（Components）：可重用的 UI 區塊，像函式一樣回傳畫面。
• JSX：在 JavaScript 裡寫類似 HTML 的語法，描述介面結構。
• Hooks：在函式組件中使用狀態與副作用的 API（例如 useState、useEffect）。
• 狀態（State）：組件內部會隨互動改變的資料；狀態更新後 React 會重新渲染畫面。

建議心態：把畫面拆成小組件，資料往下傳（props），互動用狀態管理。

2. 使用 Vite 快速開始

Vite 是現代化前端建置工具，建立 React 專案比舊版 Create React App 更快。

1. 安裝 Node.js（建議 LTS）。
2. 在終端機執行：

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

瀏覽器開啟終端機顯示的本機網址（通常是 http://localhost:5173）即可看到預設頁面。

TypeScript 模板可改用：npm create vite@latest my-react-app -- --template react-ts

3. 基本組件與 useState 範例

以下示範一個計數器：點按鈕會更新狀態並重繪畫面。

import { useState } from 'react';

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

  return (
    <div>
      <p>目前次數：{count}</p>
      <button onClick={() => setCount(count + 1)}>
        加一
      </button>
      <button onClick={() => setCount(0)}>
        重置
      </button>
    </div>
  );
}

export default Counter;

重點說明

• useState(0)：初始值為 0；回傳目前值與更新函式。
• setCount(...)：更新狀態後觸發重新渲染。
• 把 Counter 放進 App.jsx 即可在頁面使用。

5. 學習路徑建議

1. 完成 Vite 專案建立，熟悉開發伺服器與熱更新。
2. 跟著 Quick Start 理解組件、props、state。
3. 做完 井字遊戲教學，練習狀態與事件。
4. 閱讀 Thinking in React，學會把設計稿拆成組件樹。
5. 小專案練習：待辦清單、計數器、簡易表單驗證。
6. 進階方向：React Router、資料抓取、再接後端或部署（Vercel／Netlify）。可搭配一人公司頁的 Full Stack 路徑。

一人公司建議：先做出可部署的 Web／PWA，再視需要加後端 API。