【React 學習筆記 EP.02】JSX 語法

什麼是 JSX 語法？

JSX 是一種 JavaScript 的語法擴充，允許開發者在程式碼中編寫類似 HTML 的標籤結構。幾乎所有的 React 函式元件都使用 JSX 來定義畫面佈局與內容。

JSX 基礎語法

1. 單一根節點：每個元件的 return 必須只有一個父元素，若有多個標籤需使用空標籤 <>...</> 包裹
2. 表達式插值：使用大括號 {} 可在標籤內嵌入變數、函式呼叫或邏輯運算，例如：{userName}
3. 屬性轉換：HTML 的屬性需轉為駝峰式命名，例如：class 變為 className，onclick 變為 onClick
4. 閉合標籤：所有標籤都必須閉合，單標籤的結尾需要加上 /，例如：<img />、<input />
5. 樣式處理：行內樣式 style 接收的是一個 JavaScript 物件，例如：style={{ color: 'red' }}

const App = () => {
  // 定義使用者資料 (物件)
  const user = {
    name: "張小明",
    isVIP: true,
    hobbies: [
      { id: 1, name: "寫程式" },
      { id: 2, name: "喝咖啡" },
      { id: 3, name: "看書" }
    ]
  };

  // 定義行內樣式物件 (注意屬性也是 camelCase)
  const cardStyle = {
    border: "1px solid #ddd",
    padding: "20px",
    borderRadius: "8px"
  };

  // 處理按鈕點擊的事件函式
  const handleClick = () => {
    alert(`你好，${user.name}！`); // 使用樣板字面值跳出訊息
  };

  // 回傳 JSX 結構
  return (
    // 使用 style 屬性綁定樣式物件
    <div style={cardStyle} className="user-card">
      {/* 使用 {} 插入變數 */}
      <h2>{user.name} 的個人檔案</h2>

      {/* 條件渲染：使用三元運算子判斷是否顯示 VIP 標籤 */}
      {user.isVIP ? (
        <span style={{ color: "gold", fontWeight: "bold" }}>[VIP 會員]</span>
      ) : null}

      <p>興趣列表：</p>
      <ul>
        {/* 列表渲染：使用 map 遍歷陣列，每個項目需有唯一的 key */}
        {user.hobbies.map(hobby => (
          <li key={hobby.id}>{hobby.name}</li>
        ))}
      </ul>

      {/* 事件綁定：onClick 接收函式本身，而非執行結果 */}
      <button onClick={handleClick}>打招呼</button>
    </div>
  );
};

export default App