回顧

這個系列從基礎到實作與應用，大致介紹了一個 Blog 專案可能需要的功能與觀念。內容包含 React 的基本概念、狀態管理、路由控制、表單應用，到開發工具的使用，算是完整走過了一次 React 入門的學習歷程。

基本概念系列

Day 1 | React入門：什麼是React？
Day 2 | React入門：React 和 DOM 的關係
Day 3 | React入門：React的開發環境
Day 4 | React入門：React下載步驟及專案內容介紹
Day 5 | React入門：JavaScript VS. TypeScript
Day 6 | React入門：JSX 介紹及語法、規則
Day 7 | React入門：React Component（元件）介紹
Day 9 | React入門：處理事件 （Handling Events）
Day 12 | React入門：React渲染技巧

狀態管理系列

Day 8 | React入門：Hook - useState
Day 10 | React入門：元件溝通的橋樑 - props 屬性
Day 11 | React入門：State VS. Props
Day 13 | React入門：Hook - useEffect 的概念
Day 14 | React入門：使用 JSON server 模擬後端 API
Day 15 | React入門：useEffect 結合 JSON Server用法
Day 16 | React入門：useEffect 應用－資料載入與錯誤處理
Day 17 | React入門：Custom Hook （自定義Hook）
Day 27 | React入門：useContext－共享全域狀態

Router 路由系列

Day 18 | React入門：React Router 路由控制（上）
Day 19 | React入門：React Router 路由控制（下）
Day 20 | React入門：Nested Routes（巢狀路由）
Day 25 | React入門：表單送出後自動跳轉頁面－useNevigate
Day 26 | React入門：404 NotFound 頁面處理
Day 28 | React入門：React Router v6 新舊版本前後差異

表單應用

Day 21 | React入門：React 中的表單 ( Form )
Day 22 | React入門：React 中送出表單資料
Day 23 | React入門：React 中驗證表單
Day 24 | React入門：受控表單 VS. 非受控表單

開發工具與最佳化系列

Day 29 | React入門：提升 React 開發效率－DevTools、VS Code 擴充與 Icons

學習資源

Youtube - Net Ninja
Full Modern React Tutorial
React Router 6 Tutorial
React Router in Depth

完賽感言

透過鐵人賽，有種強迫自己一定要知道 React 這項技術的概念及應用，一開始選主題時，其實根本不知道 React 是什麼技術，但因為自己想了解前端的操作，我才更深入 React ，儘管知道身為新手的自己，還有許多地方有不足，比不過那些接觸 React 好多年的大佬，但是從學習當中，我也有蠻多收穫的，不只是為了要完成參加鐵人賽，同時也點了自己的一項技能點數；雖然只是一份模擬的 Blog 專案，但也讓我實際走過從環境設置、狀態管理、路由控制到表單處理的完整流程。
由於是大學生的關係，整個暑假都在發想自己想要選擇什麼主題、有什麼學習管道可以學習React，以及更重要的是要怎麼呈現這三十天的內容，在準備前二十天的文章時，我還能依靠先前整理的筆記和影片教學，因此進度相對穩定，不過到了最後十天，我發現自己整理的資料不太充足，內容可能不夠完整，因此尋求更多學習資源，也透過生成式 AI 來獲得建議，無論是調整文章的架構、檢查用詞，或是延伸更多主題，都讓這系列內容能夠更完整，某方面來說，AI 在這次比賽中也成為我學習旅程的重要助力。
參加鐵人賽對我來說確實是一項挑戰，因為身為對各種資訊技術略知一二的人，要深入學習一項技術真的是不容易的事，但也許是起初有這種想法，才讓我在這比賽過程中有必須要完成的目標，不想只是當一個還沒開始就放棄的人，就是因為跨出了第一步才有更多的可能性，跨出第一步之後，我才發現原來能夠完成三十天連續創作這件事，遠比想像中更有價值，最後，也希望在未來自己也能更精通 React 技術。

後記：

在整理文章的過程中，我也發現了一些值得注意的地方，例如版本差異的問題。
回想當初學習 React 時，我主要是依靠網路上的教學影片，沒有特別留意不同版本之間的差異，直到後來在準備鐵人賽文章，並參考其他資源時，我才發現好像有什麼哪裡怪怪的。
例如在 Day 7 | React入門：React Component（元件）介紹 這篇文章中，講到 Hook 的使用時，有提到「以 use 開頭命名」的規則，並舉了 useHistory 的例子。當時我還不覺得奇怪，但後來在實作 React Router 時才發現：這是舊版本(v5)的用法，在新版本(v6/v7) 中已經改成 useNavigate。
這同時提醒我以及大家學習網路資源時，一定要稍微注意一下版本差異，否則可能會因為 API 的不同而遇到不必要的錯誤，尤其是像 React 這種快速演進的生態系。

最後，感謝每一位閱讀這系列文章的讀者。

未來也期待能持續在 React 的學習與實作的道路上，與更多人交流並共同進步。