React Email to biblioteka szablonów, a nie narzędzie do wysyłki. Piszesz e-mail jako komponent React za pomocą @react-email/components, wywołujesz render(), aby zamienić go w ciąg HTML, a następnie przekazujesz ten HTML dowolnemu dostawcy e-mail do dostarczenia. Ten podział ma znaczenie: React Email obsługuje znaczniki (oraz różnice między klientami, które czynią HTML e-maili problematycznym), a osobny dostawca zajmuje się wysyłką. Oto cała pętla.
Jak zbudować szablon e-maila?
Zainstaluj pakiety:
npm install @react-email/components @react-email/renderKomponenty odwzorowują się na bezpieczny dla e-maili HTML i obsługują za Ciebie style inline oraz układy tabelaryczne. Prosty szablon paragonu, przyjmujący propsy, aby można go było wielokrotnie używać:
// emails/Receipt.tsx
import { Html, Head, Body, Container, Heading, Text } from "@react-email/components";
type ReceiptProps = {
name: string;
total: string;
};
export function Receipt({ name, total }: ReceiptProps) {
return (
<Html>
<Head />
<Body style={{ fontFamily: "sans-serif" }}>
<Container>
<Heading>Thanks, {name}</Heading>
<Text>Your order total was {total}.</Text>
</Container>
</Body>
</Html>
);
}Ponieważ to po prostu React, komponujesz, iterujesz i przekazujesz propsy tak samo jak w każdym innym komponencie, a potem podglądasz wynik lokalnie, zanim cokolwiek zostanie wysłane.
Jak wyrenderować komponent do HTML?
render() przyjmuje element i zwraca ciąg HTML. Może też wygenerować wersję tekstową, którą powinieneś dołączyć jako alternatywę tekstową:
import { render } from "@react-email/render";
import { Receipt } from "./emails/Receipt";
const html = await render(<Receipt name="Alex" total="$42.00" />);
const text = await render(<Receipt name="Alex" total="$42.00" />, {
plainText: true,
});W tym momencie masz ciąg HTML. Zadanie React Email jest zakończone. Nic nie zostało jeszcze wysłane; do tego potrzebujesz dostawcy.
Wyślij za pomocą Bird
Przekaż wyrenderowany HTML bezpośrednio do Bird email API. Wynik komponentu trafia do pola html:
import { BirdClient } from "@messagebird/sdk";
import { render } from "@react-email/render";
import { Receipt } from "./emails/Receipt";
const bird = new BirdClient({ apiKey: process.env.BIRD_API_KEY! });
const html = await render(<Receipt name="Alex" total="$42.00" />);
const { data, error } = await bird.email.send({
from: "you@yourdomain.com",
to: ["delivered@bird.dev"],
subject: "Your receipt",
html,
}).safe();Adres sandboxowy delivered@bird.dev zawsze przyjmuje wiadomości, więc możesz zweryfikować zarówno szablon, jak i wysyłkę w jednym przebiegu. Ten wzorzec łatwo wpasowuje się w funkcję serverless, co opisano w artykule jak wysyłać e-maile na Vercelu. Jeśli wolisz wysyłać przez SMTP, ten sam ciąg html działa z Nodemailerem.
FAQ
Czy React Email wysyła e-mail?
Nie. Buduje szablon i renderuje go do HTML oraz zwykłego tekstu. Dostarczanie to osobny krok obsługiwany przez dostawcę, takiego jak serwer SMTP lub API e-mail.
Dlaczego warto używać React Email zamiast pisać HTML ręcznie?
HTML e-maili musi działać w klientach obsługujących bardzo różne podzbiory CSS, co zwykle oznacza zagnieżdżone tabele i style inline. Komponenty React Email generują te znaczniki za Ciebie, więc piszesz komponenty i dostajesz wynik bezpieczny dla klientów e-mail.
Czy mogę użyć jednego szablonu z różnymi danymi?
Tak. Szablony to komponenty React, więc przyjmują propsy. Wyrenderuj ten sam komponent z innymi wartościami dla każdego odbiorcy, a potem wyślij każdy wynik.
React Email i API do wysyłki dzielą pracę w przejrzysty sposób: jedno kształtuje wiadomość, drugie ją dostarcza. Aby korzystać z zarządzanych szablonów po stronie wysyłki, zobacz szablony e-mail Bird.