Send React Emails - Tutorial 2026
Send emails from React and Node.js web apps using HTML, CSS, and JSX templates. Production-ready SMTP integration guide with code examples and best practices.
Installation et exigences
Vous devrez installer les dépendances npm @react-email/render et nodemailer :
npm install @react-email/render nodemailer
Code source et exemple
Créez votre modèle d’e-mail avec un fichier .jsx ou .js :
// 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}>Visitez notre site web</Button>
</Html>
);
}
Dans cet exemple, nous utilisons la bibliothèque Nodemailer et son sponsor officiel Forward Email pour envoyer et prévisualiser les mails sortants.
Vous devrez Générer un mot de passe pour envoyer des mails sortants – veuillez suivre notre Guide pour envoyer un e-mail avec SMTP et 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: remplacer les valeurs `user` et `pass` par :
// <https://forwardemail.net/guides/send-email-with-custom-domain-smtp>
user: '[email protected]',
pass: '****************************'
},
});
const html = render(Email({ url: "https://example.com" }));
const options = {
from: '[email protected]',
to: '[email protected]',
subject: 'hello world',
html
};
transporter.sendMail(options);
Exécutez l’application pour envoyer l’e-mail :
node app
Vous pouvez maintenant aller dans Mon compte → E-mails pour voir le statut de livraison de vos e-mails en temps réel, les journaux de délivrabilité, ainsi que les aperçus HTML/texte brut/pièces jointes.
P.S. 🎉 Vous pouvez aussi prévisualiser les e-mails dans les navigateurs et le simulateur iOS et créer des modèles d’e-mails avec Node.js.