LESSON 06 · 午餐揪團頁主線

認識 React

前幾堂手動改 DOM、手動管理清單的痛，今天用 React 一次收拾掉。你會親身體驗「為什麼要用框架」不是空談——而且你今天做的事，跟公司真正的產品用的是同一套邏輯。

元件化重構 props + map useState 自動重繪產出：React 版揪團頁

✓

完成定義 · Definition of Done

頁面功能與之前一致，但程式碼結構是元件化的；學員能指認「這是一個元件」「這是 props」「這是 state」。

0:00–0:05	回顧痛點：手動改 DOM、手動管理清單，今天用 React 收拾
0:05–0:20	概念：元件、props（餅乾模比喻）
0:20–0:35	動手：拆出 LunchCard 元件 + 用 map 長出整排卡片
0:35–0:45	概念：state 與自動重繪，對照前幾堂手動做法
0:45–0:55	動手：「我要跟」改用 useState（半成品模板加速）
0:55–1:00	收尾：為什麼是 React（元件樹用 AI 文字說明帶過）

01元件與 props

元件就是一塊積木：你的「揪團卡」——長相和行為都包在這一塊裡，要幾張卡片就放幾個積木。那怎麼讓每張卡片顯示不同的餐廳？靠 props——想成一個餅乾模，形狀（結構）都一樣，但可以放不同的麵團（資料）進去，壓出不同口味的餅乾。

圖 1.1元件＝積木、props＝餵的料：同一個餅乾模，換不同麵團，壓出不同口味但形狀一致的餅乾。

02動手：拆元件 + map

用 Prompt A 把「一張揪團卡」拆成獨立元件 LunchCard，接收 props
用 map 把資料陣列渲染成整排 LunchCard
改一下資料陣列，確認畫面自動跟著長出新卡片

還記得 5a 堂「一份清單長出畫面」嗎？React 裡做這件事的工具就叫 map——你只要改資料陣列，畫面自動跟著變，不用再一個個貼元件。

03state 與自動重繪

還記得第 3、4 堂你要手動去改 DOM（手動把人數的文字換掉）嗎？React 讓你不用再自己動手改 DOM——你只要說「資料現在變成這樣」（更新 state），React 自動幫你重新畫面。

📣宣告式

你只負責描述「現在應該長什麼樣」，不用管「怎麼一步步把畫面改成那樣」——那個過程 React 幫你處理了。

圖 3.1state + 自動重繪：不再自己動手改 DOM——說「資料變成這樣」，React 幫你把畫面畫好。

04動手：useState 改寫「我要跟」

用 Prompt B（配合講師提供的半成品模板）把「我要跟」邏輯改用 useState
點擊按鈕 → 更新 state → 畫面自動反映，不再手動改 DOM
（帶過）用 Prompt C 讓 AI 生成你頁面的元件樹文字說明

乾淨整齊的程式碼結構、開發者滿意地看著螢幕的氛圍照 — 圖 4.1重構完成：功能一樣，但程式碼**變乾淨了**——這就是元件化的力量。

收尾金句：「為什麼要用框架」不是因為它潮——是因為畫面一複雜、狀態一多，手動管理會失控，React 幫你把這個複雜度收起來。這也是為什麼公司的產品押 React：你今天做的事，跟真正的產品用的是同一套邏輯。

·AI Prompt speed dial起手式 · 用自己的話改

A拆元件 + map 渲染

請幫我把目前午餐揪團頁的程式碼改寫成 React（使用 function component）。
先把「一張揪團卡」拆成一個獨立的元件，叫做 LunchCard，
接收餐廳名稱、發起人、人數這幾個 props，並顯示出來。
然後用 map 把資料陣列的每一筆渲染成一個 LunchCard 元件。
請解釋一下這個元件跟原本 HTML 裡「一張卡片」的對應關係。

B改用 useState 管理「我要跟」

目前「我要跟」按鈕的人數邏輯是用原生 JS 手動操作 DOM 完成的。
請幫我改成用 React 的 useState 來管理每張卡片的人數與是否已加入的狀態，
點擊按鈕時更新 state，畫面應該要自動反映最新狀態。

C生成元件樹說明

請根據我目前的 React 程式碼，用文字畫出這個頁面的「元件樹」結構，
清楚標示哪個元件包著哪個元件。

·作業與檢核

作業：一張 issue ＋一個 PR——新增一個獨立 React 元件並整合進頁面。PR 描述包含：這個元件接收哪些 props、有沒有自己的 state。

講師 / 助教檢核重點

揪團卡已改為元件 + props，用 map 渲染
「我要跟」邏輯已改用 useState
學員能指認元件 / props / state 各是哪一段