Gửi ví dụ về mã email React vào 2025
Gửi email ứng dụng web React với các mẫu HTML, CSS và JSX, ví dụ và tích hợp SMTP sẵn sàng cho sản xuất.

Cài đặt và Yêu cầu
Bạn sẽ cần cài đặt các phụ thuộc npm @react-email/render
và nodemailer
:
npm install @react-email/render nodemailer
Mã nguồn và ví dụ
Tạo mẫu email của bạn với tệp .jsx
hoặc .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>
);
}
Trong ví dụ này, chúng tôi sử dụng thư viện Nodemailer và nhà tài trợ chính thức của nó là Chuyển tiếp Email để gửi và xem trước thư đi.
Bạn sẽ cần Tạo mật khẩu để gửi thư đi – vui lòng làm theo Hướng dẫn Gửi Email với SMTP Tên miền Tùy chỉnh của chúng tôi.
// 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);
Chạy ứng dụng để gửi email:
node app
Bây giờ bạn có thể truy cập Tài khoản của tôi → Email để xem trạng thái gửi email theo thời gian thực, nhật ký khả năng gửi email và bản xem trước HTML/văn bản thuần túy/tệp đính kèm.
P.S. 🎉 Bạn cũng có thể xem trước email trong trình duyệt và Trình mô phỏng iOS và tạo mẫu email bằng Node.js.