階段 2 前端框架

從「一頁一頁刻」升級成「用元件組裝應用」:前端部署工程師在這一階段要能用 React 或 Vue 做出資料驅動的互動式應用。

這一階段學什麼

• 框架擇一深入:React 或 Vue 選一個練熟,核心都是宣告式 UI — 你描述「畫面該長怎樣」,框架負責更新 DOM。
• 元件化:把介面拆成可重用的元件(按鈕、卡片、清單),用 props 傳資料、用事件往外通知。
• 狀態管理:搞懂 state 改變如何驅動畫面重繪;跨元件共用的狀態怎麼集中管理。
• TypeScript:替資料與 props 加上型別,錯誤在編譯期就抓到,不用等上線才爆。
• 串接 API:用 fetch 取得遠端資料,處理載入中、成功、失敗三種畫面狀態。

為什麼是現在學

有了階段 1 的三本柱,你知道框架底層在操作什麼。這一階段不練熟元件與狀態,階段 3 的工程化(打包、測試)會沒有對象可套,之後要部署的 SPA 也生不出來。

怎麼練(具體行動)

1. 跟著官方教學做完一次範例,再「不看教學」重做一遍。
2. 做一個待辦清單 App:新增、勾選、刪除、篩選,狀態存 localStorage。
3. 做一個天氣查詢 App:串公開 API,處理載入與錯誤狀態,用 TypeScript 定義回傳資料的型別。

完成標準

• 完成一個串接 API 的單頁應用(SPA),使用者操作全程不需重新整理頁面。
• 能解釋資料從 API 進來、存進 state、渲染到畫面的完整流向。

⚠️ 常見誤區:React 和 Vue 都想學 — 選一個做出作品,比兩個都半懂有用十倍。