iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
自我挑戰組

React 入門到實作與除錯|30 天哩ㄟ刻 系列

過去都只透過 Vibe Coding 裝會,整個人都成癮了,
而且遇到問題只會問 AI 好像不太專業 (?)

總之這個系列將從入門開始,透過親手搭建與實作,逐步理解 React 的世界。

預計從官方網站開始看,學習專案建立、理解元件、資料傳遞與狀態管理展開,搭配小練習與適合的 UI 元件庫,逐步整合成可操作的專案。實作中遇到的錯誤也會成為學習的一部分,記錄如何重現問題、追查線索、驗證假設,以及確認修正是否有效。

希望紀錄這段學習,逐步戒毒,培養自己對 React 的理解與追查根因的能力。

參賽天數 29 天 | 共 29 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day 11 : 此時此刻,理解 state 的渲染快照

state 的多重宇宙? 今天目標 理解每次渲染的快照 比較更新前後的讀值 追蹤延遲操作的快照 分辨目前值與下一個值 錯誤修正練習 理解每次渲染的 st...

2026-09-25 ‧ 由 hankyang9811 分享
DAY 12

Day 12 : 接二連三,連續更新 state

按讚,訂閱,開啟小鈴噹,是三個不同的事件~ 今天目標 連續三次更新的結果 理解同一次事件的批次處理 用函式更新依序累加杯數 追蹤queue的串接與計算 比...

2026-09-26 ‧ 由 hankyang9811 分享
DAY 13

Day 13 : 珍奶微微,更新 state 裡的物件

吃飽才有力氣動,上班總是需要一點小快樂 今天目標 把飲料規格整理成物件 分辨修改物件與建立新物件 用展開語法保留其他欄位 理解淺拷貝與巢狀物件 讓物件更新...

2026-09-27 ‧ 由 hankyang9811 分享
DAY 14

Day 14 : 不慌不忙,更新 state 裡的陣列

上輩子福份不夠,這輩子碰到奧客要抓住機會累積一下? 今天目標 把訂單項目整理成陣列 分清楚新陣列與新物件 用展開語法新增項目 用 filter 刪除指定項...

2026-09-28 ‧ 由 hankyang9811 分享
DAY 15

Day 15 : 簡潔有力,用 state 呈現表單輸入狀態

俗擱有力,簡單就是王道 今天目標 列出畫面狀態 用 state 控制輸入內容 用表單事件處理送出 等待結果,再切換成功或失敗 依狀態決定畫面與可操作項目...

2026-09-29 ‧ 由 hankyang9811 分享
DAY 16

Day 16 : 去蕪存菁,整理 state 的結構

很亂呀,很亂呀 今天目標 需要記住與可以算出的資料 把相關的狀態整理在一起 ID 記住正在檢視的項目 檢查資料層級與複製的目的 測試清單、摘要與送出流程...

2026-09-30 ‧ 由 hankyang9811 分享
DAY 17

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

有難的時候,先不用共享沒關係,我已經夠多了 今天目標 找到共享 state 的共同外層元件 拆出訂單清單與檢視元件 用事件回呼通知外層元件更新 同時控制...

2026-10-01 ‧ 由 hankyang9811 分享
DAY 18

Day 18 : 留還是不留,理解 state 的保留與重設

日常行為:ㄟ,我忘記要講什麼了? 今天目標 元件的 state 保留與重設 觀察 props 改變對 state 的影響 用 key 重設草稿 分辨停用、...

2026-10-02 ‧ 由 hankyang9811 分享
DAY 19

Day 19 : 規則集中,reducer 整理訂單邏輯

打工日常:A 說 B 不對,B 說 C 教的,C 說 A 教的(完美閉環) 今天目標 認識 reducer 比較 reducer 的優缺點 用 reduc...

2026-10-03 ‧ 由 hankyang9811 分享
DAY 20

Day 20 : 注意還動,Context 跨層傳遞資料

公告貼了,群組也說了,就是有人不看 今天目標 認識 Context 比較 props 與 Context 共享詳細與精簡的顯示設定 執行觀察 認識 Co...

2026-10-04 ‧ 由 hankyang9811 分享