要使用React开发应用程序，你需要熟悉正确的库来添加所需的功能。
例如，要添加某个特定功能，如认证或样式，你需要找到一个好的第三方库来处理它。
在这份全面的指南中，我将向你展示我在2024年推荐使用的所有库，以便轻松构建快速、可靠的React应用程序。
🛠️ React Framework
首先，我们要怎样才能在2024年创建我们的React应用呢？
如果你想要一个客户端渲染的React项目，你最好的选择是Vite，它已经取代了被弃用的Create React App工具。
如果你对构建一个服务器端渲染或全栈React项目感兴趣，Next.js是最完整和最受欢迎的全栈React框架。Next.js的第13版本引入了App Router，它为我们提供了像服务器组件和服务器操作这样的功能，这让我们能够在服务器上获取数据和渲染我们的React组件。
如果Next.js的一些功能对你来说有点难以掌握，一个很好的全栈替代选择，用于制作动态和静态网站的是Remix。
如果你正在制作一个你希望能快速加载并且主要提供静态内容的应用，另一个很棒的选择是Astro。Astro允许你在使用React的同时使用其他框架，如Vue和Svelte（这意味着它是"框架不可知的"），并且旨在向客户端传输最小量的JavaScript，这结果是非常快的加载时间。
📦 Package Manager
要安装本指南中列出的所有这些库，你需要一个叫做包管理器的东西。
如果你已经安装了Node.js，而Node.js是在你的计算机上本地运行React项目所必需的，你可以简单地使用NPM，它在2024年仍然是一个很好的选择。NPM以外还有其他一些选择，包括Yarn和PNPM。
最新的选择，它在JavaScript世界中迅速变得非常流行的是Bun。Bun既是一个类似Node的JavaScript运行时环境，也是一个包管理器，它被宣传为比Node和NPM更快的选择。
🎨 CSS & UI Libraries
现在你的项目已经建立起来，库也安装好了，你打算如何给你的React项目加上样式呢？
我上面提到的所有框架都包括了基本的CSS支持。如果你想继续只用纯CSS来为你的React项目添加样式，那在2024年这完全没问题。
你可以使用CSS样式表或CSS模块，但目前在纯样式方面最受欢迎的选择可能是使用Tailwind CSS。Tailwind CSS确实需要一些设置步骤，但它允许你链接预制的类，以便快速直接在组件文件中添加样式。
ShadCN是2024年非常流行的一个UI库，它将Tailwind CSS与一个名为Radix UI的组件库结合在一起。像Radix这样的组件库允许你轻松添加组件，无需自己编码。ShadCN因为在使用Tailwind CSS的帮助下提供了更大的控制权来定制组件的外观而变得流行。
还有一堆其他非常流行的功能性组件库。Material UI仍然很受欢迎，其他像Mantine和Chakra UI也是。你选择哪一个真的取决于你希望你的最终应用程序看起来如何。我建议尝试一系列这些UI库，看看哪一个你最喜欢。
💽 State Management
React内置了一些工具，比如useState和useReducer，用于在基本应用程序中管理你的应用状态。如果你在用Next.js，当使用服务器组件时，状态管理已经转移到了URL上。尽管有这些选项，你可能需要一种更精确的方式来管理状态。
你可能有很多状态片段，并希望更大程度地控制状态更新如何渲染你的组件。如果是这样，你可以选择一个专门的状态管理库。
比如Zustand、Recoil和Jotai这样的库，它们都非常相似，允许你通过在一个对象上声明属性和方法来简单地管理状态。这最终是在你的应用组件中处理状态管理的最简单方式。
如果我必须为2024年我所有的React项目选择一个状态管理库，我会选择Zustand。它几乎不需要时间来学习如何使用。它也不需要你在应用程序中添加一个提供者组件，这使得它非常方便地在任何你喜欢的组件中使用。
🐕 Data Fetching
状态管理和数据获取往往是相辅相成的。如果你正在构建一个客户端渲染的React应用，你很可能需要一个数据获取库。
在2024年，从服务器中获取数据的最佳方式仍然是React Query，现在被称为Tanstack Query。TanStack Query不仅让你对获取数据、何时获取和重新获取数据、缓存等有细致的控制权，而且通过方便的自定义hooks，还能非常容易地改变或修改数据。
另一个坚实的选择是SWR，它也提供了一个自定义hook来处理查询和变更，但它所提供的功能要简单得多。选择其中任何一个进行数据获取和执行HTTP请求，使用fetch API，你都不会错。
🧭 Routing
如果你正在使用像 Next.js、Remix 或 Astro 这样的框架，那么你的路由设置已经妥善处理了。所有这些框架都内置了创建项目中的路由或页面的方法。
对于一个客户端渲染的 React 应用，比如用 Vite 或 Create React App 创建的应用，你需要选择一个路由库。React Router 依然是最受欢迎的选择。它能满足你可能有的所有路由需求。由于其带有的 loader 属性的数据加载功能，它也非常先进。loader 属性允许你为给定路由抓取数据，无需使用像 React Query 这样的外部库。
一个看起来同样具有很好特性的新兴库是 Tanstack Router。Tanstack Router 被设计为完全类型安全，并提供与 React Router 版本 6 一样的优秀默认数据获取功能。
虽然 Tanstack Router 比较新，但不管选择哪一个，你真的不会出错，如果你的应用已经在使用 Tanstack Query 或 SWR，那么它就是完美的搭档。
🔒 Authentication
虽然身份验证是我们项目中由服务器端处理的事情，但了解哪些库能与 React 项目（无论是在客户端还是服务器上）最佳集成仍然很重要。
到了 2024 年，Supabase 已经成为一个非常强大的身份验证解决方案，并且能够轻松地与 React 应用集成，无论是在服务器上，比如在 Next.js 项目中，还是在客户端。在过去的几年里，出于类似的原因选择了 Firebase，但是在服务器端的集成更加困难。
如果你正在使用 Next.js，你有很多可用的选项，如 NextAuth 、Clerk 和新来者 Lucia。遗憾的是，当前 Next.js 没有内置的 auth 库，但或许将来会有一个。
与此同时，我个人会使用 Supabase，并且强烈推荐你也通过他们的文档来了解一下。
🥞 Database & ORM
正如认证机制一样，你的数据库应该是一个在很大程度上要与你的服务器端代码对话的东西。
像Supabase和Firebase这样的数据库不需要你有一个服务器。你可以直接在客户端获取和更改数据，并且你可以在仪表盘内添加安全规则以确保根据用户的认证状态和角色允许或不允许某些类型的请求。
除了这两个选项之外，如果你使用的是传统的服务器或全栈框架，那么还有无数的选择。到2024年，人们明显更偏爱像MySQL或PostgreSQL这样的SQL数据库，而不是像MongoDB或Firebase这样的NoSQL数据库。
关于你的数据库，与数据库交流，你要么使用纯SQL，要么使用允许你使用自定义查询语言的ORM。流行的ORM选择包括Prisma 或Drizzle。两者都让你能生成类型安全的代码，这样你就知道会返回什么数据，并且都能很好地与你选择的SQL或NoSQL数据库集成。
🕰️ Dates & Times
在使用JavaScript进行开发时，强烈建议配备一个日期库。JavaScript的日期构造器表现不稳定，几乎不可能在处理时区等问题上可靠地工作。
有许多选项可供选择，但我倾向于使用date-fns 或day.js。这两个都是体积小巧而功能丰富的库，允许你在浏览器或后端操作JavaScript日期。选择任何一个都不会出错。
📋 Forms
在大多数情况下，如果你只是在创建一个带有简单注册表单的应用，使用输入框的required属性通常就足够了，你可能不需要表单库。
如果你在构建一些更复杂的东西，并且有很多表单，React Hook Form是一个功能齐全的表单库，它允许你通过非常少的代码来验证表单输入并显示错误。
其他表单库，如Formik和React Final Form，也会提供相同的功能，但React Hook Form会稍好一些，因为它基于hooks的更现代的API，并且通常需要的代码更少。
☔️ Drag & Drop
当涉及到为你的应用程序添加拖放功能时，你几乎肯定需要一个第三方库。过去最受欢迎的选择是React Beautiful DnD。截至2024年，它不再接收定期更新。
展望未来，一个坚实的替代方案是使用DnD Kit。它既轻量级又非常灵活，而且文档包括了一系列超级有用的示例，涵盖了实现拖放时你可能遇到的每一个用例。
📱 Mobile Apps
如果你想开发一个移动应用，对于React开发者来说，一直以来的选择都是React Native。现在有一些令人兴奋的库正在推动React Native的界限，扩展到Web领域。
Expo 是一个类似于Vite的工具，但它专门用于制作移动React应用。它具有快速刷新等优秀功能，通过Expo Go，你可以很容易地在你自己的设备上运行项目，同时开发它。Expo让将你的移动代码库部署到网站变得更加简单。
这也是其他项目的终极目标，例如Tamagui，如果你想制作一个真正的原生应用，能在Android、iOS和网络上运行，你也应该查看一下。
如果你已经编写了一个在浏览器中运行的React应用，将它作为一个原生应用运行，并在Apple App Store或Google Play商店上发布的最快方法是使用Capacitor.js。
🚀 Deployment
现在比以往任何时候都有更多的方式来部署你的React应用。Vercel可能是部署你的React应用最容易的平台，无论它是客户端渲染还是服务器端渲染。他们几乎支持你能想到的所有框架，包括非JavaScript语言。他们提供一个慷慨的免费计划，同一领域的竞争对手包括Netlify和Cloudflare Pages。
Cloudflare Pages可能在设置上稍微复杂一些，特别是如果你有一个全栈React项目，但在所有这些选项中，它在价格方面是最慷慨的。如果你不介意为服务器支付费用，你可以使用像Railway或Render这样的服务，如果你有一个与你的React应用分离的服务器，部署到这样的服务上是很棒的选择。
🏆 The #1 Library To Know
最后，如果你是一名2024年的React开发者，那么你应该知道的第一个重要库就是TypeScript。我提到的所有框架都包括使用TypeScript构建React应用的选项。
TypeScript是一个工具，它允许你在JavaScript代码中检测类型错误，以帮助你预防运行时错误。你可以仅使用JavaScript构建你所有的React项目，但在某些时候，你要么会看到自己使用TypeScript的好处，要么会看到一个包含TypeScript的代码库。
我强烈推荐你留出一些时间来学习TypeScript。它是作为React开发者最必须掌握的、需求最旺的工具，并且可以极大地提升你的整体代码质量。