Gửi Email React - Hướng dẫn 2026

Gửi email từ ứng dụng web React và Node.js sử dụng mẫu HTML, CSS và JSX. Hướng dẫn tích hợp SMTP sẵn sàng cho môi trường sản xuất với ví dụ mã và các thực hành tốt nhất.

Được viết bởi

Forward Email Đội

Đã xuất bản

9/1/26

Đến giờ đọc rồi

Ít hơn 5 phú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 một file .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}>Truy cập trang web của chúng tôi</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ó Forward Email để gửi và xem trước thư gửi đ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: thay thế giá trị `user` và `pass` từ:
    // <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: 'xin chào thế giới',
  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à xem trước HTML/văn bản thuần/đính kèm.

P.S. 🎉 Bạn cũng có thể xem trước email trên trình duyệt và iOS Simulator và tạo mẫu email với Node.js.