⚛️ React 入門：元件化思維與 JSX

📌 React 是什麼？

React 是由 Facebook（Meta） 開發並維護的開源 UI 函式庫（Library），用於建構使用者介面。

⚠️ 重點觀念：React 不是原生 JavaScript！ React 是建立在 JavaScript 之上的函式庫，它使用一種叫 JSX 的語法糖。 JSX 看起來像 HTML，但實際上會被編譯（transpile）成 React.createElement() 呼叫。 你寫的 React 程式碼不能直接在瀏覽器中執行，必須經過 Babel 或其他編譯工具轉換。

🔄 JSX 是語法糖，底層是 React.createElement()

// 你寫的 JSX：
const element = <h1 className="title">Hello React</h1>;

// Babel 編譯後的原生 JS：
const element = React.createElement(
  'h1',                          // 標籤名稱
  { className: 'title' },       // 屬性（props）
  'Hello React'                  // 子元素（children）
);

💡 為什麼要知道這個？ 理解 JSX 底層是 React.createElement()，能幫助你除錯、理解 React 的運作機制。 JSX 不是魔法——它只是讓你用更直覺的語法來寫 UI。

🆚 原生 JS DOM 操作 vs React 宣告式寫法

原生 JavaScript（命令式）

// 原生 JS：一步步告訴瀏覽器「怎麼做」
const container = document.getElementById('app');
const h1 = document.createElement('h1');     // 建立元素
h1.textContent = 'Hello World';               // 設定文字
h1.className = 'title';                       // 設定 class
container.appendChild(h1);                     // 加到 DOM

// 更新時要手動操作 DOM
function updateTitle(newText) {
  h1.textContent = newText;  // 直接操作 DOM 節點
}

React（宣告式）

// React：告訴 React「你要什麼」，React 幫你處理 DOM
function App() {
  const [title, setTitle] = useState('Hello World');

  return (
    <div>
      <h1 className="title">{title}</h1>
      <button onClick={() => setTitle('Hello React')}>
        更新標題
      </button>
    </div>
  );
}

📝 差異總結：

• 原生 JS：你要自己操作 DOM（命令式）
• React：你描述 UI 應該長什麼樣子，React 幫你更新 DOM（宣告式）

🧠 虛擬 DOM（Virtual DOM）概念

React 不直接操作真實 DOM，而是維護一個虛擬 DOM（JavaScript 物件樹）。

更新流程：
1. 狀態改變 → React 產生新的虛擬 DOM
2. React 比較新舊虛擬 DOM（Diffing）
3. 只更新真正改變的部分到真實 DOM（Reconciliation）

// 虛擬 DOM 本質上是 JS 物件
const virtualElement = {
  type: 'h1',
  props: {
    className: 'title',
    children: 'Hello React'
  }
};
// React 用這種物件來描述 UI，比直接操作 DOM 更高效

💡 為什麼虛擬 DOM 比較快？ 直接操作真實 DOM 很慢（瀏覽器要重新計算佈局、重繪）。 虛擬 DOM 在記憶體中比較差異，只把「最小改動」套用到真實 DOM。

🛠️ 建立 React 專案

方法一：Vite（推薦）

# 使用 Vite 建立 React + TypeScript 專案
npm create vite@latest my-react-app -- --template react-ts

cd my-react-app
npm install
npm run dev    # 啟動開發伺服器

方法二：Create React App（較舊，不推薦新專案使用）

npx create-react-app my-app --template typescript
cd my-app
npm start

⚡ Vite vs CRA：Vite 啟動速度快非常多（使用原生 ES Module），是目前社群推薦的方式。

🧩 第一個 React 元件

// App.jsx — React 元件就是一個回傳 JSX 的函式
function App() {
  const name = '小明';
  const currentTime = new Date().toLocaleTimeString();

  return (
    <div>
      <h1>你好，{name}！</h1>       {/* 用大括號嵌入 JS 表達式 */}
      <p>現在時間：{currentTime}</p>
      <Greeting message="歡迎來到 React 的世界" />
    </div>
  );
}

// Greeting.jsx — 自訂元件（元件名稱必須大寫開頭）
function Greeting({ message }) {
  return <p style={{ color: 'blue', fontSize: '18px' }}>{message}</p>;
}

export default App;

⚠️ JSX 注意事項：

• class 要寫成 className（因為 class 是 JS 保留字）
• for 要寫成 htmlFor
• JSX 必須有一個根元素（可用 <>...</> Fragment）
• 所有標籤必須關閉：<img /> 而非 <img>

📂 React 專案結構

my-react-app/
├── public/            # 靜態檔案
│   └── index.html     # 唯一的 HTML 檔案（SPA）
├── src/
│   ├── main.jsx       # 進入點，掛載 React App
│   ├── App.jsx        # 根元件
│   ├── App.css        # 樣式
│   └── components/    # 自訂元件資料夾
├── package.json
└── vite.config.js     # Vite 設定

💡 React 是 SPA（Single Page Application），整個應用只有一個 HTML 檔案，所有畫面切換都由 JavaScript 完成。

✅ 本章重點