Ví dụ về gửi email phản hồi ( 2023 )

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 sản xuất.

Forward Email Đội
Được viết bởi
Forward Email ĐộiVerified
Được phát hành
11/1/23
Thời gian để đọc
chưa đầy 5 phút

Cài đặt và yêu cầu

Bạn sẽ cần phải cài đặt @react-email/rendernodemailer phụ thuộc npm:

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 .jsx hoặc một .js tài liệu:

// 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 Người gửi thư ghi chú thư viện và nhà tài trợ chính thức của nó Chuyển tiếp email để gửi và xem trước thư đi.

Bạn sẽ cần đến Tạo mật khẩu để gửi thư đi – vui lòng làm theo Gửi Email với Hướng dẫn SMTP miền tùy chỉnh.

// 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ể đi đến Tài khoản của tôi → Email để xem trạng thái gửi email theo thời gian thực của bạn, nhật ký khả năng gửi email và xem trước HTML/văn bản gốc/tệp đính kèm.

Tái bút 🎉 Bạn cũng có thể xem trước email trong trình duyệt và Trình mô phỏng iOStạo mẫu email với Node.js.