Надсилайте електронні листи з React — Покроковий посібник 2026

Надсилайте листи з React і Node.js вебзастосунків, використовуючи HTML, CSS та JSX‑шаблони. Готовий до продакшну посібник з інтеграції SMTP з прикладами коду та найкращими практиками.

  • НаписаноForward Email Команда
  • Опубліковано10/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: '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/текстових/вкладень.

P.S. 🎉 Ви також можете переглядати листи у браузерах та iOS Simulator та створювати шаблони листів за допомогою Node.js.