技术栈5-js教程-PHP中文网

首页

web前端

js教程

技术栈5

Susan Sarandon

Jan 04, 2025 pm 12:27 PM

React 生态系统是一个技术不断发展的动态景观。本文深入探讨了在 2025 年构建全栈应用程序的强大技术堆栈，使您能够实现自己的产品（例如 SaaS）或其最小可行产品（MVP）。

作为一名经验丰富的 Fullstack Web 开发人员，我花了数年时间完善我的方法。每年对技术堆栈进行重新评估对于平衡前沿趋势与长期项目稳定性和可维护性至关重要。

我的上一次工作经历于 2024 年 11 月结束，它为我提供了宝贵的反馈。虽然我对最初的技术堆栈感到满意，但回顾为未来的项目提供了宝贵的经验教训。

让我们踏上这段发现之旅，探索这个简洁而强大的选择中等待着的令人兴奋的可能性。

React 作为一个全栈框架

混音.js

Remix.js 是一个全栈 Web 框架，它优先考虑开发人员体验并利用 Web 基础知识来创建快速、有弹性且用户友好的 Web 应用程序。

主要特点：

加载和获取数据： Remix 通过内置加载器和操作简化了数据获取。加载器在渲染路线之前获取数据，而操作则处理表单提交和其他副作用。
基于文件系统的路由：路由被定义为项目文件系统中的文件，使路由结构直观且易于理解。
服务器端渲染 (SSR)： Remix 擅长 SSR，提供出色的 SEO 和更快的初始加载时间。
数据传输：Remix可以将数据传输到客户端，提高感知性能和用户体验。
表单处理：集成表单处理简化了常见任务，例如验证、提交和错误处理。
测试： Remix 鼓励在各个级别进行测试，包括单元、集成和端到端测试。
灵活性： Remix 可以部署在各种环境中，包括 Node.js 服务器和 Cloudflare Workers 等边缘计算平台。

使用 Remix 的好处：

更好的性能：SSR 和数据流有助于更快的加载时间和更流畅的用户体验。
更好的开发者体验： Remix 对开发者体验的关注使其使用起来很愉快，这要归功于其直观的路由、数据获取机制和内置功能。
灵活性和可扩展性： Remix 可以部署在各种环境中，使其适应不同的项目需求。
强大的社区和生态系统： Remix 拥有不断发展的社区和支持性生态系统，提供各种资源和工具。

Remix.js 的核心提供了一种现代、高效的 Web 开发方法，使开发人员能够构建高质量、高性能、以用户为中心的应用程序。

星星

考虑一个专门的登陆页面？ Astro 在这项任务中表现出色！

虽然 Remix.js 擅长提供静态和动态内容的整体应用程序，但 Astro 提供了一种引人注目的替代方案，专门用于创建卓越的登陆页面。这就是为什么 Astro 可能是完美的选择：

主要特点：

超快性能： Astro 优先考虑速度，提供闪电般快速的登陆页面，让访问者保持参与。
直观的基于文件的路由：与 Remix 类似，Astro 利用基于文件的路由系统，可以轻松构建和管理登陆页面的内容。
基于组件的开发：构建可重用的组件，以优化开发流程并在整个登陆页面上实现一致的设计。
与多个框架集成： Astro 与 React、Vue 和 Svelte 等流行框架无缝集成，让您能够利用现有的技能和偏好。
支持无头内容管理系统 (CMS)： Astro 与多种无头 CMS 解决方案配合良好，允许灵活管理登陆页面的内容。

使用 Astro 作为登陆页面的好处

专注于开发人员体验： Astro 简洁的语法和基于文件的结构简化了开发，使您能够专注于创建有影响力的登陆页面。
快速原型设计： Astro 的速度使其成为着陆页设计中快速原型设计和迭代的理想选择。
SEO 优化： Astro 生成干净且结构良好的 HTML，有助于为您的登陆页面提供强大的搜索引擎优化 (SEO)。
缩短构建时间： Astro 的增量构建最大限度地缩短了构建时间，从而加快了开发周期。

通过利用 Astro 的优势，您可以创建高性能、开发人员友好的登陆页面，以捕获潜在客户并推动 SaaS 的增长，同时节省宝贵的时间来专注于 Remix/Next 应用程序中的核心产品开发。

服务器组件

想象一下您正在建造一座房子。服务器组件就像建筑工人一样处理繁重的专业任务。这些组件不是在内部（浏览器）执行所有操作，而是在外部服务器上工作。

他们做什么？

获取材料：从数据库或API检索数据，就像取砖来建造一堵墙。
进行复杂的计算：执行复杂的数学或逻辑运算，例如计算房间的面积。
保护您的家：他们处理安全任务，例如检查某人是否有权进入。

它们为什么有用？

你的房子建造得更快：通过在服务器上完成一些工作，你的网站对访问者的加载速度更快。
T*您的家更安全：* 敏感数据在更安全的地方处理，远离入侵者。
您可以专注于装饰： 服务器组件处理繁重的工作，因此您可以专注于让您的网站看起来良好且性能良好。

服务器功能

想象一下您的房子有一个对讲系统。服务器功能就像使用对讲机要求屋外的工作人员做某事。

它们如何工作？

你（你的 React 组件）告诉工作人员（服务器功能）要做什么，例如“请带更多砖块”。
工人完成任务并给你结果。

它们为什么有用？

沟通非常容易：您不必担心发送和接收消息的技术细节。
您可以做很多事情：您可以要求服务器函数执行服务器组件可以执行的几乎任何操作。

服务器操作

想象一下，您有一个用于对讲机的预定义命令列表。服务器操作就像那些命令。

这些是什么？

这些是旨在执行特定任务的服务器功能，例如提交表单或更新数据库。

它们为什么有用？

它们易于使用：它们已经配置为执行特定的操作，因此您无需编写大量代码。
有许多库可以帮助您： 有像 next-safe-actions 和 zsa 这样的库，可以为您提供常见任务的预定义服务器操作。

React 中的状态管理

祖斯坦

Zustand 是一个轻量级且灵活的 React 应用程序状态管理库。它提供了一个简单直观的 API 来管理全局和本地状态，使其成为各种规模项目的绝佳选择。

主要特点：

极简 API： Zustand 具有简洁且易于学习的 API，并且具有最少的样板代码。
以性能为导向： Zustand 专为实现最佳性能而设计，具有高效的状态更新和最小的开销。
灵活：提供灵活且模块化的状态管理方法，允许您根据需要创建和管理多个商店。
易于学习：简单的 API 和清晰的文档使 Zustand 易于学习并集成到您的 React 项目中。

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

登录后复制

畏缩

Recoil.js 是 React 应用程序的状态管理库，与 Context API 等传统方法相比，它提供了更精细、更灵活的方法来管理共享状态。它提供了独特的数据流图，允许您创建复杂的状态结构并从现有状态派生新状态。

关键概念：

原子：它们是《Recoil》中状态的基本单位。原子是独立的，可以被多个组件订阅。它们提供了一种存储和共享简单值的方法。
选择器：选择器是从现有原子或其他选择器派生新状态的纯函数。它们允许您创建复杂的状态结构并即时执行计算。
RecoilRoot： 该组件是 Recoil 应用程序的根。为所有 Recoil 原子和选择器提供上下文。
订阅： 组件订阅原子或选择器以在状态更改时接收更新。 Recoil 使用高效的机制来确保组件仅在其依赖的数据实际发生更改时才重新渲染。

高级功能：

异步值： Recoil 支持异步值，允许您从 API 获取数据并管理加载状态。
持久化：您可以将 Recoil 状态持久化到本地存储或其他存储机制，以便在后续页面加载时恢复它。
时间旅行调试： Recoil 提供时间旅行调试工具，允许您检查和回滚状态更改。
自定义挂钩：您可以创建自定义挂钩来封装复杂的状态管理逻辑。

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

登录后复制

React 中的 CSS 样式

顺风 CSS

快速发展的革命性

虽然开发者社区对 Tailwind CSS 的看法各不相同，但我坚信它是目前快速产品开发和长期 CSS 维护最有效的解决方案。

根据我自己的经验和许多同事的反馈，Tailwind 提供了几个关键优势：

快速原型设计： Tailwind 的实用程序优先方法允许开发人员快速构建 UI 元素并设计其样式，而无需编写自定义 CSS 类。这显着加快了原型设计和迭代过程。
一致的样式： Tailwind 提供了一组预定义的实用程序类，确保整个项目的样式一致。这消除了不断重新发明轮子的需要，并有助于维持有凝聚力的设计系统。
更好的开发人员体验： Tailwind 在现代代码编辑器中直观的语法和自动完成功能改善了开发人员体验，使编写和维护 CSS 更快、更愉快。
CSS 文件大小减小： 通过利用预定义的实用程序类，您通常可以显着减小 CSS 文件的总体大小，从而加快页面加载时间并提高性能
强大的社区和生态系统： Tailwind 拥有一个庞大且活跃的社区，提供对广泛文档、有用资源以及大量社区构建的插件和扩展的访问。

根据我的经验，Tailwind 的初始学习曲线相对较小。大多数开发者在一周内就可以熟练使用，并且在开发速度和可维护性方面的长期收益远远超过初始投资。

我鼓励您尝试 Tailwind。您可能会惊讶于它可以在多大程度上简化您的 CSS 工作流程并提高您的工作效率。

在 React 中获取数据

React/Tanstack 查询

对于大多数数据收集需求，我优先考虑服务器组件，因为它们固有的性能优势和改进的数据安全性。通过处理服务器上的数据加载，我可以最大限度地减少浏览器中执行的 JavaScript 数量，从而加快初始页面加载速度并提供更好的用户体验。

但是，对于更复杂的场景，例如无限滚动、分页或实时数据更新，我利用了React的强大功能查询。 React Query 提供了一个强大而灵活的解决方案来管理客户端的数据获取、缓存和更新。

例子：

服务器组件：非常适合获取产品页面、用户个人资料或博客文章的初始数据。
React Query： 非常适合在 feed 中实现无限滚动、管理表中的分页数据或处理聊天应用程序的实时更新。

通过战略性地组合服务器组件和 React Query，我可以在 React 应用程序中实现性能、可维护性和开发人员体验之间的最佳平衡。

数据库和 ORM

棱镜

我的数据库交互首选

Prisma ORM 仍然是我在 React 项目中与数据库交互的首选。尽管像 Drizzle 这样的新型 ORM 正在获得关注，但 Prisma 已被证明是一个稳定可靠的解决方案，拥有强大的社区和广泛的文档。

Prisma 主要特点：

类型安全： Prisma 从您的数据库架构生成 TypeScript 类型，确保整个应用程序的类型安全并降低运行时错误的风险。

示例：

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

登录后复制

为用户和帖子生成的类型提供了明确的指导并防止意外的数据结构。

声明式架构定义： 使用 Prisma 架构语言（一种声明性且直观的语法）定义您的数据库架构。

示例：

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

登录后复制

简化查询： Prisma 提供了流畅且直观的查询创建 API，让您可以轻松地以最少的努力编写复杂的数据库查询。
迁移： Prisma Migrate 通过易于使用的迁移系统简化了数据库架构更改，使您能够随着时间的推移安全地发展数据库。

使用棱镜的好处

提高生产力： Prisma 通过自动执行重复性任务（例如生成 SQL 查询和管理数据库架构更改），显着提高了开发人员的生产力。
提高代码质量：类型安全、生成类型以及对最佳实践的关注有助于提高代码质量和减少错误。
提高可维护性：Prisma 的声明式方法和清晰的模式定义使得随着时间的推移更容易理解和维护数据库交互。
强大的社区和生态系统： Prisma 拥有一个庞大且活跃的社区，提供广泛的文档、教程和支持资源。

虽然像 Drizzle 这样的新 ORM 提供了有前途的功能，但 Prisma 的稳定性、成熟的生态系统以及对开发人员体验的高度关注使其成为我大多数项目的首选。

苏帕贝斯

Supabase 是 Firebase 的开源替代品，提供全套后端服务，包括实时 PostgreSQL 数据库、身份验证、存储和边缘功能。它为开发人员提供了一种快速有效的方式来构建全栈 Web 应用程序，而无需管理基础设施的麻烦。

Supabase 主要特点：

实时 PostgreSQL： Supabase 利用 PostgreSQL 强大的数据库功能，允许您创建复杂的数据模型并执行强大的查询。实时功能允许您构建具有实时更新的应用程序，例如聊天应用程序和仪表板。
身份验证： Supabase 提供灵活的身份验证系统，支持多种方法，例如电子邮件/密码、社交登录和自定义身份验证提供商。它还提供无密码身份验证和多重身份验证等功能。
存储： Supabase 包含文件存储服务，允许您直接从应用程序上传和管理文件。您可以为文件生成公共 URL 并设置权限来控制访问。
边缘功能：这些无服务器功能允许您在更靠近用户的边缘运行自定义代码。这对于数据转换、服务器端渲染和自定义身份验证逻辑等任务非常有用。
GraphQL API：除了 REST API 之外，Supabase 还提供 GraphQL API，提供更灵活、更具表现力的数据查询方式。

为什么选择苏帕贝斯？

快速开发： Supabase 通过提供预构建的后端服务来加速开发，让您专注于构建应用程序的前端。
可扩展性： Supabase 构建在可扩展的基础设施之上，使其适合各种规模的应用程序。
开源： 作为开源，Supabase 提供透明度、灵活性和强大的社区。
成本效益： Supabase 提供慷慨的免费套餐和灵活的定价计划，使小型和大型项目都能负担得起。

何时使用 Supabase

实时应用程序： Supabase 非常适合需要实时更新的应用程序，例如聊天应用程序、协作工具和仪表板。
快速原型制作： Supabase 的易用性使其成为快速构建原型和 MVP 的绝佳选择。
全栈 Web 应用程序： Supabase 可以用作简单和复杂 Web 应用程序的后端。

数据管理和验证

打字稿

TypeScript 无疑是 JavaScript 项目的行业标准。其静态类型系统与接口和模块等现代功能相结合，提供了许多好处，例如更高的类型安全性、更好的错误检测、更高的生产力和更愉快的开发体验。业界对 TypeScript 的采用证明了它的价值和有效性。

佐德

用于类型安全验证的强大工具

Zod 已成为 React 项目中验证的主要选择，特别是与 TypeScript 结合使用时。通过利用 Zod 的类型安全方法，您可以显着提高应用程序的稳健性和可维护性。

Zod 主要特点

类型安全验证： Zod 利用 TypeScript 的类型系统来定义和强制执行数据模式。这可确保您的应用程序接收到的数据符合预期的结构，防止意外错误并提高数据完整性。
声明式模式： Zod 允许您使用简洁且富有表现力的语法以声明方式定义数据模式。这使得您可以轻松地为数据创建复杂的验证规则。
错误处理： Zod 提供详细且信息丰富的错误消息，可以轻松识别和纠正验证问题。这些错误消息可以轻松集成到您的用户界面中，为用户提供有用的反馈。
可扩展性： Zod 提供灵活且可扩展的 API，允许您创建自定义验证规则并将其与应用程序的其他部分集成。

使用 Zod 的好处

提高代码质量：通过强制执行数据类型和验证规则，Zod 可以帮助您编写更健壮、更可靠的代码，同时减少意外错误。
改进的开发人员体验： Zod 的类型安全方法和信息丰富的错误消息使编写、调试和维护代码变得更加容易，从而显着改善了开发人员的体验。
改善用户体验：通过向用户提供清晰且有用的错误消息，Zod 有助于改善应用程序的整体用户体验。
降低维护成本：通过尽早检测数据验证问题，Zod 可以帮助降低与您的应用程序相关的长期维护成本。

我的方法

虽然 Zod 提供了强大的客户端验证功能，但我更喜欢主要将其用于服务器端验证，特别是在服务器操作中。这种方法使客户端表单保持轻量级，并避免了许多第三方表单库带来的复杂性。通过依靠本机 HTML 验证进行基本检查，我可以维护精简高效的表单组件架构。

测试和工具

模拟服务人员 (MSW)

Mock Service Worker (MSW) 是一个极大改善了我的工作流程的工具。如果您还没有使用它，让我向您展示为什么它值得您关注。

Mock Service Worker 是一个强大的用于 API 模拟的 JavaScript 库。使用 Service Workers 在网络级别拦截请求，允许您直接在浏览器或 Node.js 运行时模拟 API。这使得它非常适合测试、调试甚至开发，无需依赖后端。

为什么我喜欢使用城市固体废物

对我来说，MSW 解决了许多其他模拟库无法解决的问题：

真实模拟： MSW 在网络级别拦截请求，因此模拟行为与真实服务器几乎没有区别。这就像你的口袋里有一个后端模拟器。
客户端和服务器测试：无论您是测试 React 应用程序还是 Node.js 服务，MSW 在这两种环境中都能完美运行。
减少依赖：您不需要额外的测试服务器或复杂的模拟配置。 MSW 保持干净简单。
灵活性：您可以模拟 REST API、GraphQL 甚至 WebSocket。如果您的应用程序可以发出请求，MSW 可以模拟它。
更好的调试：通过清晰的日志和调试工具，您可以准确地知道哪些请求正在被模拟以及如何模拟。

城市生活垃圾对比传统的模拟工具

根据我的经验，MSW 比 Axios 拦截器或自定义模拟等工具脱颖而出：

可扩展性：使用 MSW，您的模拟可以在应用程序的逻辑之外运行，从而使它们可重用和可维护。
隔离：与拦截器不同，MSW 不会干扰您的应用程序代码。这意味着测试后不会出现混乱的拆卸代码。
类似浏览器的行为： MSW 使用 Service Workers 模仿浏览器级行为，确保您的测试尽可能接近真实世界的条件。

为什么你应该尝试城市固体废弃物

API 是现代应用程序的支柱，测试它们并不一定很痛苦。 MSW 提供了一种现实、灵活且对开发人员友好的方式来模拟 API，而不会产生不必要的复杂性。

无论您是在开发、调试还是测试，MSW 都是游戏规则的改变者。这是我以前不知道需要的工具，但现在我离不开它。

如果您希望在 2025 年提升您的开发流程，请尝试 MSW。您的团队会感谢您，您的代码也会大放异彩。

剧作家

谈到 2025 年的现代 Web 测试，Playwright 已成为我的首选工具之一。它不仅仅是一个测试库；它也是一个测试库。对于想要精度、速度和多功能性的前端开发人员来说，感觉就像是一个强大的工具。

Playwright 是一个用于浏览器自动化的 Node.js 库。它由 Microsoft 创建，允许您使用一致的 API 在所有主要浏览器（Chromium、Firefox、WebKit）中为 Web 应用程序编写端到端测试。这就像拥有一把用于浏览器测试的瑞士军刀，优雅、强大且易于开发人员使用。

剧作家为何脱颖而出

根据我的经验，剧作家擅长：

多浏览器支持：与默认情况下仅支持基于 Chromium 的浏览器的 Cypress 不同，Playwright 允许您在 Chromium、Firefox 和 WebKit 中进行测试。这使得确保您的应用程序在不同环境中运行至关重要。
并行测试： Playwright 的内置并行化改变了游戏规则。测试运行得更快，保持 CI 管道顺畅并提高开发人员的工作效率。
Headless 和 Headed 模式：无论您是在 CI 中调试还是运行测试，Playwright 都能无缝适应。
上下文隔离： 使用 Playwright，您可以创建模仿不同用户的隔离浏览器上下文。对于具有复杂身份验证流程或多租户场景的应用程序来说，这是一个救星。
API 测试： Playwright 不会停留在 UI 上。您可以直接在测试脚本中进行API调用，确保您的前端和后端协调工作。

让我们看一些代码

以下是如何在 TypeScript 中编写 Playwright 测试的快速示例。此测试检查登录页面：

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

登录后复制

到 2025 年，测试不再是可选的。用户期望无缝的体验，而自动化是提供这些体验的方式。 Playwright 将强大功能与开发人员友好的功能相结合，使其成为必备工具。

如果您还没有探索过，那么现在是时候了。当您的测试运行得更快、错误减少并且您的用户感到高兴时，未来的您将会感谢您。

部署及住宿

Cloudflare（域和 CDN）

Cloudflare 仍然是现代 Web 开发的基石。对我来说，它不仅仅是一项服务，它还是创建快速、安全和可扩展应用程序的一个组成部分。无论您是独立开发人员还是大型团队的一员，Cloudflare 都有可以提升您的堆栈的工具。

什么是 Cloudflare？

Cloudflare 是一套完整的 Web 性能和安全工具。它最初是一个内容交付网络 (CDN)，但如今它的功能远不止于此。借助 Cloudflare，您可以优化网站的性能，保护其免受恶意攻击，甚至使用其强大的边缘计算平台创建无服务器应用程序。

为什么我信任 Cloudflare

以下是 Cloudflare 成为我的堆栈重要组成部分的主要原因：

速度无处不在： 凭借其全球 CDN，Cloudflare 可确保您的应用程序的静态资产以闪电般的速度交付，无论您的用户身在何处。它的缓存是资产密集型应用程序或全球受众的救星。
无与伦比的安全性：Cloudflare 的 Web 应用程序防火墙 (WAF) 和 DDoS 保护为我解决了无数麻烦。这就像拥有一个处于自动驾驶状态的安全团队。
边缘无服务器计算：使用 Cloudflare Workers 改变了游戏规则。它允许我在边缘运行轻量级功能，减少延迟并卸载传统服务器的工作。
易于使用： 设置 Cloudflare 只需几分钟，但好处是巨大的。其直观的仪表板和开发人员友好的工具使其可以轻松与任何堆栈集成。
成本效益： 就其提供的价值而言，Cloudflare 的定价是无与伦比的。即使它的免费套餐也包含一些功能，可以帮助您开始使用，而无需担心成本。

创建现代应用程序意味着提供快速、安全和可靠的体验。 Cloudflare 允许您实现这一切，而无需使堆栈过于复杂。从无与伦比的 CDN 到创新的边缘计算平台，我会向所有希望在 2025 年确保其应用程序面向未来的开发人员推荐这个工具。

如果您尚未探索 Cloudflare，现在是最佳时机。您的用户会注意到差异，您也会注意到。

其他实用程序：

回复电子邮件并重新发送

电子邮件传送的强大组合

React Email 和 Resend 提供了一个引人注目的解决方案，可在您的 React 应用程序中创建和发送高质量的电子邮件。

React Email： 这个库允许您直接在 React 组件中创建具有视觉吸引力和响应式的电子邮件模板。通过利用组件、状态和 props 等熟悉的 React 概念，您可以创建动态、易于维护的电子邮件布局。
重新发送： 这个强大的电子邮件 API 提供了一种可靠且高效的方式来发送交易电子邮件，例如欢迎电子邮件、密码重置和订单确认。 Resend 提供高交付能力、强大的分析以及与现有基础设施轻松集成等功能。

主要优点

更好的开发人员体验： React Email 允许您使用熟悉的 React 模式创建电子邮件模板，从而改善开发人员体验，从而提高生产力和可维护性。
一致的品牌：通过在电子邮件模板中使用 React 组件，您可以确保整个应用程序（包括电子邮件）的品牌和样式保持一致。
更好的送达率： Resend 强大的基础设施和对送达率的关注有助于确保您的电子邮件可靠地到达预期收件人。
轻松集成： Resend 提供简单的 API 和 SDK，可轻松与您的 React 应用程序集成。

示例：

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

登录后复制

import { atom, selector, useRecoilState, useRecoilValue } from "recoil";

// Atom for user data (fetched asynchronously)
const userDataAtom = atom({
  key: "userData",
  default: null,
  effects_UNSTABLE: [
    ({ setSelf }) => {
      // Fetch user data from API and set it
    },
  ],
});

// Selector to extract the user's name
const userNameSelector = selector({
  key: "userName",
  get: ({ get }) => {
    const userData = get(userDataAtom);
    return userData?.name || "Guest";
  },
});

function UserProfile() {
  const userName = useRecoilValue(userNameSelector);

  return <div>Hello, {userName}!</div>;
}

登录后复制

此示例展示了如何使用 React Email 创建简单的欢迎电子邮件模板，然后使用 Resend API 发送它。

通过结合 React Email 和 Resend 的强大功能，您可以简化电子邮件工作流程、提高电子邮件通信质量并改善整体用户体验。

条纹

Stripe 是一个强大且广泛使用的支付网关，提供一整套用于接受在线支付的功能。

潜在的挑战

复杂性：虽然功能强大，但 Stripe 广泛的功能集可能会让人不知所措，特别是对于较小的项目或付款要求较简单的项目。
不断发展的 API：Stripe 不断推出新功能并更新其 API，这有时可能需要对您的集成进行调整。

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

登录后复制

本质上，这就是我今天为新的全栈 React 项目选择的技术堆栈。这只是一种可能的组合，最适合您的项目的技术堆栈最终将取决于您的具体要求和优先级。我鼓励您探索这些技术并尝试不同的组合，以找到最适合您的技术。

我希望这对您有所帮助和/或教会您一些新东西！

Tech Stack 5