目录

第一篇基础篇

第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按钮权限设置

本章小结

参考文献