用 React Email 高效開發電子郵件：前端工程師實戰教學

React Email 的技術概述

React Email 是由 Resend 團隊開發的開源函式庫，旨在使用 React 和 TypeScript 來簡化電子郵件的創建過程。它提供了一套高品質、無樣式的組件，使開發者能夠使用熟悉的 React 語法構建電子郵件模板，並提供實用函數將 JSX 代碼編譯成適合電子郵件的 HTML。

核心功能與架構

React Email 的核心是其組件系統，該系統提供了特別設計用於電子郵件的 React 組件，如 Button、Container、Head、Hr、Html、Img、Link、Preview、Section 和 Text 等。這些組件經過精心設計，確保在各種電子郵件客戶端中有良好的兼容性。

React Email Thank You (Calpa Liu)

透過這些組件，開發者可以使用熟悉的 React 語法構建電子郵件模板，並提供實用函數將 JSX 代碼編譯成適合電子郵件的 HTML。

以下是使用 React Email 建立電子郵件模板的範例代碼：

import React from 'react';
import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Html,
  Img,
  Preview,
  Section,
  Text,
} from '@react-email/components';

const containerStyle = {
  margin: '0 auto',
  padding: '20px 0 48px',
  maxWidth: '580px',
};

const textStyle = {
  fontSize: '16px',
  lineHeight: '26px',
  color: '#333',
};

const buttonStyle = {
  backgroundColor: '#5F51E8',
  borderRadius: '3px',
  color: '#fff',
  fontSize: '16px',
  textDecoration: 'none',
  textAlign: 'center' as const,
  display: 'block',
  padding: '12px',
  margin: '24px 0',
};

const headingStyle = {
  fontSize: '24px',
  fontWeight: 'bold',
  textAlign: 'center' as const,
  margin: '24px 0',
};

const logoStyle = {
  margin: '0 auto',
  display: 'block',
};

export default function Email() {
  return (
    <Html>
      <Head />
      <Preview>歡迎使用我們的服務 - 請確認您的帳戶</Preview>
      <Body style={{ backgroundColor: '#f6f6f6' }}>
        <Container style={containerStyle}>
          <Img
            src="https://assets.calpa.me/h192/public/pfp.avif"
            width={120}
            height={120}
            alt="公司標誌"
            style={logoStyle}
          />
          <Heading style={headingStyle}>歡迎加入我們的服務！</Heading>
          <Text style={textStyle}>
            親愛的新用戶，
          </Text>
          <Text style={textStyle}>
            感謝您註冊我們的服務。我們很高興能夠為您提供最優質的體驗。在開始使用我們的服務之前，請點擊下方按鈕確認您的帳戶：
          </Text>
          <Button href="https://calpa.me/confirm" style={buttonStyle}>確認您的帳戶</Button>
          <Text style={textStyle}>
            如果您沒有註冊我們的服務，請忽略此郵件。
          </Text>
          <Text style={textStyle}>
            如果您有任何問題或需要協助，請隨時聯繫我們的客戶支援團隊。
          </Text>
          <Text style={textStyle}>
            祝您使用愉快！
          </Text>
          <Section style={{ textAlign: 'center', margin: '24px 0' }}>
            <Text style={{ ...textStyle, fontSize: '14px', color: '#666' }}>
              © 2023 Calpa. All rights reserved.
            </Text>
          </Section>
        </Container>
      </Body>
    </Html>
  );
}

這種組件化方法使開發者能夠構建模塊化、可重用的電子郵件模板，大大提高了開發效率。

React Email 的主要優勢

熟悉的開發體驗

對於已經使用 React 進行前端開發的團隊，React Email 提供了無縫的開發體驗。開發者可以利用他們現有的 React 知識和工具鏈來創建電子郵件，而不需要學習新的模板語言。這種一致性大大降低了學習曲線，使前端團隊能夠更快地適應電子郵件開發。

TypeScript 支持與類型安全

TypeScript (Microsoft)

React Email 原生支持 TypeScript，為電子郵件開發引入了類型安全。這有助於在開發過程中更早地捕獲錯誤，並提高代碼的健壯性。對於使用 TypeScript 的項目，特別是像 React Multi-Email 這樣的組件，類型安全減少了錯誤並增強了代碼可維護性。

開發過程中的測試能力

React Email 允許開發者在開發過程中發送測試郵件，以預覽電子郵件在不同客戶端中的外觀並進行必要的調整。它提供了一個演示服務器，使開發者能夠即時查看電子郵件模板的渲染結果，大大簡化了測試流程。

與電子郵件服務提供商的集成

React Email 可以輕鬆與各種電子郵件服務提供商集成，如 Nodemailer、SendGrid 或 Resend。它提供了將 React 組件轉換為電子郵件友好 HTML 的實用函數，使其能夠無縫適應不同的發送平台。

// 與 Nodemailer 集成的範例
import { render } from '@react-email/render';
import nodemailer from 'nodemailer';
import WelcomeEmail from './emails/WelcomeEmail';

const emailHtml = render();

const transporter = nodemailer.createTransport({
  host: 'smtp.example.com',
  port: 587,
  secure: false,
  auth: {
    user: 'username',
    pass: 'password',
  },
});

async function sendEmail() {
  const info = await transporter.sendMail({
    from: 'sender@example.com',
    to: 'recipient@example.com',
    subject: '歡迎加入我們的平台',
    html: emailHtml,
  });
  
  console.log('郵件已發送：%s', info.messageId);
}

sendEmail();

開源社區支持

React Email 是一個免費且開源的函式庫，擁有活躍的社區支持。開發者可以通過 Discord 服務器獲取幫助，或在 GitHub 倉庫中報告問題或提交改進。這種社區驅動的模式確保了該工具的持續改進和擴展。

組件重用與設計一致性

使用 React Email，開發者可以在網站和電子郵件中重用相同的設計語言和組件，確保品牌體驗的一致性。例如，網站上使用的按鈕組件可以在電子郵件模板中重複使用，維持統一的視覺識別。

實際應用案例

Yelp 的大規模應用

Yelp 是 React Email 在企業環境中成功應用的絕佳案例。在 2021 年，Yelp 建立了基於 React 組件的電子郵件開發系統，用於開發十多種新型電子郵件，並已發送數百萬封郵件。

這一系統使 Yelp 的開發者能夠使用熟悉的 React 工作流程創建符合其設計指南的電子郵件，從而解決了其舊有模板語言 Cheetah 帶來的挑戰。通過使用 React，Yelp 確保了其電子郵件的視覺一致性，並簡化了開發過程。

大型行銷活動的實施

React Email 特別適合需要大量電子郵件模板的行銷活動。開發者可以創建一個基礎模板，然後通過傳遞不同的 props 來生成各種個性化的電子郵件。這種方法大大提高了電子郵件營銷的效率和一致性。

與其他框架的比較

React Email vs MJML

MJML（Mail Jet Markup Language）是另一個流行的電子郵件開發框架。與 React Email 相比，MJML 在某些方面表現更好：

電子郵件顯示質量：MJML 在各種電子郵件客戶端，特別是 Outlook 中的顯示效果優於 React Email。
AMP 支持：MJML 提供 AMP 電子郵件支持，而 React Email 缺乏這一功能。
暗模式渲染測試：MJML 允許測試暗模式下的電子郵件渲染，這是 React Email 所缺乏的。

然而，React Email 在開發體驗和與 React 生態系統的集成方面具有優勢，特別適合已經使用 React 的團隊。

設置和使用 React Email

快速入門

使用 React Email 非常簡單，可以通過以下步驟快速設置：

# 創建新的React Email項目
npx create-email@latest

# 進入項目目錄
cd react-email-starter

# 安裝依賴
npm install

# 啟動開發服務器
npm run dev

這將創建一個包含幾個電子郵件模板的新文件夾，並啟動一個演示服務器，可在http://localhost:3000/訪問。

設計電子郵件模板

React Email Marketing Example (Calpa Liu)

使用 React Email 設計電子郵件模板涉及創建 React 組件並使用提供的組件庫：

import React from 'react';
import {
  Button,
  Container,
  Head,
  Hr,
  Html,
  Img,
  Link,
  Preview,
  Body,
  Section,
  Text,
} from '@react-email/components';
import { Tailwind } from '@react-email/tailwind';

interface MarketingEmailProps {
  name: string;
  products: {
    id: number;
    title: string;
    price: number;
    image: string;
  }[];
}

export default function MarketingEmail({ name = '用戶', products = [] }: MarketingEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>查看我們的新產品，{name}！</Preview>
      <Tailwind>
        <Body className="bg-gray-100 font-sans">
          <Container className="bg-white mx-auto p-5 max-w-xl">
            <Text className="text-2xl font-bold mb-5">您好，{name}</Text>
            <Text className="text-base mb-5">
              我們很高興向您展示我們的最新產品系列。
            </Text>

            {/* Product List */}
            
            {products.map((product) => (
              <Section key={product.id} className="mb-8 text-center">
                <Img
                  src={product.image}
                  width="200"
                  height="200"
                  alt={product.title}
                  className="mx-auto"
                />
                <Text className="text-lg font-bold mt-3">{product.title}</Text>
                <Text className="text-gray-600 mb-3">${product.price}</Text>
                <Button
                  href={`https://example.com/products/${product.id}`}
                  className="bg-blue-500 text-white py-2 px-4 rounded"
                >
                  查看詳情
                </Button>
              </Section>
            ))}
            
            <Hr className="border-t border-gray-300 my-5" />
            
            <Text className="text-sm text-gray-600 mb-3">
              如有任何問題，請聯繫我們的客戶服務團隊。
            </Text>
            <Link
              href="https://example.com/unsubscribe"
              className="text-xs text-gray-400"
            >
              取消訂閱
            </Link>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

MarketingEmail.PreviewProps = {
  name: 'John Doe',
  products: [
    {
      id: 1,
      title: "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
      price: 109.95,
      image: "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
    },
    {
      id: 2,
      title: "Mens Casual Premium Slim Fit T-Shirts",
      price: 22.3,
      image: "https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg",
    },
    {
      id: 3,
      title: "Mens Cotton Jacket",
      price: 55.99,
      image: "https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg",
    },
  ],
};

這段代碼定義了一個名為 MarketingEmail 的 React 組件，用於生成營銷電子郵件模板。該組件接受 name 和 products 作為 props，使用 React Email 提供的組件（如 Html、Head、Body 等）構建電子郵件結構。它還利用 Tailwind CSS 進行樣式設計，創建了一個包含用戶問候、產品列表和每個產品詳情的響應式電子郵件。此外，組件底部包含了聯繫信息和取消訂閱鏈接，並提供了預覽屬性用於測試目的。

局限性與挑戰

儘管 React Email 提供了眾多優勢，但在實際應用中仍存在一些挑戰。首先，部分電子郵件客戶端（特別是 Outlook）對於由 React Email 生成的複雜佈局支援不佳，可能導致顯示異常。此外，React Email 缺乏 AMP 支援，限制了其在製作高度互動式電子郵件上的能力。另一個限制在於暗模式的適配性，目前並未內建針對暗模式的測試工具，可能造成部分視覺呈現問題。對於需要大規模發送郵件的應用情境而言，React 的渲染機制可能會對系統效能造成壓力。再者，對於尚未熟悉 React 的開發者而言，學習使用這套工具可能需要投入額外時間。最後，作為一個仍在發展中的開源工具，React Email 的長期維護與功能更新頻率仍有待觀察。