根據(jù)我的經(jīng)驗(yàn)，Tailwind 的初始學(xué)習(xí)曲線相對(duì)較小。大多數(shù)開發(fā)者在一周內(nèi)就可以熟練使用，并且在開發(fā)速度和可維護(hù)性方面的長(zhǎng)期收益遠(yuǎn)遠(yuǎn)超過初始投資。

我鼓勵(lì)您嘗試 Tailwind。您可能會(huì)驚訝于它可以在多大程度上簡(jiǎn)化您的 CSS 工作流程并提高您的工作效率。

在 React 中獲取數(shù)據(jù)

React/Tanstack 查詢

對(duì)于大多數(shù)數(shù)據(jù)收集需求，我優(yōu)先考慮服務(wù)器組件，因?yàn)樗鼈児逃械男阅軆?yōu)勢(shì)和改進(jìn)的數(shù)據(jù)安全性。通過處理服務(wù)器上的數(shù)據(jù)加載，我可以最大限度地減少瀏覽器中執(zhí)行的 JavaScript 數(shù)量，從而加快初始頁(yè)面加載速度并提供更好的用戶體驗(yàn)。

但是，對(duì)于更復(fù)雜的場(chǎng)景，例如無(wú)限滾動(dòng)、分頁(yè)或實(shí)時(shí)數(shù)據(jù)更新，我利用了React的強(qiáng)大功能查詢。 React Query 提供了一個(gè)強(qiáng)大而靈活的解決方案來(lái)管理客戶端的數(shù)據(jù)獲取、緩存和更新。

例子：

• 服務(wù)器組件：非常適合獲取產(chǎn)品頁(yè)面、用戶個(gè)人資料或博客文章的初始數(shù)據(jù)。
• React Query： 非常適合在 feed 中實(shí)現(xiàn)無(wú)限滾動(dòng)、管理表中的分頁(yè)數(shù)據(jù)或處理聊天應(yīng)用程序的實(shí)時(shí)更新。

通過戰(zhàn)略性地組合服務(wù)器組件和 React Query，我可以在 React 應(yīng)用程序中實(shí)現(xiàn)性能、可維護(hù)性和開發(fā)人員體驗(yàn)之間的最佳平衡。

數(shù)據(jù)庫(kù)和 ORM

棱鏡

我的數(shù)據(jù)庫(kù)交互首選

Prisma ORM 仍然是我在 React 項(xiàng)目中與數(shù)據(jù)庫(kù)交互的首選。盡管像 Drizzle 這樣的新型 ORM 正在獲得關(guān)注，但 Prisma 已被證明是一個(gè)穩(wěn)定可靠的解決方案，擁有強(qiáng)大的社區(qū)和廣泛的文檔。

Prisma 主要特點(diǎn)：

• 類型安全： Prisma 從您的數(shù)據(jù)庫(kù)架構(gòu)生成 TypeScript 類型，確保整個(gè)應(yīng)用程序的類型安全并降低運(yùn)行時(shí)錯(cuò)誤的風(fēng)險(xiǎn)。

示例：

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>;
}

為用戶和帖子生成的類型提供了明確的指導(dǎo)并防止意外的數(shù)據(jù)結(jié)構(gòu)。

• 聲明式架構(gòu)定義： 使用 Prisma 架構(gòu)語(yǔ)言（一種聲明性且直觀的語(yǔ)法）定義您的數(shù)據(jù)庫(kù)架構(gòu)。

示例：

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>;
}

• 簡(jiǎn)化查詢： Prisma 提供了流暢且直觀的查詢創(chuàng)建 API，讓您可以輕松地以最少的努力編寫復(fù)雜的數(shù)據(jù)庫(kù)查詢。
• 遷移： Prisma Migrate 通過易于使用的遷移系統(tǒng)簡(jiǎn)化了數(shù)據(jù)庫(kù)架構(gòu)更改，使您能夠隨著時(shí)間的推移安全地發(fā)展數(shù)據(jù)庫(kù)。

使用棱鏡的好處

• 提高生產(chǎn)力： Prisma 通過自動(dòng)執(zhí)行重復(fù)性任務(wù)（例如生成 SQL 查詢和管理數(shù)據(jù)庫(kù)架構(gòu)更改），顯著提高了開發(fā)人員的生產(chǎn)力。
• 提高代碼質(zhì)量：類型安全、生成類型以及對(duì)最佳實(shí)踐的關(guān)注有助于提高代碼質(zhì)量和減少錯(cuò)誤。
• 提高可維護(hù)性：Prisma 的聲明式方法和清晰的模式定義使得隨著時(shí)間的推移更容易理解和維護(hù)數(shù)據(jù)庫(kù)交互。
• 強(qiáng)大的社區(qū)和生態(tài)系統(tǒng)： Prisma 擁有一個(gè)龐大且活躍的社區(qū)，提供廣泛的文檔、教程和支持資源。

雖然像 Drizzle 這樣的新 ORM 提供了有前途的功能，但 Prisma 的穩(wěn)定性、成熟的生態(tài)系統(tǒng)以及對(duì)開發(fā)人員體驗(yàn)的高度關(guān)注使其成為我大多數(shù)項(xiàng)目的首選。

蘇帕貝斯

Supabase 是 Firebase 的開源替代品，提供全套后端服務(wù)，包括實(shí)時(shí) PostgreSQL 數(shù)據(jù)庫(kù)、身份驗(yàn)證、存儲(chǔ)和邊緣功能。它為開發(fā)人員提供了一種快速有效的方式來(lái)構(gòu)建全棧 Web 應(yīng)用程序，而無(wú)需管理基礎(chǔ)設(shè)施的麻煩。

Supabase 主要特點(diǎn)：

• 實(shí)時(shí) PostgreSQL： Supabase 利用 PostgreSQL 強(qiáng)大的數(shù)據(jù)庫(kù)功能，允許您創(chuàng)建復(fù)雜的數(shù)據(jù)模型并執(zhí)行強(qiáng)大的查詢。實(shí)時(shí)功能允許您構(gòu)建具有實(shí)時(shí)更新的應(yīng)用程序，例如聊天應(yīng)用程序和儀表板。
• 身份驗(yàn)證： Supabase 提供靈活的身份驗(yàn)證系統(tǒng)，支持多種方法，例如電子郵件/密碼、社交登錄和自定義身份驗(yàn)證提供商。它還提供無(wú)密碼身份驗(yàn)證和多重身份驗(yàn)證等功能。
• 存儲(chǔ)： Supabase 包含文件存儲(chǔ)服務(wù)，允許您直接從應(yīng)用程序上傳和管理文件。您可以為文件生成公共 URL 并設(shè)置權(quán)限來(lái)控制訪問。
• 邊緣功能：這些無(wú)服務(wù)器功能允許您在更靠近用戶的邊緣運(yùn)行自定義代碼。這對(duì)于數(shù)據(jù)轉(zhuǎn)換、服務(wù)器端渲染和自定義身份驗(yàn)證邏輯等任務(wù)非常有用。
• GraphQL API：除了 REST API 之外，Supabase 還提供 GraphQL API，提供更靈活、更具表現(xiàn)力的數(shù)據(jù)查詢方式。

為什么選擇蘇帕貝斯？

• 快速開發(fā)： Supabase 通過提供預(yù)構(gòu)建的后端服務(wù)來(lái)加速開發(fā)，讓您專注于構(gòu)建應(yīng)用程序的前端。
• 可擴(kuò)展性： Supabase 構(gòu)建在可擴(kuò)展的基礎(chǔ)設(shè)施之上，使其適合各種規(guī)模的應(yīng)用程序。
• 開源： 作為開源，Supabase 提供透明度、靈活性和強(qiáng)大的社區(qū)。
• 成本效益： Supabase 提供慷慨的免費(fèi)套餐和靈活的定價(jià)計(jì)劃，使小型和大型項(xiàng)目都能負(fù)擔(dān)得起。

何時(shí)使用 Supabase

• 實(shí)時(shí)應(yīng)用程序： Supabase 非常適合需要實(shí)時(shí)更新的應(yīng)用程序，例如聊天應(yīng)用程序、協(xié)作工具和儀表板。
• 快速原型制作： Supabase 的易用性使其成為快速構(gòu)建原型和 MVP 的絕佳選擇。
• 全棧 Web 應(yīng)用程序： Supabase 可以用作簡(jiǎn)單和復(fù)雜 Web 應(yīng)用程序的后端。

數(shù)據(jù)管理和驗(yàn)證

打字稿

TypeScript 無(wú)疑是 JavaScript 項(xiàng)目的行業(yè)標(biāo)準(zhǔn)。其靜態(tài)類型系統(tǒng)與接口和模塊等現(xiàn)代功能相結(jié)合，提供了許多好處，例如更高的類型安全性、更好的錯(cuò)誤檢測(cè)、更高的生產(chǎn)力和更愉快的開發(fā)體驗(yàn)。業(yè)界對(duì) TypeScript 的采用證明了它的價(jià)值和有效性。

佐德

用于類型安全驗(yàn)證的強(qiáng)大工具

Zod 已成為 React 項(xiàng)目中驗(yàn)證的主要選擇，特別是與 TypeScript 結(jié)合使用時(shí)。通過利用 Zod 的類型安全方法，您可以顯著提高應(yīng)用程序的穩(wěn)健性和可維護(hù)性。

Zod 主要特點(diǎn)

• 類型安全驗(yàn)證： Zod 利用 TypeScript 的類型系統(tǒng)來(lái)定義和強(qiáng)制執(zhí)行數(shù)據(jù)模式。這可確保您的應(yīng)用程序接收到的數(shù)據(jù)符合預(yù)期的結(jié)構(gòu)，防止意外錯(cuò)誤并提高數(shù)據(jù)完整性。
• 聲明式模式： Zod 允許您使用簡(jiǎn)潔且富有表現(xiàn)力的語(yǔ)法以聲明方式定義數(shù)據(jù)模式。這使得您可以輕松地為數(shù)據(jù)創(chuàng)建復(fù)雜的驗(yàn)證規(guī)則。
• 錯(cuò)誤處理： Zod 提供詳細(xì)且信息豐富的錯(cuò)誤消息，可以輕松識(shí)別和糾正驗(yàn)證問題。這些錯(cuò)誤消息可以輕松集成到您的用戶界面中，為用戶提供有用的反饋。
• 可擴(kuò)展性： Zod 提供靈活且可擴(kuò)展的 API，允許您創(chuàng)建自定義驗(yàn)證規(guī)則并將其與應(yīng)用程序的其他部分集成。

使用 Zod 的好處

• 提高代碼質(zhì)量：通過強(qiáng)制執(zhí)行數(shù)據(jù)類型和驗(yàn)證規(guī)則，Zod 可以幫助您編寫更健壯、更可靠的代碼，同時(shí)減少意外錯(cuò)誤。
• 改進(jìn)的開發(fā)人員體驗(yàn)： Zod 的類型安全方法和信息豐富的錯(cuò)誤消息使編寫、調(diào)試和維護(hù)代碼變得更加容易，從而顯著改善了開發(fā)人員的體驗(yàn)。
• 改善用戶體驗(yàn)：通過向用戶提供清晰且有用的錯(cuò)誤消息，Zod 有助于改善應(yīng)用程序的整體用戶體驗(yàn)。
• 降低維護(hù)成本：通過盡早檢測(cè)數(shù)據(jù)驗(yàn)證問題，Zod 可以幫助降低與您的應(yīng)用程序相關(guān)的長(zhǎng)期維護(hù)成本。

我的方法

雖然 Zod 提供了強(qiáng)大的客戶端驗(yàn)證功能，但我更喜歡主要將其用于服務(wù)器端驗(yàn)證，特別是在服務(wù)器操作中。這種方法使客戶端表單保持輕量級(jí)，并避免了許多第三方表單庫(kù)帶來(lái)的復(fù)雜性。通過依靠本機(jī) HTML 驗(yàn)證進(jìn)行基本檢查，我可以維護(hù)精簡(jiǎn)高效的表單組件架構(gòu)。

測(cè)試和工具

模擬服務(wù)人員 (MSW)

Mock Service Worker (MSW) 是一個(gè)極大改善了我的工作流程的工具。如果您還沒有使用它，讓我向您展示為什么它值得您關(guān)注。

Mock Service Worker 是一個(gè)強(qiáng)大的用于 API 模擬的 JavaScript 庫(kù)。使用 Service Workers 在網(wǎng)絡(luò)級(jí)別攔截請(qǐng)求，允許您直接在瀏覽器或 Node.js 運(yùn)行時(shí)模擬 API。這使得它非常適合測(cè)試、調(diào)試甚至開發(fā)，無(wú)需依賴后端。

為什么我喜歡使用城市固體廢物

對(duì)我來(lái)說，MSW 解決了許多其他模擬庫(kù)無(wú)法解決的問題：

• 真實(shí)模擬： MSW 在網(wǎng)絡(luò)級(jí)別攔截請(qǐng)求，因此模擬行為與真實(shí)服務(wù)器幾乎沒有區(qū)別。這就像你的口袋里有一個(gè)后端模擬器。
• 客戶端和服務(wù)器測(cè)試：無(wú)論您是測(cè)試 React 應(yīng)用程序還是 Node.js 服務(wù)，MSW 在這兩種環(huán)境中都能完美運(yùn)行。
• 減少依賴：您不需要額外的測(cè)試服務(wù)器或復(fù)雜的模擬配置。 MSW 保持干凈簡(jiǎn)單。
• 靈活性：您可以模擬 REST API、GraphQL 甚至 WebSocket。如果您的應(yīng)用程序可以發(fā)出請(qǐng)求，MSW 可以模擬它。
• 更好的調(diào)試：通過清晰的日志和調(diào)試工具，您可以準(zhǔn)確地知道哪些請(qǐng)求正在被模擬以及如何模擬。

城市生活垃圾對(duì)比傳統(tǒng)的模擬工具

根據(jù)我的經(jīng)驗(yàn)，MSW 比 Axios 攔截器或自定義模擬等工具脫穎而出：

• 可擴(kuò)展性：使用 MSW，您的模擬可以在應(yīng)用程序的邏輯之外運(yùn)行，從而使它們可重用和可維護(hù)。
• 隔離：與攔截器不同，MSW 不會(huì)干擾您的應(yīng)用程序代碼。這意味著測(cè)試后不會(huì)出現(xiàn)混亂的拆卸代碼。
• 類似瀏覽器的行為： MSW 使用 Service Workers 模仿瀏覽器級(jí)行為，確保您的測(cè)試盡可能接近真實(shí)世界的條件。

為什么你應(yīng)該嘗試城市固體廢棄物

API 是現(xiàn)代應(yīng)用程序的支柱，測(cè)試它們并不一定很痛苦。 MSW 提供了一種現(xiàn)實(shí)、靈活且對(duì)開發(fā)人員友好的方式來(lái)模擬 API，而不會(huì)產(chǎn)生不必要的復(fù)雜性。

無(wú)論您是在開發(fā)、調(diào)試還是測(cè)試，MSW 都是游戲規(guī)則的改變者。這是我以前不知道需要的工具，但現(xiàn)在我離不開它。

如果您希望在 2025 年提升您的開發(fā)流程，請(qǐng)嘗試 MSW。您的團(tuán)隊(duì)會(huì)感謝您，您的代碼也會(huì)大放異彩。

劇作家

談到 2025 年的現(xiàn)代 Web 測(cè)試，Playwright 已成為我的首選工具之一。它不僅僅是一個(gè)測(cè)試庫(kù)；它也是一個(gè)測(cè)試庫(kù)。對(duì)于想要精度、速度和多功能性的前端開發(fā)人員來(lái)說，感覺就像是一個(gè)強(qiáng)大的工具。

Playwright 是一個(gè)用于瀏覽器自動(dòng)化的 Node.js 庫(kù)。它由 Microsoft 創(chuàng)建，允許您使用一致的 API 在所有主要瀏覽器（Chromium、Firefox、WebKit）中為 Web 應(yīng)用程序編寫端到端測(cè)試。這就像擁有一把用于瀏覽器測(cè)試的瑞士軍刀，優(yōu)雅、強(qiáng)大且易于開發(fā)人員使用。

劇作家為何脫穎而出

根據(jù)我的經(jīng)驗(yàn)，劇作家擅長(zhǎng)：

• 多瀏覽器支持：與默認(rèn)情況下僅支持基于 Chromium 的瀏覽器的 Cypress 不同，Playwright 允許您在 Chromium、Firefox 和 WebKit 中進(jìn)行測(cè)試。這使得確保您的應(yīng)用程序在不同環(huán)境中運(yùn)行至關(guān)重要。
• 并行測(cè)試： Playwright 的內(nèi)置并行化改變了游戲規(guī)則。測(cè)試運(yùn)行得更快，保持 CI 管道順暢并提高開發(fā)人員的工作效率。
• Headless 和 Headed 模式：無(wú)論您是在 CI 中調(diào)試還是運(yùn)行測(cè)試，Playwright 都能無(wú)縫適應(yīng)。
• 上下文隔離： 使用 Playwright，您可以創(chuàng)建模仿不同用戶的隔離瀏覽器上下文。對(duì)于具有復(fù)雜身份驗(yàn)證流程或多租戶場(chǎng)景的應(yīng)用程序來(lái)說，這是一個(gè)救星。
• API 測(cè)試： Playwright 不會(huì)停留在 UI 上。您可以直接在測(cè)試腳本中進(jìn)行API調(diào)用，確保您的前端和后端協(xié)調(diào)工作。

讓我們看一些代碼

以下是如何在 TypeScript 中編寫 Playwright 測(cè)試的快速示例。此測(cè)試檢查登錄頁(yè)面：

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 年，測(cè)試不再是可選的。用戶期望無(wú)縫的體驗(yàn)，而自動(dòng)化是提供這些體驗(yàn)的方式。 Playwright 將強(qiáng)大功能與開發(fā)人員友好的功能相結(jié)合，使其成為必備工具。

如果您還沒有探索過，那么現(xiàn)在是時(shí)候了。當(dāng)您的測(cè)試運(yùn)行得更快、錯(cuò)誤減少并且您的用戶感到高興時(shí)，未來(lái)的您將會(huì)感謝您。

部署及住宿

Cloudflare（域和 CDN）

Cloudflare 仍然是現(xiàn)代 Web 開發(fā)的基石。對(duì)我來(lái)說，它不僅僅是一項(xiàng)服務(wù)，它還是創(chuàng)建快速、安全和可擴(kuò)展應(yīng)用程序的一個(gè)組成部分。無(wú)論您是獨(dú)立開發(fā)人員還是大型團(tuán)隊(duì)的一員，Cloudflare 都有可以提升您的堆棧的工具。

什么是 Cloudflare？

Cloudflare 是一套完整的 Web 性能和安全工具。它最初是一個(gè)內(nèi)容交付網(wǎng)絡(luò) (CDN)，但如今它的功能遠(yuǎn)不止于此。借助 Cloudflare，您可以優(yōu)化網(wǎng)站的性能，保護(hù)其免受惡意攻擊，甚至使用其強(qiáng)大的邊緣計(jì)算平臺(tái)創(chuàng)建無(wú)服務(wù)器應(yīng)用程序。

為什么我信任 Cloudflare

以下是 Cloudflare 成為我的堆棧重要組成部分的主要原因：

• 速度無(wú)處不在： 憑借其全球 CDN，Cloudflare 可確保您的應(yīng)用程序的靜態(tài)資產(chǎn)以閃電般的速度交付，無(wú)論您的用戶身在何處。它的緩存是資產(chǎn)密集型應(yīng)用程序或全球受眾的救星。
• 無(wú)與倫比的安全性：Cloudflare 的 Web 應(yīng)用程序防火墻 (WAF) 和 DDoS 保護(hù)為我解決了無(wú)數(shù)麻煩。這就像擁有一個(gè)處于自動(dòng)駕駛狀態(tài)的安全團(tuán)隊(duì)。
• 邊緣無(wú)服務(wù)器計(jì)算：使用 Cloudflare Workers 改變了游戲規(guī)則。它允許我在邊緣運(yùn)行輕量級(jí)功能，減少延遲并卸載傳統(tǒng)服務(wù)器的工作。
• 易于使用： 設(shè)置 Cloudflare 只需幾分鐘，但好處是巨大的。其直觀的儀表板和開發(fā)人員友好的工具使其可以輕松與任何堆棧集成。
• 成本效益： 就其提供的價(jià)值而言，Cloudflare 的定價(jià)是無(wú)與倫比的。即使它的免費(fèi)套餐也包含一些功能，可以幫助您開始使用，而無(wú)需擔(dān)心成本。

創(chuàng)建現(xiàn)代應(yīng)用程序意味著提供快速、安全和可靠的體驗(yàn)。 Cloudflare 允許您實(shí)現(xiàn)這一切，而無(wú)需使堆棧過于復(fù)雜。從無(wú)與倫比的 CDN 到創(chuàng)新的邊緣計(jì)算平臺(tái)，我會(huì)向所有希望在 2025 年確保其應(yīng)用程序面向未來(lái)的開發(fā)人員推薦這個(gè)工具。

如果您尚未探索 Cloudflare，現(xiàn)在是最佳時(shí)機(jī)。您的用戶會(huì)注意到差異，您也會(huì)注意到。

其他實(shí)用程序：

回復(fù)電子郵件并重新發(fā)送

電子郵件傳送的強(qiáng)大組合

React Email 和 Resend 提供了一個(gè)引人注目的解決方案，可在您的 React 應(yīng)用程序中創(chuàng)建和發(fā)送高質(zhì)量的電子郵件。

• React Email： 這個(gè)庫(kù)允許您直接在 React 組件中創(chuàng)建具有視覺吸引力和響應(yīng)式的電子郵件模板。通過利用組件、狀態(tài)和 props 等熟悉的 React 概念，您可以創(chuàng)建動(dòng)態(tài)、易于維護(hù)的電子郵件布局。

• 重新發(fā)送： 這個(gè)強(qiáng)大的電子郵件 API 提供了一種可靠且高效的方式來(lái)發(fā)送交易電子郵件，例如歡迎電子郵件、密碼重置和訂單確認(rèn)。 Resend 提供高交付能力、強(qiáng)大的分析以及與現(xiàn)有基礎(chǔ)設(shè)施輕松集成等功能。

主要優(yōu)點(diǎn)

• 更好的開發(fā)人員體驗(yàn)： React Email 允許您使用熟悉的 React 模式創(chuàng)建電子郵件模板，從而改善開發(fā)人員體驗(yàn)，從而提高生產(chǎn)力和可維護(hù)性。
• 一致的品牌：通過在電子郵件模板中使用 React 組件，您可以確保整個(gè)應(yīng)用程序（包括電子郵件）的品牌和樣式保持一致。
• 更好的送達(dá)率： Resend 強(qiáng)大的基礎(chǔ)設(shè)施和對(duì)送達(dá)率的關(guān)注有助于確保您的電子郵件可靠地到達(dá)預(yù)期收件人。
• 輕松集成： Resend 提供簡(jiǎn)單的 API 和 SDK，可輕松與您的 React 應(yīng)用程序集成。

示例：

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 創(chuàng)建簡(jiǎn)單的歡迎電子郵件模板，然后使用 Resend API 發(fā)送它。

通過結(jié)合 React Email 和 Resend 的強(qiáng)大功能，您可以簡(jiǎn)化電子郵件工作流程、提高電子郵件通信質(zhì)量并改善整體用戶體驗(yàn)。

條紋

Stripe 是一個(gè)強(qiáng)大且廣泛使用的支付網(wǎng)關(guān)，提供一整套用于接受在線支付的功能。

潛在的挑戰(zhàn)

• 復(fù)雜性：雖然功能強(qiáng)大，但 Stripe 廣泛的功能集可能會(huì)讓人不知所措，特別是對(duì)于較小的項(xiàng)目或付款要求較簡(jiǎn)單的項(xiàng)目。
• 不斷發(fā)展的 API：Stripe 不斷推出新功能并更新其 API，這有時(shí)可能需要對(duì)您的集成進(jìn)行調(diào)整。

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>;
}

本質(zhì)上，這就是我今天為新的全棧 React 項(xiàng)目選擇的技術(shù)堆棧。這只是一種可能的組合，最適合您的項(xiàng)目的技術(shù)堆棧最終將取決于您的具體要求和優(yōu)先級(jí)。我鼓勵(lì)您探索這些技術(shù)并嘗試不同的組合，以找到最適合您的技術(shù)。

我希望這對(duì)您有所幫助和/或教會(huì)您一些新東西！

@khriztianmoreno？

以上是技術(shù)棧5的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！