مثال على كود إرسال رسائل البريد الإلكتروني React في 2025
أرسل رسائل البريد الإلكتروني لتطبيق الويب React باستخدام قوالب HTML وCSS وJSX والأمثلة والتكامل الجاهز للإنتاج مع SMTP.
التثبيت والمتطلبات
سوف تحتاج إلى تثبيت @react-email/render و nodemailer تبعيات npm:
npm install @react-email/render nodemailer
الكود المصدر والمثال
قم بإنشاء قالب البريد الإلكتروني الخاص بك باستخدام .jsx أو أ .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>
);
}
في هذا المثال، نستخدم نوداميلر المكتبة والراعي الرسمي لها إعادة توجيه البريد الإلكتروني لإرسال ومعاينة البريد الصادر.
سوف تحتاج إلى إنشاء كلمة مرور لإرسال البريد الصادر – يرجى اتباع تعليماتنا إرسال بريد إلكتروني باستخدام دليل SMTP للنطاق المخصص.
// 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);
قم بتشغيل التطبيق لإرسال البريد الإلكتروني:
node app
الآن يمكنك الذهاب إلى حسابي → رسائل البريد الإلكتروني لرؤية حالة تسليم البريد الإلكتروني في الوقت الفعلي، وسجلات تسليم البريد الإلكتروني، ومعاينات HTML/النص العادي/المرفق.
ملاحظة: 🎉 يمكنك أيضًا معاينة رسائل البريد الإلكتروني في المتصفحات ومحاكي iOS و إنشاء قوالب البريد الإلكتروني باستخدام Node.js.