2025 React E-postaları Kod Örneği Gönderin
HTML, CSS ve JSX şablonları, örnekler ve SMTP üretime hazır entegrasyonuyla React web uygulaması e-postaları gönderin.
Kurulum ve Gereksinimler
@react-email/render ve nodemailer npm bağımlılıklarını yüklemeniz gerekecek:
npm install @react-email/render nodemailer Kaynak Kodu ve Örnek
E-posta şablonunuzu .jsx veya .js dosyasıyla oluşturun:
// 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> ); } Bu örnekte, giden postaları göndermek ve önizlemek için Nodemailer kütüphanesini ve onun resmi sponsoru E-postayı İlet'i kullanıyoruz.
Giden e-posta göndermek için Şifre Oluştur'a ihtiyacınız olacak - lütfen Özel Alan Adıyla E-posta Gönderme SMTP Kılavuzu adımlarını izleyin.
// 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); E-postayı göndermek için uygulamayı çalıştırın:
node app Artık gerçek zamanlı e-posta teslim durumunuzu, e-posta teslim edilebilirlik günlüklerinizi ve HTML/düz metin/ek önizlemelerinizi görmek için Hesabım → E-postalar adresine gidebilirsiniz.
Not: 🎉 Ayrıca tarayıcılarda ve iOS Simülatöründe e-postaları önizleme ve Node.js ile e-posta şablonları oluşturun de yapabilirsiniz.