React & TypeScript 实战
📚 30章 · 从入门到架构
01
React与TypeScript入门
了解关系 · 搭建环境 (Node.js, npm/yarn, CRA TS模板) · 项目结构解析
02
TypeScript基础 (上)
基础类型 · 类型注解/推断 · 接口(interface)基本使用
03
TypeScript基础 (下)
联合/交叉类型 · 类型别名 · 函数类型 · 泛型入门
04
React组件基础
函数/类组件 · JSX语法 · props & state · 事件处理
05
React组件进阶
生命周期 · useState/useEffect · 自定义Hook · 组件通信
06
React与TS结合 (一)
函数组件类型 · Props接口 · State类型 · 事件对象类型
07
React与TS结合 (二)
useRef/useContext类型 · useReducer · 自定义Hook封装
08
React与TS结合 (三)
HOC类型处理 · Render Props · React.memo类型安全
09
样式方案
CSS Modules · styled-components · Tailwind · 类型声明
10
React Router与TypeScript
路由配置 · 动态路由 · 参数类型 · 嵌套/路由守卫
11
状态管理 (一)
Context API + useReducer · 类型安全全局状态 · 性能优化
12
状态管理 (二)
Redux Toolkit入门 · Slice · Action/Reducer类型 · 组件使用
13
状态管理 (三)
RTK进阶 · createAsyncThunk · 中间件 · 类型安全Selector
14
表单处理
受控/非受控 · React Hook Form · 表单数据类型定义
15
HTTP请求
Axios封装 · 请求/响应类型 · 拦截器 · 错误处理+类型守卫
16
React Query与TypeScript
数据获取/缓存 · 查询变更类型安全 · 乐观更新
17
组件库开发 (一) Button
设计Button · Props类型 · 样式变体 · 事件类型扩展
18
组件库开发 (二) Form
Form组件 · 状态管理 · 字段验证 · 类型安全上下文
19
组件库开发 (三) Table
列定义 · 排序/筛选/分页 · 类型设计
20
测试 (一)
Jest + React Testing Library · 渲染/交互测试 · 快照
21
测试 (二)
测试Hooks · 异步组件 · Mock服务 · 覆盖率
22
性能优化
React.memo/useMemo · useCallback · 代码分割 · 虚拟列表
23
错误边界与异常处理
Error Boundary · 全局捕获 · 日志上报 · 类型安全错误处理
24
国际化 (i18n)
react-i18next · 多语言配置 · 类型安全翻译 · 动态切换
25
权限管理
角色/权限模型 · 路由/组件级权限 · 类型安全判断
26
动画与过渡
React Transition Group · Framer Motion · 动画状态类型
27
WebSocket与实时通信
Socket.IO客户端 · 消息类型 · 连接/重连管理
28
项目架构与工程化
目录规范 · ESLint/Prettier · Husky/lint-staged · CI/CD
29
微前端与模块联邦
Micro Frontend · Module Federation · 跨应用通信 · 类型共享
30
综合实战：后台管理系统
登录/仪表盘/CRUD/权限管理 · 总结与最佳实践