React：
市佔最大的前端框架

為什麼要用 React？

看這個純 JS：

let count = 0;
btn.addEventListener('click', () => {
  count++;
  display.textContent = count;
  badge.textContent = count;
  title.textContent = `你已點 ${count} 次`;
  // 5 個地方要手動同步...
});

每個用到 count 的地方都要記得改。漏一個就 bug。

React 把它變成：

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

  return (
    <>
      <button onClick={() => setCount(count + 1)}>+</button>
      <p>{count}</p>
      <span>{count}</span>
      <h1>你已點 {count} 次</h1>
    </>
  );
}

你只管「資料」，畫面自動跟。這就是 React 的整個哲學。

怎麼開始一個 React 專案

# 用 Vite（最快、最現代）
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

瀏覽器打開 http://localhost:5173 就看到了。

專案結構

my-app/
├── src/
│   ├── App.tsx          ← 主元件
│   ├── main.tsx         ← 進入點
│   └── components/      ← 你的元件
├── public/              ← 靜態資源
├── index.html
└── package.json

JSX：JS 裡寫 HTML

function Hello() {
  const name = '小明';
  return (
    <div className="greeting">
      <h1>哈囉 {name}！</h1>
      <p>今天 {new Date().toLocaleDateString()}</p>
    </div>
  );
}

JSX 跟 HTML 差在哪

• class → className（class 是 JS 關鍵字）
• for → htmlFor
• 屬性用 camelCase：onClick、onChange、tabIndex
• style 是物件：style={{ color: 'red', fontSize: 16 }}
• 單身標籤要自閉合：<img />、<input />
• 必須只有一個 root 元素，多個用 <>...</>

條件與迴圈

{isLoggedIn && <p>歡迎回來</p>}
{user ? <Profile /> : <Login />}

<ul>
  {fruits.map(f => (
    <li key={f.id}>{f.name}</li>
  ))}
</ul>

元件與 Props

元件 = 可重用的 JS 函式，回傳 JSX。

type CardProps = {
  title: string;
  desc: string;
  onClick?: () => void;
};

function Card({ title, desc, onClick }: CardProps) {
  return (
    <div className="card" onClick={onClick}>
      <h3>{title}</h3>
      <p>{desc}</p>
    </div>
  );
}

// 使用
<Card title="標題" desc="描述" onClick={() => alert('hi')} />

children

function Box({ children }: { children: React.ReactNode }) {
  return <div className="box">{children}</div>;
}

<Box>
  <h1>隨便放東西</h1>
  <p>都會放進 box</p>
</Box>

useState：管理狀態

import { useState } from 'react';

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

  return (
    <>
      <p>{count}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>

      <input
        value={name}
        onChange={e => setName(e.target.value)}
      />
    </>
  );
}

更新陣列、物件

const [todos, setTodos] = useState([]);

// 新增
setTodos([...todos, newTodo]);

// 刪除
setTodos(todos.filter(t => t.id !== id));

// 更新某項
setTodos(todos.map(t =>
  t.id === id ? { ...t, done: !t.done } : t
));

useEffect：副作用

進元件後要做的事：發 API、訂閱、定時器。

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(d => { setUser(d); setLoading(false); });
  }, [userId]);  // userId 變才重跑

  if (loading) return <p>載入中...</p>;
  return <h1>{user.name}</h1>;
}

依賴陣列三種寫法

• [] = 只執行一次（mount 時）
• [x] = x 變才執行
• 不寫 = 每次 render 都執行（通常是 bug）

清理

useEffect(() => {
  const id = setInterval(() => tick(), 1000);
  return () => clearInterval(id);  // 元件卸載時清理
}, []);

其他常用 Hook

// useRef：抓 DOM 或存「不觸發 re-render 的值」
const inputRef = useRef(null);
<input ref={inputRef} />
inputRef.current.focus();

// useMemo：快取昂貴計算
const sorted = useMemo(() => items.sort(...), [items]);

// useCallback：快取函式（傳給子元件用）
const handleClick = useCallback(() => doX(id), [id]);

// useContext：跨層分享資料
const ThemeCtx = createContext('light');
<ThemeCtx.Provider value="dark">...</ThemeCtx.Provider>
const theme = useContext(ThemeCtx);

自訂 Hook

// 抽出可重用邏輯
function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved) : initial;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue] as const;
}

// 用
const [theme, setTheme] = useLocalStorage('theme', 'light');

狀態管理選擇

// Zustand 範例（10 行學會）
import { create } from 'zustand';

const useStore = create(set => ({
  count: 0,
  inc: () => set(s => ({ count: s.count + 1 }))
}));

// 任何元件都可以用
const { count, inc } = useStore();