Exemple de code d'envoi d'e-mails React en 2024
Envoyez des e-mails d'application Web React avec des modèles, des exemples HTML, CSS et JSX 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 notre Guide SMTP d'envoi d'e-mails avec un 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 tu peux 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èces jointes.
P.S. 🎉 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.