Invia codice di esempio di e-mail React nel 2025
Invia email alle app web React con modelli HTML, CSS e JSX, esempi e integrazione SMTP pronta per la produzione.
Installazione e requisiti
Sarà necessario installare le dipendenze npm @react-email/render e nodemailer:
npm install @react-email/render nodemailer Codice sorgente ed esempio
Crea il tuo modello di email con un file .jsx o .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}>Visit our website</Button> </Html> ); } In questo esempio, utilizziamo la libreria Nodemailer e il suo sponsor ufficiale Inoltra e-mail per inviare e visualizzare in anteprima la posta in uscita.
Sarà necessario generare una password per inviare la posta in uscita: seguire la nostra procedura Guida all'invio di email con SMTP di dominio personalizzato.
// 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); Esegui l'app per inviare l'e-mail:
node app Ora puoi andare su Il mio account → Email per visualizzare lo stato di recapito delle tue email in tempo reale, i registri di recapito delle email e le anteprime HTML/testo normale/allegati.
P.S. 🎉 Puoi anche visualizza in anteprima le email nei browser e nel simulatore iOS e creare modelli di email con Node.js.