⚛️ 什麼是React？

📖 定義

React是Facebook（Meta）開發的用於建構使用者介面的JavaScript函式庫。它使用基於元件的架構建立可重用的UI，並使用Virtual DOM高效更新畫面。宣告式程式設計簡化了複雜UI的管理。

🎯 簡單類比

樂高積木

React元件 = 樂高積木
├─ 組合小積木
├─ 多次重複使用相同積木
├─ 輕鬆建構複雜結構
└─ 根據需要更換積木

<House>
  <Roof />
  <Wall />
  <Door />
  <Window />
</House>

⚙️ 核心概念

元件結構

// 函式元件（現代方法）
function Welcome({ name }) {
  return <h1>你好，{name}！</h1>;
}

// 使用
<Welcome name="小明" />

狀態管理

import { useState } from 'react';

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

  return (
    <div>
      <p>計數：{count}</p>
      <button onClick={() => setCount(count + 1)}>
        增加
      </button>
    </div>
  );
}

useEffect Hook

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]);  // userId變化時執行

  return <div>{user?.name}</div>;
}

💡 關鍵範例

列表渲染

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: '運動', done: false },
    { id: 2, text: '學習', done: true }
  ]);

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

表單處理

function LoginForm() {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // API呼叫...
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" onChange={handleChange} />
      <input name="password" type="password" onChange={handleChange} />
      <button type="submit">登入</button>
    </form>
  );
}

🤔 常見問題

Q1. 為什麼使用React？

// ❌ Vanilla JS（複雜）
const button = document.createElement('button');
button.addEventListener('click', () => {
  // 手動DOM操作
});

// ✅ React（簡單）
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Q2. 什麼是JSX？

A: JavaScript + XML語法用於React元素：

// JSX
const element = <h1 className="title">你好</h1>;

// 轉換為
React.createElement('h1', { className: 'title' }, '你好');

Q3. 什麼是Hook？

A: 讓函式元件使用狀態和生命週期的函式：

useState    // 狀態管理
useEffect   // 副作用（API呼叫）
useContext  // Context存取
useRef      // DOM存取
useMemo     // 記憶化
useCallback // 函式記憶化

🎬 總結

• 元件: 可重用的UI區塊
• Virtual DOM: 高效更新
• JSX: 直觀語法
• Hook: 強大的函式元件

使用React建構互動式應用程式！ ⚛️