iT邦幫忙

鐵人檔案

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

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

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

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

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

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

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

Day 1 : 工欲善其事,先準備開發環境

工具準備好,接下來是一切懺悔的開始 今天目標 準備好開發用的編輯器和執行環境 建立第一隻專案 測試專案運作 嘗試修改一點點,看效果 安裝前需要先準備什麼...

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

Day 2 : 萬丈高樓平地起,從專案結構到React元件

客戶說要有按鈕,就有了按鈕 今天目標 認識昨天建立的專案結構。 從結構中理解 React、React Router 和 Vite (坑還是要小補) 看懂...

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

Day 3 : 改頭換面,用 JSX 重寫畫面

最好的計劃就是,聽客戶的話 今天目標 認識 JSX 替換掉目前的首頁 建立變數,動態調整內容 樣式調整 認識 JSX 等等,原本不是 TSX 嗎,怎麼突...

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

Day 4 : 以不變應萬變,讓元件接收不同資料

原則上就是,以我為原則 今天目標 認識 props,外層元件傳遞資料給內層元件 用同一個元件顯示三份不同內容 練習解構與預設值 使用 children 測...

2026-09-18 ‧ 由 hankyang9811 分享
DAY 5

Day 5 : 見機行事,條件判斷決定顯示內容

如果上班,則等待下班 今天目標 認識條件渲染 if、三元運算子與 && 測試執行 錯誤修正練習 基本的判斷式,簡單啦。今天一樣修改...

2026-09-19 ‧ 由 hankyang9811 分享
DAY 6

Day 6 : 一五一十,陣列與 key

一萬,兩萬,三萬...哎呀,那是老闆的錢 今天目標 資料整理成陣列 認識 map()、filter()、key 與 unique 測試執行 錯誤修正練習...

2026-09-20 ‧ 由 hankyang9811 分享
DAY 7

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

若還似從前那麼單純,恐怕在客戶手中早已死了幾百回了。 今天目標 認識純函式 分清楚計算畫面和修改外部資料 理解 props 為什麼要當成唯讀。 建立學習摘...

2026-09-21 ‧ 由 hankyang9811 分享
DAY 8

Day 8 : 一觸即發,用事件處理回應操作

全線預備~~ 開始射擊 今天目標 認識 StrictMode 認識渲染與事件處理,回應操作的執行時機 學習卡片加入筆記按鈕與事件 認識事件冒泡 延續昨...

2026-09-22 ‧ 由 hankyang9811 分享
DAY 9

Day 9 : 念念不忘,用 state 讓元件記住資料

想念你的笑,想念你的外套 今天目標 比較一般變數與狀態 認識狀態更新、Hook、useState 製作飲料計數器 控制飲品介紹的開合 組合與測試 知道怎...

2026-09-23 ‧ 由 hankyang9811 分享