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按鈕權限設置

 

本章小結

 

參考文獻