Web Development

Lesson 13：useReducer

useReducer 是 useState 的替代方案，適合管理複雜的狀態邏輯。它借鑑了 Redux 的概念。

Lesson 14：自訂 Hooks Custom Hooks

1. 名稱必須以 use 開頭 2. 只能在元件或其他 Hook 的最上層呼叫 3. 可以使用任何內建 Hook

Lesson 15：React Router

React Router 是 React 的路由函式庫，讓單頁應用（SPA）可以有多個「頁面」。

React Router 專案說明

將 ProjectBlogApp.jsx 的內容複製到你的 App.jsx 中。

Lesson 16：效能優化

重點：父元件重新渲染時，所有子元件也會重新渲染，即使它們的 props 沒有改變。

Lesson 17：錯誤邊界 Error Boundaries

錯誤邊界是一種 React 元件，可以捕獲子元件樹中的 JavaScript 錯誤，顯示降級 UI，而不是讓整個應用崩潰。

Lesson 18：API 資料串接

function UserList { const users, setUsers = useState; const loading, setLoading = useStatetrue; const error, setError = useStatenull;

Lesson 19：狀態管理 — Redux Toolkit

1. 單一資料源：整個應用的 state 存在一個 Store 中 2. State 是唯讀的：只能透過 dispatch action 來改變 3. 純函式更新：Reducer 是純函式

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', }, };

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Backend Server Setup

This document explains how to set up and run the backend server for the Angular Comprehensive Demo.

Code Flow Documentation

This document provides a detailed explanation of how code flows through the Angular Comprehensive Demo application, from startup to user interactions.

Project Summary

This Angular comprehensive demo project has been successfully created with all requested features implemented. The project demonstrates core Angular concepts with extensive documentation and comments throughout the codeb

Angular Comprehensive Demo

A comprehensive Angular application that demonstrates core concepts, best practices, and modern Angular development patterns.

Backend Server for Angular Comprehensive Demo

This is a Node.js/Express backend server that provides REST API endpoints for the Angular Comprehensive Demo application.

Angular Learning Roadmap

Performance Audit Template

Weeks 12: Environment Setup & Component Fundamentals

Weeks 34: Directives, Forms, and Dependency Injection

Weeks 56: Routing, HTTP, and Observables

Weeks 78: CRUD Application, Authentication, and Testing Coverage

Weeks 910: Advanced Angular Patterns RxJS, NgRx, Performance