iT邦幫忙

鐵人檔案

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

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

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

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

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

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

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

Day 21 : 聚光燈輪到你,用 ref 操作 DOM

網購也是這樣一步一步的聚焦操作讓我買一堆? 今天目標 認識 useRef 執行計數觀察 按鈕聚焦輸入框 執行觀察 清空並重新聚焦 錯誤修正練習 飲料訂單...

2026-10-05 ‧ 由 hankyang9811 分享
DAY 22

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

因為天氣好,因為天氣不好,因為天氣剛剛好 今天目標 認識 Effect 與 useEffect 比較畫面計算、事件處理與 Effect 城市天氣看板專案...

2026-10-06 ‧ 由 hankyang9811 分享
DAY 23

Day 23 : 搭波康鳳,Effect 的依賴與重試

我忘了我記得,所以再做一次 昨天建立天氣看板,加入城市與溫度單位切換,接著來看背後的概念:依賴如何決定重新同步,以及同一城市重新查詢的原理。 今天目標 理...

2026-10-07 ‧ 由 hankyang9811 分享
DAY 24

Day 24 : 抽取邏輯,客製化自己的 Hook

靈魂抽取器 今天目標 認識自訂 Hook 的命名與用途 查詢邏輯抽成 useWeather 用兩張卡片觀察獨立狀態 了解 Hook 位置與資料歸屬 認...

2026-10-08 ‧ 由 hankyang9811 分享
DAY 25

Day 25 : 魔幻舞台,用 MUI 讓畫面變身

給奧客:波波力那貝貝魯多,就你在那囉囉唆唆(開玩笑) 今天目標 認識 MUI 與 Tailwind CSS 城市選單與天氣卡片接上現有 state 測試觀...

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

Day 26 : 記住你了,MUI 收藏城市與保存設定

早餐店老闆:今天老樣子嗎? 今天目標 收藏城市與設定對話框 讓取消和套用有不同結果 localStorage 保存與還原正式設定 測試執行 今天試著加入...

2026-10-10 ‧ 由 hankyang9811 分享
DAY 27

Day 27 : 蹭熱度,做個需求顧問 AI 網站

什麼都要提到 AI,那就來蹭一下? 現在好像什麼都要加上 AI,這次的小專案也來蹭一下。剛好開始做專案的時候,我們經常只有一個模糊的想法或概念,還沒想清楚需...

2026-10-11 ‧ 由 hankyang9811 分享
DAY 28

Day 28 : 蹭熱度,做個需求顧問 AI 網站之二

趕工是日常... 昨天的系統架構分成三個部分: React 網站 輕量 API 負責 AI 串接與流程控制 AI 模型服務負責產生內容 今天把網站做起來...

2026-10-12 ‧ 由 hankyang9811 分享
DAY 29

Day 29 : 蹭熱度,做個需求顧問 AI 網站之三

把成果帶走,再開始下一次討論。 昨天把表單、API 和 AI 串起來,今天接著補上複製成果與重新討論,再從頭確認操作和整理出來的內容。 複製討論稿 問題摘要...

2026-10-13 ‧ 由 hankyang9811 分享