有空再補坑

第三十天了，一開始寫這個系列，是因為過去太習慣透過 Vibe Coding 做東西，遇到問題也直接問 AI。畫面做出來了，卻不知道資料怎麼更新和為什麼會出錯，我記得最清楚的就是寫出了無限刷新的 useEffect，非常可怕，所以想從官方文件開始，重新認識 React。

列一下內容，方便自己隨時回來看，希望是不要塵封。

重要觀念章節

元件的純粹性

• Day 7 : 專精一思，讓元件保持純粹

state 與渲染快照

• Day 9 : 念念不忘，用 state 讓元件記住資料
• Day 11 : 此時此刻，理解 state 的渲染快照

資料更新與結構

• Day 13 : 珍奶微微，更新 state 裡的物件
• Day 16 : 去蕪存菁，整理 state 的結構

元件共享資料

• Day 17 : 有福同享，讓元件共享 state

Effect 與外部同步

• Day 22 : 查詢天氣，用 Effect 同步資料與清理

小專案

第一階段 需求規劃

Day 27從「想法還很模糊，卻準備開始做專案」的情境出發，決定網站要協助使用者釐清需求。

第二階段 進入實作

Day 28從首頁與三欄表單開始，建立 API 並串接 AI，再依問答筆數接續訪談，第三題回答後顯示討論稿。Day 29接著補上複製成果與重新開始，讓使用者能帶走內容，再進行下一次討論。

第三階段 成果檢查

Day 29：完整流程與失敗重試用交班案例實際操作，測試失敗狀態與處理結果。

最後小專案放在 GitHub：ai-requirements-assistant

回顧錯誤修正練習

其實還是要先會基本的東西才知道怎麼修正問題，歸納下來這幾個步驟有幫助：

1. 重現
   記下操作順序、輸入與當時狀態，讓同一個問題能再出現。
2. 證據
   比較畫面、Console、Network，以及事件和渲染各自讀到的值。(除錯模式可能會碰到 Strict Mode)
3. 原因
   指出哪一份資料、哪個事件或哪一輪外部工作可能出錯。
4. 修改後重測
   用相同操作確認修正，再檢查相關的取消、重試或切換。

雖然都丟給 AI 百分之 90 也都可以解開，但有個方向才不會連 AI 給的方法是什麼意思都不懂。

三十天先到這裡

從 Hello-React!! 到一份可以操作的需求討論稿，總算把這段學習留下來了。

這三十天也一直碰到 React 以外的知識。像是 closure、物件參照、Promise 和 async／await，都會影響我們怎麼理解事件與資料。後面想把這些 JavaScript 基礎再練熟，也繼續整理 TypeScript 的型別與執行時檢查。

現在再看到按鈕沒反應、資料不同步或請求重複，至少有幾個方向可以開始查，也比較能說明自己的修改理由，之後遇到新的問題，還是得繼續讀文件、做實驗，再確認理解有沒有偏掉。不過有 AI 了，應該會快不少，但變相的要學的東西也更多更廣，一點都不能閒。

收工，回去補坑。