技術堆疊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