React 入門：把 UI 變成可組裝的元件

Next.js、Vite 加 React 是 AI 最常生成的前端框架，不懂 React 就看不懂 AI 生的程式碼，更別說指揮它修改。

好消息是你不需要精通 React，只需要理解元件、Props、State 這三個核心概念，就掌握了它八成的邏輯，其他都是細節。

為什麼現在的前端都用 React

傳統 HTML 加 JS 的做法，資料變了要手動更新 DOM，容易出錯。React 的解法是描述「什麼資料對應什麼畫面」，資料變了 React 自動更新 DOM。

元件：把 UI 拆成積木

React 的元件就是一個回傳 JSX 的函式。JSX 看起來像 HTML，但其實是 JavaScript。

// 元件名稱大寫開頭
function WeatherCard() {
  return (
    <div className="card">
      <h2>台北</h2>
      <p>28°C，晴天</p>
    </div>
  )
}

// 使用元件，像 HTML 標籤一樣
function App() {
  return (
    <div>
      <WeatherCard /> {/* 自閉合，因為沒有子元素 */}
    </div>
  )
}

Props：元件的輸入

Props 是從父元件傳給子元件的資料，讓同一個元件可以顯示不同內容。

// 子元件：接收 props
function WeatherCard({ city, temperature, description }) {
  return (
    <div className="card">
      <h2>{city}</h2>
      <p>{temperature}°C，{description}</p>
    </div>
  )
}

// 父元件：傳入 props
function App() {
  return (
    <div>
      <WeatherCard city="台北" temperature={28} description="晴天" />
      <WeatherCard city="東京" temperature={22} description="多雲" />
    </div>
  )
}

State：元件的記憶

import { useState } from 'react'

function SearchBar() {
  // [目前值，更新函式] = useState（初始值）
  const [city, setCity] = useState('')
  const [weather, setWeather] = useState(null)

  const handleSearch = async () => {
    const data = await fetchWeather(city)
    setWeather(data) // State 更新，元件重新渲染
  }

  return (
    <div>
      <input value={city} onChange={e => setCity(e.target.value)} />
      <button onClick={handleSearch}>查詢</button>
      {weather && <p>{weather.temp}°C</p>}
    </div>
  )
}

useEffect：副作用和 API 呼叫

import { useState, useEffect } from 'react'

function WeatherApp() {
  const [data, setData] = useState(null)

  // 空陣列表示只在元件第一次載入時執行一次
  useEffect(() => {
    fetchWeather('Taipei').then(d => setData(d))
  }, [])

  return <p>{data ? data.temp : '載入中…'}</p>
}

練習：讀懂一個計數器元件

function Counter({ initialCount = 0, step = 1 }) {
  const [count, setCount] = useState(initialCount)
  return (
    <div>
      <p>目前：{count}</p>
      <button onClick={() => setCount(count + step)}>+{step}</button>
    </div>
  )
}

下一步的練習：把靜態的天氣卡片改成有輸入框的互動元件，點擊查詢後用 useEffect 呼叫真實的天氣 API，更新 State 讓卡片顯示真實的溫度，並加入載入中和錯誤狀態的處理。