React 元件開發實戰

什麼是 React？

React 是由 Facebook 開發的前端框架，採用元件化（Component-Based）架構，讓開發者可以將 UI 拆分成獨立、可重用的區塊。

JSX 語法

JSX 是 JavaScript 的語法擴充，讓你在 JS 中直接撰寫類似 HTML 的標記：

function Welcome() { return <h1>Hello, React!</h1>; }

Props

Props 是元件之間傳遞資料的方式，類似函式的參數：

• 父元件透過屬性傳遞資料給子元件
• 子元件透過 props 參數接收
• Props 是唯讀的，不可修改

State

State 是元件的內部狀態，當狀態改變時，React 會自動重新渲染畫面。

• useState：管理簡單狀態
• useEffect：處理副作用（API 呼叫、訂閱等）
• useContext：全域狀態共享

元件生命週期

使用 useEffect 可以模擬生命週期：

• 掛載時：useEffect(() => {}, [])
• 更新時：useEffect(() => {}, [deps])
• 卸載時：useEffect(() => { return () => cleanup; }, [])