React — 網頁設計

React 核心概念

React 是 Facebook (Meta) 於 2013 年發布的 JavaScript UI 函式庫，採用元件化開發與虛擬 DOM 機制。開發者以宣告式方式描述 UI，React 自動處理更新邏輯。

虛擬 DOM — 透過差異比對最小化實際 DOM 操作
宣告式設計 — 描述 UI 應有的樣子，而非操作步驟
單向資料流 — 資料從上往下傳遞，易於追蹤

JSX 語法

JSX 是 JavaScript 的語法擴展，允許在 JS 中撰寫 HTML 類似的語法。

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

const element = (
<div>
{showMessage && <p>Message</p>}
{items.map(item => <li key={item}>{item}</li>)}
</div>
);

狀態管理與 Hooks

React Hooks 是函式元件中管理狀態與副作用的方式。

import { useState, useEffect } from 'react';

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

function DataFetcher() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/data').then(res => res.json()).then(setData);
}, []);
return <div>{data}</div>;
}

元件組合

React 應用程式由多個獨立元件組合而成，每個元件負責一部分 UI。

function App() {
return (
<div className="app">
<Header title="My App" />
<main><Content /></main>
<Footer />
</div>
);
}

本課程範例

08-react/ — React 範例

React 核心概念

JSX 語法

狀態管理與 Hooks

元件組合

本課程範例

相關連結