awesome-react
A collection of awesome things regarding React ecosystem
https://github.com/xiaomingx/awesome-react
Last synced: 26 days ago
JSON representation
一、React 核心资源
1. 基础入门与社区
- React 官方网站 - 最新官方文档（React 18+），包含基础教程、API 参考和最佳实践，是学习的首选。
- React 社区页面 - 官方整理的社区资源，包含会议、博客和贡献方式。
- React CodeSandbox 在线编辑器 - 无需本地配置，可直接在线编写、运行 React 代码，适合快速验证想法。
2. 教程与实战指南
- React 官方教程 - 官方推出的交互式教程，从组件到 Hooks 逐步讲解，适合新手。
- VS Code 中使用 React - 微软官方教程，教你配置 VS Code 开发 React 项目。
- React 面试题大全 - 包含基础、进阶、性能优化等面试高频问题及答案。
- React 设计模式 - 讲解 React 开发中常用的组件模式、状态管理模式等，提升代码质量。
- Bulletproof React - 生产级 React 应用架构指南，涵盖项目结构、TypeScript、测试等。
- React + TypeScript 速查表 - 帮有 React 基础的开发者快速上手 TypeScript 开发。
- GraphQL 全栈教程 - 讲解 React 与 GraphQL 结合的开发流程（Apollo Client 为主）。
七、开发工具（提升开发效率）
3. Immutable 工具（辅助状态管理）
三、UI 组件库（快速搭建界面）
2. 教程与实战指南
九、表格与数据网格
3. Immutable 工具（辅助状态管理）
二、React 框架（完整开发方案）
2. 教程与实战指南
五、样式解决方案
3. Immutable 工具（辅助状态管理）
- Tailwind CSS - First（工具类优先）** 样式库，通过类名组合快速实现样式，无需写 CSS 文件。 | 追求开发效率、设计系统统一的项目（常与 shadcn-ui 搭配）。 |
- Styled Components - in-JS 代表，样式与组件绑定，支持动态样式（通过 props 传值）。 | 组件样式独立、需要动态调整样式的场景。 |
- Emotion - in-JS 库，性能比 Styled Components 好，支持多种写法（字符串/对象）。 | 对性能有要求的 CSS-in-JS 项目。 |
- Vanilla Extract - in-TypeScript，样式在构建时生成 CSS 文件，兼顾类型安全和性能。 | 大型项目、重视性能和类型安全的场景。 |
八、表单处理与验证
3. Immutable 工具（辅助状态管理）
六、路由管理
3. Immutable 工具（辅助状态管理）
十一、动画与交互
3. Immutable 工具（辅助状态管理）
十三、国际化（i18n）
3. Immutable 工具（辅助状态管理）
- React i18next - 最流行的 React 国际化库，支持多语言切换、插值、复数，生态丰富（可集成翻译管理工具）。
- Format.js - 基于 ICU 语法的国际化工具，支持复杂的文本格式化（如性别、复数），适合企业级应用。
十二、React 渲染器（拓展 React 能力）
3. Immutable 工具（辅助状态管理）
十五、真实项目参考
3. 组件与库
- Mattermost - 开源企业级聊天工具，用 React 开发前端。
- Kibana - Elastic Stack 的可视化平台，React 开发的复杂数据可视化应用。
- Webamp - 浏览器端的 Winamp 播放器复刻，展示 React 处理复杂交互的能力。
十四、React Native（跨平台开发）
1. 基础资源
- React Native 官网 - 官方文档，学习基础语法和原生交互。
- Expo - 简化 React Native 开发的工具链，无需配置原生环境，支持热更新。
- Expo Snack - 在线编写 React Native 代码，可实时在手机上预览。
2. 导航
- React Navigation - 最流行的 React Native 导航库，支持栈导航、标签导航、抽屉导航。
- React Native Navigation - 基于原生导航组件，性能更好，适合需要原生体验的应用。
3. 组件与库
- React Native Paper - Material Design 风格的组件库，组件丰富，适配 iOS/Android。
- React Native Vector Icons - 支持多种图标库（FontAwesome、Material Icons），自定义性强。
- React Native Gifted Chat - 成熟的聊天 UI 组件，支持消息气泡、输入框、头像。
- Realm JS - 轻量的本地数据库，适合存储离线数据（替代 SQLite）。
十、测试工具
3. Immutable 工具（辅助状态管理）
四、状态管理与数据获取
1. 状态管理（同步状态）
2. 数据获取（异步状态）
3. Immutable 工具（辅助状态管理）
- Immer - 简化 immutable 数据操作，“直接修改”草稿数据即可生成新的 immutable 数据，无需手动深拷贝。
- Immutable.js - 早期流行的 immutable 库，提供 List/Map 等数据结构，现在更多被 Immer 替代（除非需要复杂 immutable 操作）。