Příklad kódu pro odeslání reakce na e-maily v 2024
Odesílejte e-maily webové aplikace React se šablonami HTML, CSS a JSX, příklady a integrací připravenou pro produkci SMTP.
- Search page
- Table of Contents
Instalace a požadavky
Budete muset nainstalovat @react-email/render a nodemailer npm závislosti:
npm install @react-email/render nodemailer
Zdrojový kód a příklad
Vytvořte si šablonu e-mailu pomocí a .jsx nebo a .js soubor:
// email.jsx
import * as React from 'react';
import { Html } from '@react-email/html';
import { Button } from '@react-email/button';
export function Email(props) {
const { url } = props;
return (
<Html lang="en">
<Button href={url}>Visit our website</Button>
</Html>
);
}
V tomto příkladu používáme Nodemailer knihovna a její oficiální sponzor Přeposlat e-mail k odeslání a náhledu odchozí pošty.
budete muset Vygenerovat heslo k odeslání odchozí pošty – postupujte podle našich Odeslat e-mail s průvodcem SMTP vlastní domény.
// app.js
import { render } from '@react-email/render';
import nodemailer from 'nodemailer';
import { Email } from './email';
const transporter = nodemailer.createTransport({
host: 'smtp.forwardemail.net',
port: 465,
secure: true,
auth: {
// TODO: replace user and pass values from:
// <https://forwardemail.net/guides/send-email-with-custom-domain-smtp>
user: 'you@example.com',
pass: '****************************'
},
});
const html = render(Email({ url: "https://example.com" }));
const options = {
from: 'you@example.com',
to: 'user@gmail.com',
subject: 'hello world',
html
};
transporter.sendMail(options);
Spusťte aplikaci a odešlete e-mail:
node app
Nyní můžete jít do Můj účet → E-maily zobrazit stav doručování e-mailů v reálném čase, protokoly doručování e-mailů a náhledy HTML/prostého textu/příloh.
P.S. 🎉 Můžete také náhled e-mailů v prohlížečích a simulátoru iOS a vytvářet e-mailové šablony pomocí Node.js.