إرسال رسائل React - الدليل 2026

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

كتبه

Forward Email فريق

نُشرت

9/1/26

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

أقل من 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}>زر موقعنا الإلكتروني</Button>
    </Html>
  );
}

في هذا المثال، نستخدم مكتبة Nodemailer والراعي الرسمي لها Forward Email لإرسال ومعاينة البريد الصادر.

ستحتاج إلى إنشاء كلمة مرور لإرسال البريد الصادر – يرجى اتباع دليلنا إرسال البريد الإلكتروني باستخدام 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: استبدل قيم `user` و `pass` من:
    // <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: 'مرحباً بالعالم',
  html
};

transporter.sendMail(options);

شغّل التطبيق لإرسال البريد الإلكتروني:

node app

الآن يمكنك الذهاب إلى حسابي → الرسائل الإلكترونية لرؤية حالة تسليم البريد الإلكتروني في الوقت الحقيقي، وسجلات قابلية تسليم البريد، ومعاينات HTML/النص العادي/المرفقات.

ملاحظة: 🎉 يمكنك أيضاً معاينة الرسائل الإلكترونية في المتصفحات ومحاكي iOS و إنشاء قوالب البريد الإلكتروني باستخدام Node.js.