مثال على كود إرسال رسائل البريد الإلكتروني React في 2025

أرسل رسائل البريد الإلكتروني لتطبيق الويب React باستخدام قوالب HTML وCSS وJSX والأمثلة والتكامل الجاهز للإنتاج مع SMTP.

كتبه

Forward Email فريق

نُشرت

8/1/25

حان وقت القراءة

أقل من 5 دقائق

التثبيت والمتطلبات

سوف تحتاج إلى تثبيت تبعيات npm @react-email/render وnodemailer:

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**.