Exemple de code d'envoi d'e-mails React ( 2023 )
Envoyez des e-mails d'application Web React avec des modèles HTML, CSS et JSX, des exemples et une intégration SMTP prête pour la production.
- Search page
- Table of Contents
Installation et exigences
Vous devrez installer @react-email/render et nodemailer dépendances npm :
npm install @react-email/render nodemailer
Code source et exemple
Créez votre modèle d'e-mail avec un .jsx ou un .js déposer:
// 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>
);
}
Dans cet exemple, nous utilisons le Envoyeur de notes bibliothèque et son sponsor officiel Un courriel transféré pour envoyer et prévisualiser le courrier sortant.
Tu devras Créer un mot de passe pour envoyer du courrier sortant - veuillez suivre nos Envoyer un e-mail avec un guide SMTP de domaine personnalisé.
// 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);
Exécutez l'application pour envoyer l'e-mail :
node app
Maintenant, vous pouvez aller à Mon compte → E-mails pour voir l'état de livraison de vos e-mails en temps réel, les journaux de délivrabilité des e-mails et les aperçus HTML/texte brut/pièce jointe.
PS 🎉 Vous pouvez également prévisualiser les e-mails dans les navigateurs et le simulateur iOS et créer des modèles d'e-mails avec Node.js.