Ejemplo de código de envío de correos electrónicos de React en 2024
Envíe correos electrónicos de la aplicación web React con plantillas HTML, CSS y JSX, ejemplos e integración SMTP lista para producción.
- Search page
- Table of Contents
Instalación y requisitos
Necesitarás instalar @react-email/render y nodemailer dependencias npm:
npm install @react-email/render nodemailer
Código fuente y ejemplo
Cree su plantilla de correo electrónico con un .jsx o un .js archivo:
// 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>
);
}
En este ejemplo, usamos el Nota de correo biblioteca y su patrocinador oficial Redirigir correo para enviar y obtener una vista previa del correo saliente.
Necesitaras Generar contraseña para enviar correo saliente, siga nuestro Enviar correo electrónico con la guía SMTP de dominio personalizado.
// 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);
Ejecute la aplicación para enviar el correo electrónico:
node app
Ahora puedes ir a Mi cuenta → Correos electrónicos para ver su estado de entrega de correo electrónico en tiempo real, registros de capacidad de entrega de correo electrónico y vistas previas de HTML/texto sin formato/adjuntos.
PD 🎉 También puedes obtener una vista previa de los correos electrónicos en los navegadores y el simulador de iOS y crear plantillas de correo electrónico con Node.js.