译：101个React技巧#10必知的React库/工具🧰分类 #10: 必知的 React 库/工具 🧰 69.

69. 使用 `react-router` 为你的应用添加路由功能

如果你的应用需要支持多页面，请查看 react-router。

你可以在这里找到一个最小示例这里。

70. 使用 `swr` 或 `React Query` 实现一流的数据获取

数据获取可能非常棘手。

然而，像 swr 或 React Query 这样的库让它变得容易得多。

我推荐简单场景使用 swr，复杂场景使用 React Query。

71. 使用 `formik`、`React Hook Form` 或 `TanStack Form` 简化表单状态管理

我曾经讨厌在 React 中管理表单 🥲。

直到我发现了这些库：

所以如果你在表单方面遇到困难，一定要看看这些。

72. 使用 `Format.js`、`Lingui` 或 `react-i18next` 国际化你的应用

如果你的应用需要支持多语言，它应该被国际化。

你可以使用这些库来实现：

73. 使用 `framer-motion` 轻松创建令人印象深刻的动画

动画可以让你的应用脱颖而出 🔥。

你可以使用 framer-motion 轻松创建它们。

74. 厌倦了重复发明自定义钩子？看看 usehooks.com/

如果你像我一样，一遍又一遍地编写相同的钩子。

所以先看看 usehooks.com，也许有人已经为你完成了这项工作。

75. 利用 UI 库如 Shadcdn 或 Headless UI 简化应用开发

构建可访问、响应式且美观的 UI 规模很难。

像 Shadcdn 或 Headless UI 这样的库让它变得更容易。

Shadcdn 提供了一组可访问、可重用和可组合的 React 组件，你可以直接复制粘贴到你的应用中。在撰写本文时，它需要 Tailwind CSS。
Headless UI 提供了无样式的、完全可访问的 UI 组件，你可以用来构建自己的 UI 组件。

76. 使用 `axe-core-npm` 库检查网站的可访问性

网站应该对所有人都可访问。

然而，很容易忽略可访问性问题。

axe-core-npm 是一种快速、安全且可靠的方法，可以在开发过程中检查网站的可访问性。

💡 提示：如果你是 VSCode 用户，可以安装相关扩展：axe Accessibility Linter。

77. 使用 `react-codemod` 轻松重构 React 代码

Codemods 是以编程方式在代码库上运行的转换 💻。

它们使得重构代码库变得容易。

例如，React codemods 可以帮助你从代码库中删除所有 React 导入，更新代码以使用最新的 React 功能等。

所以，在手动重构代码之前，一定要看看这些。

78. 使用 vite-pwa 将你的应用转变为渐进式 Web 应用 (PWA)

渐进式 Web 应用 (PWA) 像普通网页一样加载，但提供了离线工作、推送通知和设备硬件访问等功能。

你可以使用 vite-pwa 轻松在 React 中创建一个 PWA。

译：101个React技巧#10必知的React库/工具🧰

69. 使用 react-router 为你的应用添加路由功能

70. 使用 swr 或 React Query 实现一流的数据获取

71. 使用 formik、React Hook Form 或 TanStack Form 简化表单状态管理

72. 使用 Format.js、Lingui 或 react-i18next 国际化你的应用

73. 使用 framer-motion 轻松创建令人印象深刻的动画