התקן React Emails - טיוטה 2026

התקנה ודרישות

תצטרכו להתקין את התלויות @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}>בקרו באתר שלנו</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: '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.