Почему вёрстка транзакционных писем — боль, и как React Email её лечит
Вёрстка транзакционных писем — боль каждого веб-разработчика. Классические HTML-таблицы для Outlook, Gmail, мобильных клиентов — поддержка превращается в ад. Мы перепробовали MJML, но он не даёт типобезопасности и компонентного подхода. React Email (библиотека с открытым исходным кодом, доступная на GitHub) решает обе проблемы: пишем шаблоны на JSX с TypeScript, а на выходе получаем HTML, корректно отображаемый в любом почтовом клиенте. Согласно статистике Litmus, более 80% пользователей открывают письма на мобильных устройствах, а 60% жалуются на нечитаемые email от интернет-магазинов. Недостаточно просто отправить письмо — оно должно дойти и выглядеть прилично.
Проблемы, которые решаем
Транзакционные письма — это не просто дизайн. Это совместимость с десятками почтовых клиентов: Outlook, Gmail, Apple Mail, Yandex, Mail.ru. Особенно сложен Outlook 2010–2016 с его собственным движком рендеринга — он не поддерживает CSS Grid или Flexbox, только таблицы. Ещё одна боль: поддержка тёмной темы. Многие клиенты (Gmail, Outlook) автоматически инвертируют цвета, из-за чего письмо может стать нечитаемым. React Email решает это на уровне компонентов: <Section>, <Row>, <Column> генерируют корректные таблицы, а TypeScript ловит ошибки на этапе компиляции. Библиотека автоматически добавляет <!--[if mso]> условные комментарии для Outlook и инлайнит стили — это снижает количество багов при деплое.
В одном из наших проектов (сеть автосалонов) мы перевели 12 шаблонов с MJML на React Email. Время вёрстки сократилось на 40%, а количество жалоб от клиентов из-за кривого отображения упало до нуля. Вот что реально даёт компонентный подход. Средняя экономия бюджета за счёт переиспользования компонентов достигает 25%.
Почему React Email лучше MJML?
| Параметр | React Email | MJML |
|---|---|---|
| Типизация | TypeScript-first, все пропсы типизированы | Нет типов, ошибки только в рантайме |
| Компонентный подход | Полное переиспользование: базовые компоненты, композиция | Частично — мжмл-теги нельзя расширить |
| Тестирование | Snapshot-тесты через Jest — ловим регрессию | Сложно или вручную |
| Экосистема | Единый стек для React-разработчиков | Нужно учить MJML-синтаксис |
| Гибкость | Полный контроль над HTML/CSS (допускает raw HTML) | Ограниченный набор тегов |
Как React Email решает проблему кросс-клиентской совместимости?
React Email использует проверенные подходы: <Section> оборачивается в <!--[if mso]> для Outlook, <Img> автоматически добавляет атрибуты совместимости, а стили инлайнятся при рендеринге. Библиотека прошла тестирование на основных клиентах и поддерживает даже legacy-версии. Она совместима с 60+ реальными клиентами. Мы гарантируем, что ваши письма не будут выглядеть как 'красный крест' в Outlook. Например, в одном проекте мы добавили поддержку тёмной темы через медиа-запрос prefers-color-scheme: dark — React Email позволяет легко вставлять кастомные стили.
Что даёт компонентный подход в email-вёрстке?
Компонентный подход с React Email ускоряет разработку на 40% и упрощает поддержку. Каждый шаблон — это переиспользуемый компонент с типизированными пропсами. Это исключает опечатки и позволяет быстро адаптировать письма под новые требования. Например, замена логотипа или добавление нового блока занимает минуты, а не часы.
Установка и базовая структура
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="Логотип — транзакционные email-шаблоны" /> </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' }}> © 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 прямо в браузере.
Типичные ошибки при вёрстке и их решения
| Ошибка | Решение |
|---|---|
| Письмо не отображается в Outlook | Использовать <Fallback> или <!--[if mso]> |
| Тёмная тема ломает цвета | Явно задавать bgcolor и color для каждого элемента |
| Слишком большой размер письма | Оптимизировать изображения, использовать inline-стили |
| Нет предпросмотра в списке писем | Обязательно добавлять <Preview> |
Подробнее о тестировании
Мы используем сервисы Email on Acid и Litmus для автоматической отправки на 60+ реальных клиентов. Это гарантирует, что письмо одинаково выглядит в Gmail, Яндекс.Почте и Outlook 365.Процесс работы
- Аналитика — собираем все виды транзакционных писем (order, reset, welcome, invoice и т.д.). Часто у заказчика таких писем от 5 до 15.
- Дизайн — референсы, сетка, тёмная тема. Создаём адаптивный макет, который автоматически подстраивается под ширину экрана.
- Вёрстка — каждый шаблон как React-компонент с пропсами. Все пропсы типизированы, что исключает опечатки.
- Тестирование — отправка на реальные почтовые клиенты (через Email on Acid или Litmus). Проверяем 8 основных и 10 дополнительных клиентов.
- Интеграция — подключение к вашему бэкенду (Laravel, Node.js, Django). Мы отдаём готовый HTML-код, который можно передать любому SMTP-сервису.
- Поддержка — гарантируем отсутствие поломок при изменении стилей. В течение 30 дней после сдачи мы бесплатно исправляем любые проблемы отображения.
Что входит в работу
- Набор из 3–10 шаблонов (зависит от проекта).
- Полная совместимость с Outlook, Gmail, Apple Mail, Yandex, Mail.ru.
- Адаптивная вёрстка и поддержка тёмной темы.
- Документация по интеграции.
- Исходный код на GitHub/GitLab.
- 30 дней бесплатной поддержки после сдачи.
Сроки и стоимость
Ориентировочно от 2 до 6 дней на набор шаблонов. Точный срок зависит от сложности и количества писем. Стоимость рассчитывается индивидуально — оценим проект за один день. Закажите разработку — получите готовые шаблоны уже через 2 дня. Если вам нужны надёжные транзакционные письма — свяжитесь с нами. Получите консультацию: мы подберём оптимальный набор шаблонов под ваш бизнес.
У нас за плечами более 5 лет опыта в разработке email-шаблонов и более 50 успешных проектов. Мы гарантируем корректное отображение во всех 60+ клиентах.