【React 學習筆記 EP.03】Components 元件

什麼是元件？

元件 (Components) 是將使用者介面拆解成獨立、可重用的程式碼區塊，透過組合多個元件，開發者能像堆疊樂高積木一樣，快速建構出複雜且易於維護的網頁介面。

元件基礎語法

1. 函式定義：使用函式宣告元件，名稱必須首字大寫以區別原生 HTML 標籤。
2. JSX 語法：在 JavaScript 中撰寫類 HTML 的標籤語法，用來描述畫面結構與樣式。
3. 屬性 (Props)：父元件傳遞給子元件的參數，類似函式的引數，確保單向資料流。
4. 渲染 (Rendering)：元件必須使用 return 回傳 UI 結構，若涉及邏輯運算需寫在 return 之前。
5. 模組匯出：使用 export default 將元件公開，以便其他檔案 import 使用。

常見錯誤與解決方法

1. React 會將小寫開頭的標籤視為原生 HTML，建議將元件名稱改為大寫開頭，例如：MyButton
2. 在 {} 中撰寫 if 或 for 等陳述式導致報錯，建議改用三元運算子或 map()

// 定義子元件：接收 props 參數
// 負責顯示單一使用者的資訊卡片
const UserCard = ({ name, role, isActive }) => {
  // 定義卡片樣式物件
  const cardStyle = {
    border: '1px solid #ddd',
    padding: '16px',
    borderRadius: '8px',
    backgroundColor: isActive ? '#f0f9ff' : '#f5f5f5' // 依狀態改變背景色
  };

  // 回傳 JSX 結構
  return (
    <div style={cardStyle}>
      {/* 使用 {} 嵌入變數值 */}
      <h3>姓名：{name}</h3>
      <p>職位：{role}</p>
      {/* 條件渲染：若 isActive 為 true 則顯示標籤 */}
      {isActive && <span>✅ 本月最佳員工</span>}
    </div>
  );
};

// 匯出元件供其他檔案使用
export default UserCard;

import UserCard from '../src/components/UserCard'
import './App.css'

// 定義父元件：應用程式的主入口
const App = () => {
  // 回傳主畫面結構
  return (
    <div style={{ padding: '20px' }}>
      <h1>員工列表</h1>
      
      {/* 呼叫並重複使用 UserCard 元件 */}
      {/* 傳遞 props：name 為字串, isActive 為布林值 */}
      <UserCard 
        name="王小明" 
        role="前端工程師" 
        isActive={true} 
      />
      <br />
      {/* 再次呼叫元件，傳入不同資料 */}
      <UserCard 
        name="李大華" 
        role="後端架構師" 
        isActive={false} 
      />
    </div>
  );
};

export default App;