教程目錄

React 18 核心概念深度教程 (適合初學者)

教程大綱：

  1. 第 1 章：React 簡介與前端開發環境回顧

    • 1.1 什麼是 React？為什麼選擇 React？
    • 1.2 React 的核心特性 (元件化、虛擬 DOM、單向資料流)
    • 1.3 前端開發環境回顧 (Node.js, npm/pnpm, Vite)
    • 1.4 建立您的第一個 React 應用程式 (使用 Vite)
    • 1.5 專案結構概覽

  2. 第 2 章：JSX 深度解析

    • 2.1 JSX 是什麼？它與 HTML 的關係
    • 2.2 在 JSX 中嵌入 JavaScript 表達式
    • 2.3 JSX 也是一個表達式
    • 2.4 指定 JSX 屬性
    • 2.5 JSX 中的子元素
    • 2.6 JSX 防止注入攻擊
    • 2.7 JSX 代表物件 (Babel 編譯)

  3. 第 3 章：React 元件詳解

    • 3.1 什麼是元件？
    • 3.2 函式元件 (Functional Components)
      • 3.2.1 基本語法
      • 3.2.2 為什麼推薦函式元件？
    • 3.3 類別元件 (Class Components)
      • 3.3.1 基本語法與 render() 方法
      • 3.3.2 何時可能仍需使用類別元件 (如錯誤邊界)
    • 3.4 元件的命名約定
    • 3.5 元件的組合與拆分
    • 3.6 渲染元件

  4. 第 4 章：Props (屬性) 的運用

    • 4.1 什麼是 Props？
    • 4.2 如何傳遞 Props
    • 4.3 Props 是唯讀的
    • 4.4 props.children
    • 4.5 Props 的預設值 (Default Props)
    • 4.6 Props 型別檢查 (PropTypes 與 TypeScript)
    • 4.7 Props 解構

  5. 第 5 章：State (狀態) 與生命週期

    • 5.1 什麼是 State？它與 Props 的區別
    • 5.2 在函式元件中使用 State：useState Hook
      • 5.2.1 引入 useState
      • 5.2.2 讀取 State
      • 5.2.3 更新 State
      • 5.2.4 State 更新可能是非同步的
      • 5.2.5 State 更新的合併 (物件型 State)
      • 5.2.6 State 的初始化
    • 5.3 在類別元件中使用 State (簡介，對比用)
      • 5.3.1 this.state 與 this.setState()
    • 5.4 元件的生命週期簡介
    • 5.5 在函式元件中模擬生命週期：useEffect Hook
      • 5.5.1 什麼是副作用 (Side Effects)？
      • 5.5.2 useEffect 的基本用法
      • 5.5.3 useEffect 的依賴項陣列 (Controlling when effects run)
        • 每次渲染後執行 (無依賴項)
        • 僅在掛載和卸載時執行 (空依賴項 [])
        • 依賴特定值變化時執行
      • 5.5.4 useEffect 的清理函式 (Cleaning up an effect)
      • 5.5.5 useEffect 與資料獲取

  6. 第 6 章：深入核心 Hooks

    • 6.1 回顧 useState 和 useEffect
    • 6.2 useContext：跨層級共享狀態
      • 6.2.1 為什麼需要 Context？(Props Drilling 問題)
      • 6.2.2 React.createContext
      • 6.2.3 Context.Provider
      • 6.2.4 useContext Hook
      • 6.2.5 何時使用 Context
    • 6.3 useReducer：複雜狀態邏輯管理
      • 6.3.1 useState 的替代方案
      • 6.3.2 Reducer 函式
      • 6.3.3 useReducer 的用法
      • 6.3.4 惰性初始化
      • 6.3.5 何時選擇 useReducer
    • 6.4 useCallback：記憶回呼函式
      • 6.4.1 為什麼需要 useCallback？(效能優化，避免不必要的重新渲染)
      • 6.4.2 useCallback 的用法與依賴項
    • 6.5 useMemo：記憶計算結果
      • 6.5.1 為什麼需要 useMemo？(效能優化，避免昂貴的重複計算)
      • 6.5.2 useMemo 的用法與依賴項
    • 6.6 useRef：存取 DOM 元素或持久化可變值
      • 6.6.1 存取 DOM 元素
      • 6.6.2 useRef 與可變值 (不觸發重新渲染)
    • 6.7 Hooks 的使用規則 (Rules of Hooks)

  7. 第 7 章：自訂 Hooks (Custom Hooks)

    • 7.1 為什麼需要自訂 Hooks？(邏輯複用)
    • 7.2 如何建立一個自訂 Hook
    • 7.3 自訂 Hooks 的命名約定 (以 use 開頭)
    • 7.4 自訂 Hooks 範例 (例如：useFormInput, useWindowSize)

  8. 第 8 章：事件處理 (Handling Events)

    • 8.1 React 中的事件處理方式 (與 DOM 事件的差異)
    • 8.2 事件處理函式的綁定
    • 8.3 向事件處理函式傳遞參數
    • 8.4 事件物件 (SyntheticEvent)

  9. 第 9 章：條件渲染 (Conditional Rendering)

    • 9.1 使用 JavaScript 運算子進行條件渲染
      • 9.1.1 if / else
      • 9.1.2 三元運算子 (condition ? true : false)
      • 9.1.3 邏輯 AND 運算子 (&&)
    • 9.2 阻止元件渲染 (return null;)
    • 9.3 元件的條件渲染

  10. 第 10 章：列表與 Keys (Lists and Keys)

    • 10.1 渲染多個元件 (使用 map())
    • 10.2 key 屬性的重要性
      • 10.2.1 為什麼需要 Keys？(幫助 React 識別變更、新增或移除的項目)
      • 10.2.2 如何選擇合適的 Key (穩定、唯一)
      • 10.2.3 不建議使用索引作為 Key (如果列表順序可能改變)
    • 10.3 在元件上使用 Keys

  11. 第 11 章：表單處理 (Forms)

    • 11.1 受控元件 (Controlled Components)
      • 11.1.1 表單元素的值由 React state 控制
      • 11.1.2 input, textarea, select 的處理
      • 11.1.3 處理多個輸入
    • 11.2 非受控元件 (Uncontrolled Components) (簡介)
    • 11.3 檔案輸入 (<input type="file" />)
    • 11.4 表單驗證 (基礎)

  12. 第 12 章：狀態提升 (Lifting State Up)

    • 12.1 當多個元件需要共享狀態時
    • 12.2 將狀態提升到最近的共同父元件
    • 12.3 單向資料流的回顧

  13. 第 13 章：組合 vs 繼承 (Composition vs Inheritance)

    • 13.1 React 更傾向於組合而非繼承
    • 13.2 使用組合的方式 (包含關係、特殊化)
    • 13.3 為什麼繼承在 React 中不常用

  14. 第 14 章：React 哲學與最佳實踐

    • 14.1 React 的思考方式：元件化拆分 UI
    • 14.2 單向資料流
    • 14.3 保持元件小而專注
    • 14.4 參考 @learning-react-go.mdc 中的 React 相關最佳實踐

results matching ""

    No results matching ""