Send React Emails - Code Example & Tutorial 2026
Kirim email aplikasi web React dengan templat HTML, CSS, dan JSX, contoh, dan integrasi SMTP yang siap produksi.
Instalasi dan Persyaratan
Anda perlu menginstal dependensi npm @react-email/render dan nodemailer:
npm install @react-email/render nodemailer
Kode Sumber dan Contoh
Buat templat email Anda dengan file .jsx atau .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>
);
}
Dalam contoh ini, kami menggunakan pustaka Nodemailer dan sponsor resminya Teruskan Email untuk mengirim dan melihat pratinjau email keluar.
Anda perlu Membuat Kata Sandi untuk mengirim email keluar – harap ikuti Panduan Mengirim Email dengan Domain Kustom SMTP kami.
// 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: '[email protected]',
pass: '****************************'
},
});
const html = render(Email({ url: "https://example.com" }));
const options = {
from: '[email protected]',
to: '[email protected]',
subject: 'hello world',
html
};
transporter.sendMail(options);
Jalankan aplikasi untuk mengirim email:
node app
Sekarang Anda dapat membuka Akun Saya → Email untuk melihat status pengiriman email secara real-time, log pengiriman email, dan pratinjau HTML/teks biasa/lampiran.
P.S. 🎉 Anda juga dapat pratinjau email di browser dan Simulator iOS dan membuat template email dengan Node.js.