React 组件库 · 从零搭建
📘 30 章完整版
友好色系 · 点击卡片跳转对应章节
1
01
组件库概述
什么是组件库 · 为什么需要 · Ant Design / Material-UI / Chakra UI 对比
2
02
项目初始化
Vite + TypeScript 骨架 · ESLint · Prettier 配置
3
03
目录结构设计
组件库目录规范 · src划分 · 构建输出规划
4
04
组件开发规范
命名规范 · Props设计 · 单一职责 · 受控与非受控
5
05
样式方案选型
CSS Modules · Styled Components · Tailwind · Emotion 对比
6
06
Button组件（一）
基础Button · Props类型 · 样式绑定 · 点击事件
7
07
Button组件（二）
变体 primary/dashed/text · 尺寸 · 加载状态
8
08
Icon组件
SVG封装 · 按需加载 · react-icons 集成
9
09
Typography组件
Text / Title / Paragraph · 行高字重处理
10
10
Input组件（一）
受控模式 · 事件代理 · 占位符与清空按钮
11
11
Input组件（二）
密码框 · 搜索框 · 文本域 · 前缀后缀 · 长度限制
12
12
Select组件
单选/多选 · 搜索过滤 · 下拉动画 · 空状态
13
13
Checkbox与Radio
组与单个 · 全选/半选 · 样式定制
14
14
Switch组件
开关设计 · 无障碍(ARIA) · 动画过渡
15
15
Tag与Badge组件
标签颜色 · 可关闭 · 徽标数字与小红点
16
16
Card组件
卡片容器 · 封面 · 操作栏 · 悬停 · 骨架屏
17
17
Modal组件（一）
模态框基础 · Portal传送门 · 遮罩 · 关闭逻辑
18
18
Modal组件（二）
确认对话框 · 自定义底部 · 拖拽 · 嵌套模态框
19
19
Drawer组件
抽屉组件 · 方向控制 · 层级管理 · 与Modal异同
20
20
Tooltip与Popover
气泡卡片 · 触发方式 · 箭头定位 · 边界检测
21
21
Dropdown组件
下拉菜单 · 外部关闭 · 级联菜单 · 与Select区别
22
22
Menu组件
导航菜单 · 水平/垂直 · 子菜单展开 · 选中高亮
23
23
Table组件（一）
基础表格 · 列定义 · 数据渲染 · 空数据
24
24
Table组件（二）
排序 · 筛选 · 分页 · 固定列与表头
25
25
Form组件（一）
表单布局 · 验证 · 字段注册 · 错误展示
26
26
Form组件（二）
动态表单 · 联动校验 · 异步校验 · Zod/Yup集成
27
27
Message与Notification
全局提示 · 通知提醒 · 队列管理 · 关闭回调
28
28
Progress与Spin
进度条 · 加载动画 · 全局加载 · 自定义指示器
29
29
组件库打包与发布
Rollup/Vite打包 · ESM/CJS/UMD · Tree Shaking · npm发布
30
30
组件库文档与测试
Storybook · Vitest + Testing Library · 快照 · 自动化文档