enaqx/awesome-react · 上手攻略
- 仓库：enaqx/awesome-react
- 链接：https://github.com/enaqx/awesome-react
- 分类：skill
- 作者：Jay
- 更新：2026-07-14
这是什么
awesome-react 是 GitHub 上最知名的 React 生态资源列表之一，由维护者 enaqx 长期运营（仓库创建于 React 尚在 Beta 阶段的早期）。它收录了 React 生态中各类工具、库、框架的链接，按功能分类整理，涵盖从基础学习资料到生产级组件库、从状态管理到动画、从测试工具到渲染器的完整技术栈。
本质上是 React 生态的导航地图——不是某一个具体的库，而是帮助你找到解决特定问题的最佳工具的索引目录。
解决什么问题
React 生态极度碎片化：做路由找 react-router、状态管理有 Redux/Zustand/Jotai/Recoil、UI 组件库更是数不胜数。初学者和进阶开发者面临的核心问题是：
- 不知道生态里有什么：每遇到一个新需求，不知道有哪些现成工具可选择
- 不知道选哪个：同类工具太多（如状态管理库），不了解各自优缺点
- 不知道去哪儿找：官方文档分散在不同仓库，awesome-react 做了统一的入口整理
快速安装
本仓库无需安装，直接查阅：
# 克隆到本地方便离线查看
git clone https://github.com/enaqx/awesome-react.git
cd awesome-react
# 用任意文本编辑器打开 README
cat README.md
无需 Node.js 环境，README.md 即是完整内容。
核心用法
按需查找特定工具
在 README 中按分类目录定位，例如需要图表库时找到「React Charts」章节：
- [recharts](https://github.com/recharts/recharts) - Redefined chart library built with React and D3
- [visx](https://github.com/airbnb/visx) - Visualization components
- [victory](https://github.com/FormidableLabs/victory) - A collection of composable React components
- [nivo](https://github.com/plouc/nivo) - Provides a rich set of data visualization components
快速建立技术选型认知
仓库的每个分类都给出了主流选项的简短描述，适合用于：
状态管理选型对比（2025 年现状参考）：
| 库 | 特点 | 适合场景 |
|---|---|---|
| Redux | 成熟、庞大、最多企业采用 | 大型复杂应用 |
| Zustand | 轻量、简洁、Hooks 原生 | 中小型应用 |
| Jotai | 原子化状态、细粒度 | 复杂状态关系 |
| TanStack Query | 服务端状态、缓存 | 数据获取为主 |
| SWR | 轻量数据获取 | 简单异步状态 |
⚠️ 注意：以上为基于仓库描述的通用认知，具体版本和特性请查阅各库官方文档。
框架快速对比
- [Next.js](https://github.com/vercel/next.js) - The React Framework（当前最主流全栈框架）
- [Gatsby](https://github.com/gatsbyjs/gatsby) - Build modern websites with React（静态站点为主）
- [Remix](https://github.com/remix-run/remix) - Full-stack web framework（注重 Web 标准和用户体验）
- [refine](https://github.com/refinedev/refine) - Build React CRUD apps without constraints（ B2B/管理后台）
- [shadcn/ui](https://github.com/shadcn-ui/ui) - Components built using Radix UI + Tailwind CSS（新锐设计系统）
完整生态分类速查
| 分类 | 代表工具 |
|---|---|
| 框架 | Next.js, Remix, Gatsby, refine, shadcn/ui |
| 组件库 | MUI, Ant Design, Chakra UI, Mantine, Headless UI |
| 状态管理 | Redux, Zustand, Jotai, TanStack Query, SWR |
| 路由 | React Router, TanStack Router |
| 样式 | styled-components, Emotion, Tailwind CSS, vanilla-extract |
| 图标 | react-icons, Lucide React, Heroicons |
| 数据可视化 | Recharts, Nivo, Visx, Victory |
| 3D/图形 | React Three Fiber, Remotion |
| 国际化 | react-i18next, react-intlayer |
| 动画 | Framer Motion, React Spring |
| 表单 | React Hook Form, react-jsonschema-form |
| 测试 | Jest, React Testing Library, Cypress, Playwright |
| 开发工具 | Vite, ESLint, React Scan, Why Did You Render |
典型适用场景
- 技术选型调研：接手新项目或学习新领域时，用仓库快速了解该领域有哪些主流工具
- 构建 React 技术栈：从框架→路由→状态管理→UI 库→工具链完整走一遍，建立认知地图
- 面试准备：React 生态知识是前端面试高频题，仓库可作为知识面检查清单
- 发现新工具：定期浏览各分类，发现自己没有用过的优秀替代品
- 开源贡献参考：找感兴趣的库，了解其定位和同类竞品
坑与注意
- 列表不更新非活跃项目：仓库是纯链接收集，部分老旧项目链接可能已 404 或不再维护。查找具体工具时，建议同时确认 GitHub 最新提交时间和 Star 趋势。
- 不代表推荐排名：列表按字母或维护者习惯排序，不代表工具优劣排序。选型时需自行判断。
- 仅提供链接，不含教程：仓库不提供各工具的详细使用说明，定位是「发现工具」而非「学习工具」。
- React Native 内容单独分类：仓库后半部分有完整的 React Native 生态资源，但 README 很长，浏览器搜索（Ctrl+F）定位更快。
- 维护者不背书工具安全性：链接包含各类型库，建议通过 npm 下载量、GitHub issue 数量和社区口碑综合判断。
与同类对比
| 仓库 | 规模 | 特点 |
|---|---|---|
| enaqx/awesome-react | 极大（生态全覆盖） | 综合性最强，React + React Native |
| brillout/awesome-react-components | 中等 | 专注 React 组件库，不含框架/工具链 |
| React 官方生态列表 | 中等 | 官方维护，但覆盖范围有限 |
核心差异：awesome-react 是目前最全面的 React 综合资源索引，几乎任何 React 相关问题都能在这里找到方向，是 React 开发者的常备书签。
一句话推荐结论
React 生态太庞杂？用一个仓库搞定全景导航——无论你是要找状态管理库、UI 组件还是动画方案，这里就是起点。
本攻略基于 2026-07-14 公开信息整理。awesome-react 是纯链接索引库，各工具的具体版本、功能和安全性请以官方文档为准。