這篇文章純粹紀錄我自己在 Web 開發過程中實際用過、覺得方便的 VSCode 擴充套件,並不代表這些一定主流或特別好用,只是個人經驗隨手整理。內容不追求完整或熱門榜,純屬私人備忘,歡迎有興趣的人參考。 ※本清單會不定時更新,有新發現或更換習慣也會陸續補充。

閱讀全文 »

在現代 Web 開發中,前端應用通常需要與後端伺服器進行資料交換。RESTful API 是現今最常見的 API 設計風格,透過標準的 HTTP 方法(GET、POST、PUT、DELETE)來執行 CRUD(Create、Read、Update、Delete)操作。本章將學習如何使用 React 19 搭配原生 fetch API 來串接後端 API,實作完整的資料管理功能。

閱讀全文 »

React 19 帶來了許多改進和新功能,特別是在 Hooks 的使用上更加完善。本文將詳細介紹 React 官方推薦的所有 Hooks,包括基礎 Hooks、效能優化 Hooks,以及 React 19 新增的 useActionState 和 useOptimistic,讓您能夠更好地掌握現代 React 開發技巧。

閱讀全文 »

React 透過 State 管理元件的資料和渲染時機,透過 Props 由父元件向子元件傳遞資料。但當元件樹變得複雜時,Props 傳遞會變得繁瑣(Prop Drilling)。本章將學習 Context API 和 useReducer, 它們能幫助我們更優雅地管理跨元件的狀態共享和複雜的狀態邏輯。

閱讀全文 »

在上一章節,我們已經完成了一個包含多個元件的 React 應用(MyLogo、MyH1、MyForm、MyGallery 等)。現在我們要把這個應用擴展成多頁面的學習系統,透過 React Router 實現課程切換功能,並添加側邊選單(aside menu)讓學習者可以自由切換不同課程內容。

閱讀全文 »

本篇將深入探討 React 19 的核心概念與實作技巧,從 Vite 專案結構開始,逐步介紹 JSX 語法、元件設計、Props 傳遞、事件處理到狀態管理。透過實際範例,你將學會如何建構可重用的元件、管理應用程式狀態,以及掌握現代 React 開發的最佳實踐。

閱讀全文 »


React 是由 Meta(前 Facebook)所主導開發的 JavaScript 函式庫,採用元件化(Component-based)的設計思維,讓開發者能以可重用的元件來構建使用者介面。與 Angular 類似都強調元件化開發,但與 Vue.js 的 MVVM 模式不同,React 將所有邏輯(資料、事件、渲染)都整合在元件內部。

閱讀全文 »

TailwindCSS 是一個功能類優先的 CSS 框架,它提供了大量預定義的實用工具類,讓您能夠快速構建現代化的使用者介面。本課程將深入介紹 TailwindCSS 的核心概念、安裝方法,並提供完整的公式表供快速參考。

閱讀全文 »