洛奇的邪惡組織手札

這門課的核心是：從零開始學網頁開發。這一篇先建立共同語言——網頁和網站是什麼、為什麼要碰 HTML／CSS／JavaScript，以及後面出現的 Tailwind、React 各解決什麼問題——接著才安裝 VS Code、Google Chrome、連 GitHub、拉隨課 repo。這裡不寫 HTML 頁面。 各篇會出練習，課堂會講怎麼做。預覽與 DevTools 以 Chrome 為準，畫面才對得上講義。

這是約 120 小時的在職前端入門計畫，依階段排，不鎖死每天 8 小時。你會用 VS Code、Git、HTML、CSS、Tailwind、JavaScript、React 做出旅行社網站，深度停在看得懂、改得動、講得出來。各階段講義在下面的表，檔名就是連結。

這篇文章純粹紀錄我自己在 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 的核心概念、安裝方法，並提供完整的公式表供快速參考。