2024 年高效开发的 React 生态系统

要使用 React 制作应用程序,需要熟悉正确的库来添加您需要的功能。例如,要添加某个功能(例如身份验证或样式),您需要找到一个好的第三方库来处理它。

在这份综合指南中,我将向您展示我建议您在 2024 年使用的所有库,以轻松构建快速、可靠的 React 应用程序。

🛠️ React 框架

首先,我们如何在 2024 年创建我们的 React 应用程序?

如果你想要一个客户端渲染的 React 项目,你最好的选择是 Vite,它取代了已弃用的 Create React App 工具。

如果您有兴趣构建服务器渲染或全栈 React 项目,Next.js 是最完整、最流行的全栈 React 框架。 Next.js 13 版本引入了应用程序路由器,它为我们提供了服务器组件和服务器操作等功能,使我们能够获取数据并在服务器上渲染 React 组件。

如果 Next.js 的某些功能对您来说有点难以掌握,那么用于制作动态和静态网站的一个很好的全栈替代方案是 Remix。

如果您正在制作一个想要快速加载并主要提供静态内容的应用程序,另一个不错的选择是 Astro。 Astro 允许您将 React 与 Vue 和 Svelte 等其他框架一起使用,这意味着它是与框架无关的,并且旨在向客户端提供最少量的必要 JavaScript,从而实现非常快的加载时间。

📦 包管理器

要安装本指南中列出的所有这些库,您将需要一个称为包管理器的东西。

如果您安装了 Node.js(这是在计算机上本地运行 React 项目所必需的),您可以简单地使用 NPM,这在 2024 年仍然是一个不错的选择。NPM 还有其他替代品,包括 Yarn 和 PNPM。

最新的替代方案是 Bun,它在 JavaScript 世界中迅速变得非常流行。 Bun 既是一个像 Node 一样的 JavaScript 运行时,也是一个包管理器,并且被宣传为 Node 和 NPM 的更快替代品。

🎨 CSS 和 UI 库

现在您已经设置了项目并安装了库,您将如何设计您的 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 仍然很受欢迎。您选择哪一个实际上取决于您希望最终应用程序的外观。我建议尝试一堆这样的 UI 库,看看你最喜欢哪一个。

💽 状态管理

React 具有 useState 和 useReducer 等内置工具来管理基本应用程序中的应用程序状态。如果您使用 Next.js,则在使用服务器组件时,状态管理已移至 URL。尽管有这些选项,您可能需要一种更精确的方式来管理状态的方法。

您可能有很多状态,并且希望更好地控制状态更新如何呈现组件。如果是这样,您可以使用专用的状态管理库。

Zustand、Recoil 和 Jotai 等库都非常相似,允许您通过声明对象的属性和方法来管理状态。这最终是处理应用程序组件状态管理的最简单方法。

如果我必须在 2024 年为我的所有 React 项目选择一个状态管理库,我会选择 Zustand。几乎不需要时间就能学会如何使用它。它还不需要您向应用程序添加提供程序组件,这使得在您喜欢的任何组件中使用都非常方便。

🐕 数据获取

状态管理和数据获取通常是齐头并进的。如果您正在构建客户端渲染的 React 应用程序,您可能需要一个数据获取库。

2024 年,在 React 应用程序中从服务器获取数据的最佳方式仍然是 React Query 或现在的 Tanstack Query。 TanStack Query 不仅可以让您对获取数据、何时获取和重新获取数据、缓存进行细粒度控制,还可以非常轻松地更改或变异数据。

另一个可靠的替代方案是 SWR,它还提供了一个自定义挂钩来处理查询和突变,但就其提供的功能而言,它要简单得多。选择其中任何一个并获取数据并使用 fetch API 执行 HTTP 请求都不会出错。

🧭 路由

如果您使用的是 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,那么它是完美的搭配。

🔒 认证

虽然身份验证是由我们项目的服务器端处理的,但值得了解哪些库在客户端和服务器上与 React 项目集成得最好。

到 2024 年,Supabase已成为一种非常强大的身份验证解决方案,并提供与 React 应用程序的轻松集成,无论是在服务器上(例如 Next.js 项目)还是在客户端上。在过去的几年中,出于类似的原因选择了 Firebase,但它更难集成到服务器端。

如果您使用 Next.js,您可以使用大量选项,例如 NextAuth、Clerk 和新来者 Lucia。不幸的是,今年 Next.js 还没有内置的身份验证库,但也许将来会有一个。

与此同时,我个人将使用 Supabase,并强烈建议您通过他们的文档查看它们。

🥞 数据库和 ORM

与身份验证非常相似,您的数据库将并且应该在很大程度上与您的服务器端代码进行交互。

Supabase 和 Firebase 等数据库不需要您拥有服务器。您可以直接在客户端中获取和更改数据,并且可以在仪表板中添加安全规则,以确保根据用户的身份验证状态和角色允许或不允许某些类型的请求。

除了这两个选项之外,如果您使用传统服务器或全栈框架,还有无数的选项。到 2024 年,人们显然更倾向于使用 MySQL 或 PostgreSQL 等 SQL 数据库,而不是 MongoDB 或 Firebase 等 NoSQL 数据库。

对于数据库,要与数据库对话,您可以使用纯 SQL 或允许您使用自定义查询语言的 ORM。 ORM 的流行选项包括 Prisma 或 Drizzle。两者都允许您生成类型安全的代码,以便您知道将返回哪些数据,并且两者都可以与您选择的 SQL 或 NoSQL 数据库很好地集成。

🕰️ 日期和时间

当您使用 JavaScript 时,始终建议您拥有一个日期库。 JavaScript 的日期构造函数是不可预测的,并且几乎不可能可靠地处理时区等事物。

有很多选择,但我倾向于使用 date-fns 或 day.js。两者都是非常小但内容丰富的库,允许您在浏览器或后端操作 JavaScript 日期。任何一个都不会出错。

📋 表格

在大多数情况下,如果您只是使用简单的注册表单构建应用程序,则可能不需要表单库,通常只需要在输入中使用 required 属性即可。

如果您正在构建更复杂的东西并且有很多表单,React Hook Form 是一个功能齐全的表单库,它允许您使用很少的代码来验证表单输入并显示错误。

其他表单库,例如 Formik 和 React Final Form,将为您提供相同的功能,但 React Hook Form 更好一些,因为它具有基于钩子的更现代的 API,并且通常需要更少的代码。

☔️ 拖放

当谈到向应用程序添加拖放功能时,您几乎肯定需要第三方库。过去最受欢迎的选择是 React Beautiful DnD。自 2024 年起,它不再接收定期更新。

展望未来,拖放的可靠替代品是使用免打扰套件。它是轻量级的,非常灵活,并且文档包含一堆超级有用的示例,涵盖了您在实现拖放时可能遇到的每个用例。

📱 移动应用程序

如果你想构建一个移动应用程序,React Native 一直是 React 开发人员可以使用的库。有一些令人兴奋的库突破了 React Native 的界限,扩展到了网络。

Expo 是一个类似于 Vite 的工具,但用于制作移动 React 应用程序。它具有快速刷新等出色功能,并且借助 Expo Go,您可以在开发项目时轻松在自己的设备上运行项目。 Expo 使您可以更轻松地获取移动代码库并将其部署到网络上。

这是 Tamagui 等其他项目的最终目标,如果您想制作一个在 Android、iOS 和 Web 上运行的真正的本机应用程序,您也应该检查一下。

如果您已经编写了要在浏览器中运行的 React 应用程序,则使其作为本机应用程序运行并在 Apple App Store 或 Google Play Store 上启动的最快方法是使用 Capacitor.js。

🚀 部署

部署 React 应用程序的方法比以往更多。Vercel 可能是部署 React 应用程序最简单的平台,无论是客户端渲染还是服务器渲染。它们几乎支持您能想到的所有框架,包括非 JavaScript 语言。他们有一个慷慨的爱好计划,同一领域的竞争对手包括 Netlify 和 Cloudflare Pages。

Cloudflare Pages 的设置可能有点棘手,特别是如果您有一个全栈 React 项目,但就价格而言,它是所有这些选项中最慷慨的。如果你不介意购买服务器,你可以使用 Railway 或 Render 之类的东西,如果你有一个与你的 React 应用程序分开的服务器,那么部署到它是很棒的。

🏆 排名第一的库

最后,如果您是 2024 年的 React 开发人员,您应该了解的第一个重要库是 TypeScript。我提到的所有框架都包含使用 TypeScript 构建 React 应用程序的选项。

TypeScript 是一个工具,可让您检测 JavaScript 代码中的类型错误,以帮助您防止运行时错误。您可以仅使用 JavaScript 构建所有 React 项目,但在某些时候,您要么会自己看到使用 TypeScript 的好处,要么会查看包含 TypeScript 的代码库。

我强烈建议您留出一些时间来学习 TypeScript。作为 React 开发人员,它是最重要、最受欢迎的工具,可以极大地提高您的整体代码质量。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/505772.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

多协议支持 API 调测客户端:Postman 的强力替代品 | 开源日报 No.210

Kong/insomnia Stars: 32.6k License: Apache-2.0 insomnia 是一个开源的、跨平台的 API 客户端,支持 GraphQL、REST、WebSockets、SSE 和 gRPC 协议,并提供云存储、本地存储和 Git 存储。 调试各种流行协议和格式的 API。使用原生 OpenAPI 编辑器设计…

计算机网络-HTTP相关知识(一)

HTTP基础 基本概念:HTTP是一种计算机之间交流通信的规范,它允许数据在两点之间传输,这个过程可以包括中转或接力。HTTP不仅仅包括文本,还可以包括图片、音频等超文本。状态码:HTTP状态码分为五类: 2xx&…

11-SpringSecurity:Session共享,菜鸟驿站java面试题

pom依赖 org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-security org.springframework.boot spring-boot-starter-data-redis org.springframework.session spring-session-data-redis org.projectlombok lombok …

蓝桥杯第十五届抱佛脚(八)并查集

蓝桥杯第十五届抱佛脚(八)并查集 基本概念 并查集是一种数据结构,用于管理一系列不交集的元素集合,并支持两种操作: 查找(Find): 查找操作用于确定某个元素属于哪个集合&#xf…

Java基础学习: JDK动态代理

文章目录 一、什么是JDK动态代理二、JDK动态代理的特点三、JDK动态代理类如何使用四、JDK动态代理原理分析1、创建代理对象2、生成代理类 一、什么是JDK动态代理 JDK动态代理是Java提供的一种动态生成代理类和代理对象的技术。它主要利用Java的反射机制实现,在运行…

Lucene及概念介绍

Lucene及概念介绍 基础概念倒排索引索引合并分析查询语句的构成 基础概念 Document:我们一次查询或更新的载体,对比于实体类 Field:字段,是key-value格式的数据,对比实体类的字段 Item:一个单词&#xff0…

【计算机网络】四层负载均衡和七层负载均衡

前言 1、分层方式 首先我们知道,在计算机网络中,常用的协议分层方式:OSI和TCP/IP,以及实际生产中使用的协议划分方式。 在OSI中,各层的职责如下: 应用层:对软件提供接口以使程序能使用网络服…

都江堰操作系统系统架构图

都江堰操作系统设计思想源于中国传统的“天人合一,道法自然”哲学思想,内核调度系统采用事件调度,全球首创,突破单机桎梏,实现异构网络调度,开拓新赛道,实现换道超车。“有事就动,没…

Linux的中间件

我们先补充点关于awk的内容 awk的用法其实很广。 $0 表示整条记录 变量: NF 一行中有多少个字段(表示字段数) NR : 代表当前记录的序号,从1开始计数。每读取一条记录,NR的值就会自动增加1。(…

Applied Spatial Statistics(一)统计推断

Applied Spatial Statistics(一)统计推断 1.统计推断:Bootstrap 置信区间 本笔记本演示了如何使用引导方法构建统计数据的置信区间。 我们还将检查 CI 的覆盖概率。 构建 Bootstrap 置信区间检查覆盖概率Bootstrap CI 相关系数 import nu…

数据挖掘入门项目二手交易车价格预测之特征工程

文章目录 目标常见的特征工程具体步骤1. 导入数据2. 删除异常值3. 特征构造3.1 为树模型构造特征3.2 为LR NN 之类的模型构造特征 4. 特征筛选过滤式包裹式嵌入式 5. 总结 本文数据集来自阿里天池:https://tianchi.aliyun.com/competition/entrance/231784/informat…

Debian linux版本下运行的openmediavault网盘 千兆网卡升级万兆

一、适用场景 1、使用vmware ESXi虚拟化平台运行多种不同应用服务器时,其中网盘服务器采用开源的openmediavault搭建; 2、将老专业服务器升级千兆网为万兆网; 3、需要转移的数据量大的企业或用户; 4、从服务器到服务器的数据转移…

LeetCode刷题【链表,图论,回溯】

目录 链表138. 随机链表的复制148. 排序链表146. LRU 缓存 图论200. 岛屿数量994. 腐烂的橘子207. 课程表 回溯 链表 138. 随机链表的复制 给你一个长度为 n 的链表,每个节点包含一个额外增加的随机指针 random ,该指针可以指向链表中的任何节点或空节…

基于知识图谱的个性化学习推荐系统的设计与实现(论文+源码)_kaic

摘 要 Abstract 1 绪 论 1.1 研究背景及意义 1.2 国内外现状研究 1.3 研究工作和论文结构 2 相关技术 2.1 HTML 语言 2.2 Python 语言 2.3 数据库技术 2.4 Django 框架 3 系统分析 3.1 需求概述 3.2 系统可行性分析 3.2.1 技术可行性 3.2.2 经济可行性 3.2.3 操作可行性 3.3 功…

网络基础二补充——json与http协议

五、市面上常用序列化和反序列化工具 ​ 常用的有:json、protobuf、xml三种方案; 5.1json的使用 1.安装jsoncpp库,是一个第三方的开发库文件; sudo yum install -y jsoncpp-devel2.使用json ​ 经常使用的头文件是json.h&…

Python之Opencv教程(2):图像边缘检测

1、什么是边缘检测 OpenCV中的边缘检测是一种常见的图像处理技术,用于检测图像中物体边缘的位置。常用的边缘检测算法包括Sobel算子、Scharr算子、Laplacian算子和Canny边缘检测算法等。下面将介绍使用OpenCV实现这些边缘检测算法的方法。 2、边缘检测的作用 边缘…

C语言---自定义类型:联合体和枚举

文章目录 前言1. 联合体类型的声明1.1 联合体类型的声明1.2 联合体的特点1.4 联合体大小的计算1.5 联合的一个练习 2.枚举2.1 枚举类型的声明2.2 枚举类型的优点 前言 上一篇我们学习了自定义类型—结构体,大家会发现,构建一个结构体时,有些…

程序数据模型由OS还是硬件架构决定?

文章目录 前言硬件架构的作用OS的作用编译器的角色OS的数据模型参考 前言 在文章 1>>32的结果是1还是0 中提到了数据模型 L P 64 LP64 LP64 ,并提出这个数据模型主要是由 U n i x Unix Unix 以及类 U n i x Unix Unix 的操作系统使用居多,例如…

macOS Catalina for mac (macos 10.15系统)v10.15.7正式版

macOS Catalina是苹果公司专为麦金塔电脑推出的桌面操作系统,是macOS的第16个主要版本。它继承了苹果一贯的优雅与高效,不仅引入了分割视图和侧边栏,还带来了全新的音乐和播客应用,极大地提升了用户体验。在隐私保护和安全性方面&…

java学习总结以及考试总结

1.对象的this引用 this引用用于区分成员变量和局部变量,this引用的一定的指的是成员变量 所以说this语句的作用就是区分成员变量和局部变量(如何呢) package com.temo.test1;public class student{private String name;//成员变量private …