React生态
React在行业内生态环境
- 创建项目
- CRA(create react app) ：https://github.com/facebook/create-react-app
- Vite（2022大热）：https://github.com/vitejs/vite
- SSR应用：Next.js：https://github.com/vercel/next.js
- 静态站点：Gatsby.js：https://github.com/gatsbyjs/gatsby
- 状态管理
- react hooks
- redux：https://redux.js.org/
- 远程状态管理
- React Query（REST API、GraphQL API 都有）：https://github.com/tannerlinsley/react-query
- Apollo Client（只有 GraphQL API）：https://www.apollographql.com/docs/react/
- 路由
- React-router：https://reactrouter.com/
- 样式
- CSS Modules（CSS in CSS）：https://github.com/css-modules/css-modules
- Styled Components（CSS in JS，目前最受欢迎）:https://www.robinwieruch.de/react-styledcomponents/
- Tailwind CSS（Utility-First-CSS）：https://tailwindcss.com/
- clsx（条件渲染）：https://github.com/lukeed/clsx
- 组件库
- material UI（最流行）：https://mui.com/zh/
- Ant Design（国内最流行）：https://ant.design/
- 动画库
- React Transition Group
- Framer Motion：https://www.framer.com/motion/
- react-motion：https://github.com/chenglou/react-motion
- 可视化图表
- D3：https://d3js.org/
- Recharts：https://recharts.org/zh-CN/
- react-chartjs：https://github.com/reactchartjs/react-chartjs-2
- 表单
- react hook form：https://react-hook-form.com/
- 类型检查
- PropTypes
- TS：https://www.typescriptlang.org/
- 代码风格
- eslint：https://eslint.org/
- prettier：https://github.com/prettier/prettier
- Airbnb 代码风格指南：https://keqingrong.cn/blog/2020-05-04-code-style-guide-for-react/
- React 代码风格指南：https://www.robinwieruch.de/react-libraries/
- 身份校验
- firebase：https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/
- auth0：https://auth0.com/
- 测试
- 数据处理
- immutable.js：https://immutable-js.com/
- immer：https://github.com/immerjs/immer
- i18n
- formatjs：https://github.com/formatjs/formatjs
- react-i18next：https://github.com/i18next/react-i18next
- 富文本编辑
- draft：https://draftjs.org/
- react-quill：https://github.com/zenoamaro/react-quill
- 时间处理