Разработка и вёрстка шаблонов транзакционных email (React Email)
React Email — библиотека от команды Resend, позволяющая создавать email-шаблоны прямо в JSX с TypeScript, с полным контролем через компоненты. Никаких HTML-таблиц вручную — компоненты <Section>, <Row>, <Column> генерируют совместимый HTML за вас.
Установка и базовая структура
npm install @react-email/components react react-dom
npm install -D @react-email/render
Шаблон — это обычный React-компонент, экспортирующий JSX:
import {
Body, Button, Column, Container, Head, Heading,
Hr, Html, Img, Link, Preview, Row, Section, Text
} from '@react-email/components';
interface OrderConfirmationProps {
orderId: string;
customerName: string;
items: { name: string; qty: number; price: string }[];
total: string;
orderUrl: string;
}
export default function OrderConfirmation({
orderId,
customerName,
items,
total,
orderUrl,
}: OrderConfirmationProps) {
return (
<Html lang="ru">
<Head />
<Preview>Заказ #{orderId} подтверждён — спасибо за покупку</Preview>
<Body style={{ backgroundColor: '#f9fafb', fontFamily: 'Inter, Arial, sans-serif' }}>
<Container style={{ maxWidth: 600, margin: '0 auto', backgroundColor: '#fff', borderRadius: 12 }}>
{/* Шапка */}
<Section style={{ padding: '24px 32px 0' }}>
<Img src="https://example.com/logo.png" width={120} alt="Logo" />
</Section>
{/* Контент */}
<Section style={{ padding: '24px 32px' }}>
<Heading style={{ fontSize: 24, color: '#111827', marginTop: 0 }}>
Заказ #{orderId} подтверждён ✓
</Heading>
<Text style={{ color: '#374151' }}>
Привет, {customerName}! Ваш заказ принят и передан в обработку.
</Text>
{/* Позиции заказа */}
{items.map((item, i) => (
<Row key={i} style={{ borderBottom: '1px solid #e5e7eb', padding: '8px 0' }}>
<Column style={{ color: '#111827' }}>{item.name}</Column>
<Column style={{ textAlign: 'right', color: '#6b7280' }}>
{item.qty} × {item.price}
</Column>
</Row>
))}
<Row style={{ paddingTop: 12 }}>
<Column style={{ fontWeight: 700 }}>Итого</Column>
<Column style={{ textAlign: 'right', fontWeight: 700 }}>{total}</Column>
</Row>
</Section>
{/* CTA */}
<Section style={{ padding: '0 32px 32px', textAlign: 'center' }}>
<Button
href={orderUrl}
style={{
backgroundColor: '#3b82f6',
color: '#fff',
padding: '12px 24px',
borderRadius: 8,
fontWeight: 600,
fontSize: 16,
}}
>
Отслеживать заказ
</Button>
</Section>
{/* Футер */}
<Section style={{ padding: '16px 32px', textAlign: 'center' }}>
<Text style={{ fontSize: 13, color: '#9ca3af' }}>
© 2026 Example Inc. ·{' '}
<Link href="{{unsubscribeUrl}}" style={{ color: '#9ca3af' }}>
Отписаться
</Link>
</Text>
</Section>
</Container>
</Body>
</Html>
);
}
Рендеринг в HTML для отправки
import { render } from '@react-email/render';
import OrderConfirmation from './emails/OrderConfirmation';
const html = render(
<OrderConfirmation
orderId="12345"
customerName="Иван"
items={order.items}
total="5 430 ₽"
orderUrl="https://example.com/orders/12345"
/>
);
// Передаём готовый HTML в любой email-сервис
await resend.emails.send({
from: '[email protected]',
to: customer.email,
subject: `Заказ #12345 подтверждён`,
html,
});
Локальная разработка с превью
React Email поставляется с dev-сервером для предпросмотра в браузере:
npx react-email dev --dir ./emails --port 3001
Откроется интерфейс по адресу http://localhost:3001 — список всех шаблонов, live reload при изменениях. Можно переключать режимы Desktop/Mobile/Code/HTML прямо в браузере.
Преимущества перед MJML
- TypeScript-first — пропсы типизированы, ошибки видны в IDE
-
Компонентизация —
<EmailButton>,<ProductRow>,<Footer>переиспользуются -
Тест через jest —
render()возвращает строку, можно snapshot-тестировать - Единый стек — React-разработчики пишут шаблоны без изучения XML-синтаксиса
Сроки
Набор из 3–5 транзакционных шаблонов (order, reset password, welcome, invoice) — 2–4 дня.