第 25 課：事件處理
// 輸入事件 input.addEventListener'input', functionevent { console.log'輸入值：', event.target.value; };
閱讀文章 →第 26 課：表單驗證
範例：examples/lesson26/example01validation.html
閱讀文章 →第 28 課：ES6+ 新特性
// 物件解構 let {name, age} = {name: '小明', age: 25};
閱讀文章 →第 29 課：本地儲存和 API
學會使用 localStorage 了解 sessionStorage 掌握資料的儲存和讀取
閱讀文章 →第 30 課：整合實戰專題
整合以下技術： HTML5 語義化標籤 CSS Flexbox/Grid 布局 JavaScript DOM 操作 事件處理 localStorage 儲存 表單驗證
閱讀文章 →React.js 完整教材
本教材涵蓋 React.js 從入門到進階的所有核心概念，包含大量範例程式碼與詳細說明。
閱讀文章 →Lesson 01：React 簡介與環境建置
React 是由 Facebook（現 Meta）開發的 JavaScript UI 函式庫，用於建構使用者介面。
閱讀文章 →Lesson 02：JSX 語法
JSX（JavaScript XML）是 React 使用的語法擴展，讓你可以在 JavaScript 中撰寫類似 HTML 的程式碼。
閱讀文章 →Lesson 03：元件 Components
// 方法 2：箭頭函式（更常用） const Welcome = = { return <h1歡迎來到 React！</h1; };
閱讀文章 →Lesson 04：Props 屬性傳遞
Props（Properties）是父元件傳遞資料給子元件的機制，類似 HTML 標籤的屬性。
閱讀文章 →Lesson 05：State 與 useState
State 是元件內部的「記憶」，用來儲存會隨時間改變的資料。當 state 改變時，React 會自動重新渲染元件。
閱讀文章 →Lesson 06：事件處理 Event Handling
React 使用合成事件 Synthetic Events，提供跨瀏覽器一致的事件 API。
閱讀文章 →Lesson 07：條件渲染 Conditional Rendering
return <div <h1請登入</h1 <button登入</button </div ; }
閱讀文章 →Lesson 08：列表與鍵值 Lists & Keys
return <ul {fruits.mapfruit, index = <li key={index}{fruit}</li } </ul ; }
閱讀文章 →Lesson 10：useEffect 與副作用
useEffect = { // 副作用程式碼 return = { // 清除函式（可選） }; }, 依賴1, 依賴2; // 依賴陣列
閱讀文章 →Lesson 11：useRef
useRef 回傳一個可變的 ref 物件，其 .current 屬性在整個元件生命週期中保持不變。
閱讀文章 →Lesson 12：useContext 與 Context API
const ThemeContext = createContext'light'; // 預設值
閱讀文章 →React Router 專案說明
將 ProjectBlogApp.jsx 的內容複製到你的 App.jsx 中。
閱讀文章 →Lesson 16：效能優化
重點：父元件重新渲染時，所有子元件也會重新渲染，即使它們的 props 沒有改變。
閱讀文章 →Lesson 17：錯誤邊界 Error Boundaries
錯誤邊界是一種 React 元件，可以捕獲子元件樹中的 JavaScript 錯誤，顯示降級 UI，而不是讓整個應用崩潰。
閱讀文章 →Redux Toolkit 專案說明
由於 Redux 需要多個檔案（store, slice, components），此專案將所有程式碼放在單一檔案中方便學習。
閱讀文章 →Lesson 20：進階設計模式
// 原始元件 function UserList{ users } { return <ul {users.mapu = <li key={u.id}{u.name}</li} </ul ; }
閱讀文章 →Lesson 21：測試與最佳實踐
export default defineConfig{ plugins: react, test: { globals: true, environment: 'jsdom', setupFiles: './src/setupTests.js', }, };
閱讀文章 →網站效能最佳化：資源、頻寬與速度
1. 為什麼效能重要1為什麼效能重要 2. 效能衡量指標 Core Web Vitals2效能衡量指標corewebvitals 3. HTML 最佳化3html最佳化 4. CSS 最佳化4css最佳化 5. JavaScript 最佳化5javascript最佳化 6. 圖片與媒體最佳化6圖片與媒體最佳化 7. 字型最佳化7字型最佳化 8. 網路層最佳化：HTTP、快取、壓縮8網路層最佳化http快取壓縮 9. 伺服器端最佳化9伺服
閱讀文章 →