React 生态
社区整理的 awesome-react: https://github.com/enaqx/awesome-react
创建项目
上层应用：
- Next.js：https://nextjs.org，SSR 应用
- Remix：https://remix.run
- Gatsbyjs：https://www.gatsbyjs.com，静态站点
- Astro：https://astro.build，静态内容框架
推荐：
- Vite：适用于客户端渲染的 React 应用
- Next.js：适用于服务端渲染的 React 应用
- Astro：适用于静态生成的 React 应用
移动应用
- React Native: https://reactnative.dev
- Expo: https://github.com/expo/expo
Expo 是一个生产级的 React Native 框架
桌面应用
- Electron: https://www.electronjs.org
- Tauri: https://tauri.app
状态管理
- React Hooks: useState + useContext + useReducer
- Zustand: https://github.com/pmndrs/zustand
- Valtio: https://github.com/pmndrs/valtio
- Jotai: https://github.com/pmndrs/jotai
- Recoil: https://recoiljs.org
- MobX: https://mobx.js.org/README.html
- Redux: https://redux.js.org
- Redux Toolkit: https://redux-toolkit.js.org
- React Redux: https://react-redux.js.org
推荐 Zustand
路由
- React Router: https://reactrouter.com/en/main
- Tanstack Router: https://tanstack.com/router
Hooks 库
UI 组件库
- Material UI: https://mui.com，国际最流行
- Mantine: https://mantine.dev
- Ant Design: https://ant.design，国内最流行
样式
- Tailwind CSS: https://tailwindcss.com
- CSS Modules: https://github.com/css-modules/css-modules
- clsx: https://github.com/lukeed/clsx
CSS-in-JS:
- styled-components: https://styled-components.com，推荐
- Emotion: https://emotion.sh/docs/introduction
UI 库的发展趋势正朝向无样式化转变。这些库没有固定的样式且具备现代组件库所必需的所有功能和无障碍性。经常与 Tailwind 配合使用：
- Headless: https://headlessui.com
- shadcn/ui: https://ui.shadcn.com
- daisyui: https://daisyui.com
- chakra: https://v2.chakra-ui.com
基于 Tailwind CSS 的 UI 库：
动画
- Framer Motion: https://www.framer.com/motion，推荐
- react-spring: https://www.react-spring.dev
- LottieFiles: https://lottiefiles.com
- Lottie for React: https://lottiereact.com
图表
- ECharts: https://echarts.apache.org
- Recharts: https://recharts.org
- Victory: https://formidable.com/open-source/victory
- AntV: https://antv.antgroup.com/
表单
- React Hook Form: https://react-hook-form.com，推荐
- Formik: https://formik.org
国际化
- react-i18next: https://react.i18next.com
- react-intl: https://formatjs.io/docs/react-intl/
测试
- Jest: https://jestjs.io
- Vitest: https://vitest.dev
- React Testing Library: https://testing-library.com/docs/react-testing-library/intro
- Playwright: https://playwright.dev
- Cypress: https://www.cypress.io
推荐：
- 单元/集成测试：Vitest + React Testing Library
- 快照测试：Vitest
- E2E 测试：Playwright 或 Cypress
文档类
- storybook: https://storybook.js.org
- dumi: https://d.umijs.org
- Docusaurus: https://docusaurus.io
拖拽
- react-dnd: https://react-dnd.github.io/react-dnd/about
- dnd-kit: https://github.com/clauderic/dnd-kit
- react-beautiful-dnd: https://github.com/atlassian/react-beautiful-dnd
流程图
- react-flow: https://reactflow.dev
- LogicFlow: [LogicFlow](https://github.com/didi/LogicFlow)，滴滴出品
- Antv X6: https://x6.antv.antgroup.com
时间处理
- dayjs: https://day.js.org，推荐
- date-fns: https://date-fns.org
- moment: https://momentjs.com
- Luxon: https://moment.github.io/luxon/
邮件
- react-email: https://github.com/resend/react-email
- mailing: https://github.com/sofn-xyz/mailing
- mjml: https://github.com/mjmlio/mjml
地图
百度地图
数据
- tRPC: https://trpc.io，端到端类型安全，适用于紧密耦合的客户端-服务端架构，如 Next.js 搭配 TypeScript
- GraphQL: https://graphql.org
- TanStack Query: https://tanstack.com/query，适用于 REST API 或 GraphQL API，结合 axios 或 fetch 使用
- Apollo: https://www.apollographql.com，适用于 GraphQL API
- Prisma: https://www.prisma.io，数据库对象关系映射器（ORM）
- zod: https://github.com/colinhacks/zod，TS 优先的类型验证库，用于数据验证和类型定义
- PostgreSQL: https://www.postgresql.org，关系型数据库
其他
- driver.js：引导用户操作的库，可用于新手引导、操作引导
- use-debounce：防抖节流