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.

Forward Email Équipe
Écrit par
Forward Email ÉquipeVerified
Publié
11/1/23
Il est temps de lire
Moins de 5 minutes

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.