本内容是对 Every React Library Explained in 12 Minutes 内容的翻译与整理。
React Router
React Router 是一个用于控制网站导航的库，同时也允许你自定义网站的 URL。它使用自定义组件，如 BrowserRouter、Routes 和 Route 组件，以创建 URL 和链接页面，你可以通过 path 属性来定义这些链接。在 React Router 中，你使用 Link 组件代替传统的 <a> 标签来放置链接。你也可以创建嵌套路由。React Router 还提供了自定义 Hook，如 useNavigate 和 useParams。
ShadCN
ShadCN 是 React 的 UI 组件库。你可以使用它搭建漂亮且实用的 UI 组件，这些组件使用 Tailwind CSS 样式，并基于 Radix UI 构建，因此高度可自定义。与其安装组件和 node 模块，你只需要复制粘贴代码到你的项目中即可。你也可以使用名为 V0 的聊天机器人创建 ShadCN 组件，V0 会自动生成组件，你只需点击几下就能将其添加到项目中。
Redux
Redux 是一个状态管理库。状态管理是将网站不同部分连接起来的一种方式，使它们协同工作。网站的不同部分，如视频、播放列表、按钮、菜单、描述等，都依赖同一份信息。但由于用户不断与网站互动，这些组件需要不断更新变化。
这时状态（state）就发挥作用了。状态就像网站的“记忆”，它包含了网站用来判断显示什么内容以及如何响应的所有信息。网站会在你在搜索框中输入文字时使用状态---比如自动补全或显示历史搜索、切换浅色/深色模式、添加或删除购物车中的商品等。
Redux 使用一个叫做 store（存储） 的地方来保存这些信息。然后通过 container（容器） 获取这些数据并传递给相应的组件。它还响应被称为 actions（动作） 的事件，比如用户点击、输入等。当用户执行一个动作后，这个动作会被传递给 reducer（简化器），reducer 决定如何更新 store 中的信息。
Formik
Formik 是一个表单管理库，让构建表单变得更容易。它处理状态管理、验证和错误处理。它还可以与另一个工具 Yup 配合使用。你通常从 Formik 组件开始，然后使用 Formik 的 Hooks 为表单添加功能。
Framer Motion
Framer Motion 是一个非常强大的 React 动画库。你可以使用 animate、initial 和 transition 等属性控制动画。它还支持手势操作，如悬停、点击、拖动和滚动。你使用 motion.div 组件开始，然后实现 useAnimation Hook 来自定义动画。Framer Motion 优化为 60 帧/秒，并可以使用 CSS 变换和 WebGL 图形。
Swiper
Swiper 是一个用于创建轮播图、图片画廊和 Hero 区块的库，适用于桌面、平板和手机。其 UI 组件具有响应式设计和流畅的过渡效果，并允许你创建导航控件。比如，你可以使用 Swiper 组件作为主滑块，使用 SwiperSlide 组件创建每个幻灯片。
TanStack Query
React Query（现称为 TanStack Query）是一个用于 React 的服务端状态管理库。它用于处理异步请求和 API 调用。你可以用它进行分页和无限滚动，通过处理数据的获取和重新获取。你可以使用 useQuery Hook 来获取和缓存数据，使用 useMutation Hook 来修改服务器数据。
React Three Fiber
React Three Fiber 是 3JS 库的 React 渲染器。它允许你创建 3D 场景、动画和游戏图形。可与其他库如 Framer Motion 和 React Spring 搭配使用。你可以使用 useLoader Hook 加载 3D 模型或 glTF 文件，还可以使用 useThree Hook 使用诸如相机等 3JS 对象。但需要掌握一些基本的 3D 概念，如网格（mesh）、材质（material）、着色器（shader）。
React Admin
React Admin 是一个用于构建管理面板和企业级应用的框架，内置了许多组件。你可以使用 GraphQL 或 Firebase 将其连接到后端。它可以创建包括身份验证和权限控制在内的 CRUD 操作，也非常适合构建后台管理系统和 CMS。
React Bootstrap
React Bootstrap 是 Bootstrap 的 React 版本。它自带如按钮、模态框、导航栏等组件。原始 Bootstrap 依赖 CSS 和 jQuery，而 React Bootstrap 则能访问虚拟 DOM。
React Tailwind
React Tailwind 是一个用于构建网站用户界面的库。相较于 Bootstrap，它的组件更可自定义。虽然不像 Bootstrap 那样自带组件，但你可以通过 npm install 命令将 Tailwind 安装到 React 项目中。
Material UI
Material UI 是一个基于 Google Material Design 的 React UI 组件库，包含 50 多个预建组件。支持自定义主题、响应式设计，并优化了可访问性（适用于屏幕阅读器）。它还自带一个图标库 Material Icons。
Chakra UI
Chakra UI 是一个强调可访问性的 UI 组件库。所有组件遵循 WAI-ARIA 标准，帮助残障人士使用界面。你可以创建主题、支持暗模式、为组件添加样式，提供 useDisclosure Hook 管理状态以及 useToast Hook 显示反馈信息，也可通过 Framer Motion 添加动画。
Ant Design
Ant Design（由蚂蚁集团开发）是一个企业级 React UI 组件库，包含按钮、日历、树形结构、图表等组件，支持 50 多种语言，是构建企业应用的理想选择。
Headless UI
Headless UI 与其他 UI 库不同，它提供完全无样式的组件，让你可以自由使用喜欢的 CSS 库自行定制。它注重可访问性，并支持状态管理。
React 360
此项目已经archived
React 360 是一个用于构建沉浸式 360 度虚拟现实体验的框架。它结合 WebGL 和 WebVR，可在 VR 头戴设备上运行。你可以用它创建 3D 环境和空间界面，添加 360 视频、图片和全景图。内置组件包括 View、Text、Entity 和 VRButton，可用于虚拟旅游、产品演示和培训模拟。
Recharts
Recharts 是基于 D3JS 构建的图表库，用于创建响应式图表、可视化图形。利用 React 的组件结构构建图表、饼图、折线图等，支持动画和交互操作。
Zustand
Zustand 是一个轻量级状态管理库，几乎不需要模板代码，被认为比 Redux 更简单。它不需要 reducer、action 或 provider。
React Hook Form
React Hook Form 是一个用于 React 表单管理的库，可减少不必要的重新渲染。它与 Chakra 和 Material UI 等 UI 库完美集成。你可以使用 useForm Hook 管理状态和验证，编写更少代码构建高效表单。
React Spinner
React Spinner 是一个加载动画的可视化库，用于在加载内容时提供视觉反馈。你可以选择多种加载器，比如 CircleLoader，并自定义颜色、尺寸、速度和样式。
React DnD
React DnD 是一个为 React 项目添加拖放功能的库。支持鼠标、触控、键盘拖放。使用 useDrag Hook 使组件可拖动，useDrop Hook 使组件可以接收拖拽项目。适合用于文件上传器、表单构建器和游戏界面。
React AG Grid
React AG Grid 是一个数据表格库，支持排序、过滤、分页、行选择，能处理大量数据。你可以用 pagination 属性启用分页，用 columnDefs 定义列，还可以将表格导出为 Excel。
Vite
Vite（取自法语“快”）是一个前端构建工具，专为加快开发速度而设计。虽然由 Vue 的作者开发，但也支持 React。你可以在命令行中快速创建 React 项目。与 create-react-app 相比，启动速度更快。它还支持 热模块替换（HMR），可以在不刷新页面的前提下即时反映代码更改。
Styled Components
Styled Components 是一个 React 的 CSS-in-JS 库，允许你将 CSS 写入组件内，避免全局样式冲突。
EmotionJS
EmotionJS 与 Styled Components 类似，也是 CSS-in-JS 库，但更轻量，速度更快，还支持服务端渲染。
Mantine
Mantine 是一个 React UI 组件库，提供 100 多个可自定义组件和 50 多个 Hooks。支持响应式设计、浅色/深色主题，内置表单库，适配 Redux 和 Formik。
SWR
SWR 是一个用于远程数据获取的 React Hooks 库，全称是 “stale while revalidate”（陈旧但验证）。它支持数据获取、变更、缓存、分页、无限滚动和错误处理。
它的工作原理是：首次加载页面时，先显示本地缓存的数据（即使有点旧），确保加载迅速，同时请求服务器上的新数据，一旦新数据返回，就更新缓存并重新渲染页面，整个过程用户无感。
Next.js
Next.js 是一个用于构建服务端渲染页面的 React 框架。它可以帮助开发者创建全栈应用，提升性能、加载速度和 SEO。
React Chart.js 2
React Chart.js 2 是将 Chart.js 集成到 React 中的组件库。提供如柱状图、折线图、饼图等组件，支持事件处理（如点击、悬停），图表高度可自定义。
React Spring
React Spring 是一个专注于物理动画的 React 动画库，模拟现实世界的运动。不同于 CSS 动画，它使用弹簧物理（spring physics）。你可以使用 useSpring Hook 控制动效，比如按钮、div 的过渡、透明度、缓动效果等。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。