React前端設計——零基礎構建企業級框架

曹文傑,擁有多年Web端開發經驗，精通Vue,React兩種主流前端開發框架。目前正從事大型軟件的搭建與開發，對新技術保持著敏銳的直覺。

目錄

第一篇基礎篇

第1章React概述

1.1React簡介

1.2React發展歷程

第2章React開發環境搭建

2.1Node.js

2.1.1下載

2.1.2安裝

2.2Npm

2.2.1設置鏡像

2.2.2Npm、Yarn和Pnpm

2.2.3Npm常用命令

2.3Visual Studio Code

2.3.1安裝VS Code

2.3.2安裝VS Code擴展

2.4Vite

2.4.1為什麼選擇Vite

2.4.2Vite特點

本章小結

第3章React應用搭建

3.1搭建第一個React項目

3.2分析第一個React程序

3.2.1目錄結構分析

3.2.2文件分析

本章小結

第4章JSX

4.1JSX是什麼

4.2JSX規則

4.2.1只能返回一個根元素 

4.2.2標簽必須閉合

4.2.3使用駝峰命名法給大部分屬性命名

4.2.4特性名稱基於DOM API

4.3在JSX中通過花括號使用JavaScript

4.4渲染動態HTML

本章小結

第5章React合成事件

5.1鼠標事件

5.1.1onClick

5.1.2onDoubleClick

5.1.3onMouseOver

5.1.4onMouseLeave

5.2鍵盤事件

5.2.1onKeyDown

5.2.2onKeyUp 

5.3焦點事件

5.3.1onFocus 

5.3.2onBlur 

5.4表單事件

5.4.1onChange 

5.4.2onSubmit

5.5滾動事件

5.6事件傳參

5.7阻止事件冒泡

5.7.1什麼是事件冒泡

5.7.2阻止事件冒泡

本章小結

第6章React組件

6.1組件是什麼

6.2類組件

6.2.1定義方式

6.2.2狀態管理

6.2.3this關鍵字

6.2.4生命周期

6.3函數組件

6.3.1函數組件的優勢

6.3.2定義方式

6.3.3狀態管理

6.4受控組件與非受控組件

6.4.1受控組件

6.4.2非受控組件

6.4.3受控組件與非受控組件如何選擇

6.5父組件與子組件

6.6組件的通信方式

6.6.1props和callback方式

6.6.2ref方式

6.6.3Context方式

6.6.4Event Bus方式

6.6.5ReactRedux和Zustand方式

本章小結

第7章React渲染

7.1條件渲染

7.1.1if語句

7.1.2三元表達式

7.1.3邏輯與運算符(&&)

7.2渲染列表

7.2.1map函數

7.2.2key

7.3管理CSS

7.3.1內聯樣式

7.3.2CSS Modules

7.3.3CSSinJS

本章小結

第二篇進階篇

第8章React Hooks

8.1數據管理

8.1.1useState

8.1.2useReducer

8.1.3useSyncExternalStore

8.1.4useActionState

8.2生命周期

8.2.1useEffect

8.2.2useLayoutEffect

8.2.3useInsertionEffect

8.3狀態保存

8.3.1useMemo

8.3.2useCallback

8.4狀態的獲取與傳遞

8.4.1useContext

8.4.2useRef

8.4.3useImperativeHandle

8.5過渡更新

8.5.1使用過渡更新的原因

8.5.2useTransition

8.5.3useDeferredValue

8.6樂觀更新

8.6.1使用樂觀更新的原因

8.6.2useOptimistic

8.7自定義Hooks

8.7.1命名規則

8.7.2僅在最頂層調用Hooks

8.7.3自定義Hooks示例

8.7.4ahooks

8.8工具Hooks

8.8.1useDebugValue

8.8.2useId

第9章React內置組件

9.1Fragments

9.2Suspense

9.3StrictMode

9.4Profiler

9.5Activity

第10章React內置API

10.1memo

10.1.1基礎用法

10.1.2緩存函數引用

10.1.3控制對比過程

10.1.4性能優化時註意點

10.1.5React Compiler

10.2lazy

10.3startTransition

10.4createContext

10.5use

10.5.1讀取Context

10.5.2讀取Promise

第11章React路由

11.1路由的概念

11.2路由模式

11.3安裝reactrouterdom

11.4路由的基礎用法

11.4.1新建組件

11.4.2新建頁面文件

11.4.3定義路由規則

11.4.4創建路由實例

11.4.5路由註冊

11.5聲明式、編程式導航

11.5.1聲明式導航

11.5.2編程式導航

11.6動態路由

11.7配置404頁面

11.8嵌套路由

11.9索引路由

11.10重定向

11.11錯誤邊界

11.12路由傳參

11.12.1search傳參

11.12.2state傳參

11.12.3動態路由匹配

11.13路由守衛

11.13.1同步權限檢查

11.13.2異步權限檢查

本章小結

第12章React狀態管理倉庫

12.1ReactRedux

12.1.1起源

12.1.2基礎概念

12.1.3安裝

12.1.4新建倉庫切片

12.1.5新建存儲實例

12.1.6全局註入

12.1.7基礎用法

12.2Zustand

12.2.1安裝

12.2.2創建倉庫

12.2.3基礎用法

12.2.4異步action

12.2.5數據持久化

本章小結

第13章React UI框架

13.1Ant Design安裝

13.2常用組件

13.2.1Button按鈕

13.2.2Input輸入框

13.2.3Select選擇器

13.3shadcn/ui

第14章TypeScript 

14.1安裝

14.2基礎類型

14.2.1number

14.2.2string

14.2.3boolean

14.2.4null

14.2.5undefined

14.2.6symbol

14.2.7any

14.2.8unknown

14.2.9Array

14.3復雜類型

14.3.1聯合類型（|）

14.3.2類型別名（type）

14.3.3交叉類型（&）

14.3.4枚舉類型（enum）

14.3.5字面量類型

14.4類型推斷

14.4.1基本數據類型推斷

14.4.2對象類型推斷

14.4.3數組類型推斷

14.4.4函數類型推斷

14.5函數

14.5.1函數的定義

14.5.2可選參數

14.5.3默認參數

14.5.4剩余參數

14.5.5參數解構

14.6接口

14.6.1描述對象的結構

14.6.2可選屬性

14.6.3只讀屬性

14.6.4可索引的類型

14.6.5接口繼承

14.6.6接口合並

14.6.7接口導入/導出

14.7泛型

14.7.1泛型函數

14.7.2泛型接口

14.7.3泛型參數的默認類型

14.7.4泛型約束

14.8實用技巧

14.8.1非空斷言（!）

14.8.2類型斷言（as）

14.8.3可選鏈操作符（?.）

14.8.4typeof 

14.8.5keyof

本章小結

第15章React中TypeScript的應用

15.1項目搭建

15.2函數組件

15.2.1外部聲明

15.2.2內聯聲明

15.2.3使用泛型

15.3Hooks

15.3.1useState

15.3.2useCallback

15.3.3useMemo

15.3.4useRef

15.3.5useContext

15.3.6useReducer

15.4內置類型

15.5事件處理

本章小結

第三篇實戰篇

第16章Web端管理系統： 搭建企業級應用框架

16.1初始化項目

16.1.1Node版本要求

16.1.2VS Code插件安裝

16.1.3創建項目

16.2配置路徑別名

16.2.1安裝@types/node

16.2.2配置vite.config.ts

16.2.3Typescript路徑映射

16.3配置ESLint和Prettier

16.3.1安裝相關插件

16.3.2配置eslint.config.js

16.3.3新建.prettierrc

16.3.4新建.prettierignore

16.3.5重啟VS Code使配置生效

16.3.6配置package.json

16.4配置husky、lintstaged和@commitlint/cli

16.4.1創建Git倉庫

16.4.2安裝相關插件

16.4.3配置husky

16.4.4修改package.json

16.4.5新建commitlint.config.cjs

16.4.6進行提交

16.5VS Code自動格式化

16.6配置環境變量

16.6.1新建環境變量文件

16.6.2定義環境變量

16.6.3定義變量ts類型

16.6.4使用變量

16.6.5在vite.config.ts中使用環境變量

16.7配置axios

16.7.1安裝axios

16.7.2新建axios實例

16.7.3接口類型

16.7.4定義請求接口

16.7.5使用接口

16.8配置路由

16.8.1安裝reactrouterdom

16.8.2路由的基礎用法

16.9配置Zustand

16.9.1安裝Zustand

16.9.2創建倉庫

16.9.3基礎用法

16.10AntD配置

16.11打包配置

16.11.1分包

16.11.2生成.gz文件

16.11.3.js和.css文件夾分離

第17章Web端管理系統： 權限管理

17.1後端設計(使用Express框架)

17.1.1設計思路

17.1.2搭建後端服務

17.1.3配置路由

17.1.4跨域處理

17.2前端設計

17.2.1定義使用到的常量

17.2.2配置axios

17.2.3調整目錄結構

17.2.4調整路由

17.2.5登錄權限設置

17.2.6接口權限設置

17.2.7菜單欄權限設置

17.2.8頁面權限設置

17.2.9按鈕權限設置

本章小結

參考文獻