Modelos de e-mail React: crie lindos e-mails transacionais

E-mails transacionais têm uma taxa de abertura de 45% – quase 5x a média de e-mails de marketing – mas a maioria das empresas envia e-mails HTML mal formatados que prejudicam a percepção da marca. O React Email traz o modelo de desenvolvimento baseado em componentes para o design de e-mail, permitindo que os desenvolvedores criem modelos bonitos e responsivos com padrões React familiares.

Principais conclusões

Os componentes do React Email são compilados em HTML compatível com vários clientes - Gmail, Outlook, Apple Mail

A arquitetura baseada em componentes permite cabeçalhos, rodapés e padrões de layout reutilizáveis

Servidor de visualização local com recarga dinâmica acelera o desenvolvimento de modelos

Exporte funções de renderização (não componentes brutos) para integração perfeita com NestJS

Por que reagir ao e-mail

HTML de e-mail é notoriamente difícil. Clientes diferentes renderizam HTML de maneira diferente – o Outlook usa o Word como mecanismo de renderização, o Gmail remove tags de estilo e os clientes móveis variam no manuseio da janela de visualização.

O React Email abstrai isso com componentes pré-construídos: Container (largura responsiva), Seção (blocos baseados em tabela), Linha/Coluna (sistema de grade), Texto, Título, Botão (funciona no Outlook), Imagem, Link, Hr e Visualização (texto oculto da caixa de entrada).

Configuração do projeto

Instale @react-email/components e react-email. Organize os modelos em um diretório packages/email-templates com templates/, componentes/ e um arquivo render.ts que exporta funções de renderização.

Modelos de construção

Componentes de layout compartilhados

Crie componentes EmailHeader e EmailFooter reutilizáveis com sua marca. Isso garante consistência em todos os emails transacionais.

Estrutura do modelo

Cada modelo de email é um componente React que recebe adereços digitados:

import {
  Html, Head, Body, Container, Section,
  Text, Button, Hr,
} from "@react-email/components";

interface WelcomeEmailProps {
  userName: string;
  loginUrl: string;
}

export function WelcomeEmail({ userName, loginUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: "Arial, sans-serif" }}>
        <Container style={{ maxWidth: "600px", margin: "0 auto" }}>
          <Text>Hi {userName},</Text>
          <Text>Your account is ready.</Text>
          <Button
            href={loginUrl}
            style={{ background: "#001834", color: "#fff", padding: "12px 24px" }}
          >
            Sign In
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

Renderização para integração NestJS

O padrão crítico: exportar funções de renderização, não componentes brutos. NestJS é executado sem compilação JSX, portanto, importar componentes React diretamente causa erros.

Crie um arquivo render.ts que importe modelos e exporte funções assíncronas:

import { render } from "@react-email/render";
import { WelcomeEmail } from "./templates/welcome";

export async function renderWelcomeEmail(props: {
  userName: string;
  loginUrl: string;
}) {
  return render(WelcomeEmail(props));
}

No NestJS, chame a função render para obter HTML e envie por meio de seu transportador de e-mail.

Fluxo de trabalho de desenvolvimento

Visualização local

Execute npx react-email dev para uma visualização baseada em navegador com recarga dinâmica. As alterações aparecem instantaneamente, tornando a iteração mais rápida.

Teste entre clientes

Teste em clientes usando Litmus ou Email on Acid. No teste mínimo: Gmail (Chrome), Outlook (Windows), Apple Mail, Gmail (iOS), Apple Mail (iOS), Yahoo Mail e Outlook.com.

Práticas recomendadas de estilo

Somente estilos inline: React Email inline estilos automaticamente para compatibilidade do cliente
Fontes do sistema: Use Arial, Georgia, Verdana. Fontes personalizadas têm suporte limitado.
Largura máxima de 600 px: largura padrão de e-mail para computadores e dispositivos móveis
Layout baseado em tabela: os componentes do React Email são renderizados como tabelas para compatibilidade com o Outlook
Modo escuro: inclui meta tags para suporte ao modo escuro do Apple Mail e Outlook

Modelos de e-mail comuns

Confirmação do pedido

Inclua o número do pedido, lista de itens com preços, endereço de entrega, entrega estimada e link de rastreamento quando disponível. Use um layout de tabela para a lista de itens.

Redefinição de senha

Mantenha o mínimo: breve explicação, botão de redefinição em destaque com link por tempo limitado, aviso de segurança sobre não compartilhar o link e contato de suporte.

E-mail da fatura

Anexe a fatura em PDF e inclua um resumo no corpo do e-mail: número da fatura, data, data de vencimento, valor total e um botão para visualizar/pagar online.

Notificação de Envio

Inclua o número do pedido, nome da transportadora, número de rastreamento com link clicável, data estimada de entrega e itens sendo enviados.

Perguntas frequentes

P: Por que não usar um criador de e-mail de arrastar e soltar?

Os construtores de arrastar e soltar funcionam para emails de marketing, mas não possuem recursos de conteúdo dinâmico para emails transacionais. As confirmações de pedidos e faturas exigem modelos baseados em dados que o código gerencia melhor.

P: O React Email funciona com algum serviço de envio?

Sim. Ele gera strings HTML padrão compatíveis com Nodemailer, SendGrid, Postmark, AWS SES, Resend ou qualquer servidor SMTP.

P: Como lidamos com a localização de e-mails?

Passe a localidade e as strings traduzidas como acessórios de modelo. A função render recebe todo o texto como parâmetros, portanto as traduções são tratadas pelo seu sistema i18n antes da renderização.

P: Podemos incluir imagens ou gráficos dinâmicos?

Use imagens geradas no servidor hospedadas em URLs. Bibliotecas como QuickChart renderizam gráficos como imagens. Evite imagens incorporadas – use URLs hospedados para compatibilidade.

O que vem a seguir

React Email transforma o desenvolvimento de email transacional de exercícios frustrantes de layout de tabela em fluxos de trabalho modernos baseados em componentes.

Entre em contato com a ECOSIRE para desenvolvimento de modelos de e-mail ou explore nossos serviços de implementação Odoo para fluxos de trabalho de e-mail integrados.

Publicado pela ECOSIRE – ajudando empresas a escalar com soluções de software empresarial.

Modelos de e-mail React: crie lindos e-mails transacionais

Principais conclusões

Os componentes do React Email são compilados em HTML compatível com vários clientes - Gmail, Outlook, Apple Mail

A arquitetura baseada em componentes permite cabeçalhos, rodapés e padrões de layout reutilizáveis

Servidor de visualização local com recarga dinâmica acelera o desenvolvimento de modelos

Exporte funções de renderização (não componentes brutos) para integração perfeita com NestJS

Por que reagir ao e-mail

Configuração do projeto

Modelos de construção

Componentes de layout compartilhados

Crie componentes EmailHeader e EmailFooter reutilizáveis com sua marca. Isso garante consistência em todos os emails transacionais.

Estrutura do modelo

Cada modelo de email é um componente React que recebe adereços digitados:

import {
  Html, Head, Body, Container, Section,
  Text, Button, Hr,
} from "@react-email/components";

interface WelcomeEmailProps {
  userName: string;
  loginUrl: string;
}

export function WelcomeEmail({ userName, loginUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: "Arial, sans-serif" }}>
        <Container style={{ maxWidth: "600px", margin: "0 auto" }}>
          <Text>Hi {userName},</Text>
          <Text>Your account is ready.</Text>
          <Button
            href={loginUrl}
            style={{ background: "#001834", color: "#fff", padding: "12px 24px" }}
          >
            Sign In
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

Renderização para integração NestJS

O padrão crítico: exportar funções de renderização, não componentes brutos. NestJS é executado sem compilação JSX, portanto, importar componentes React diretamente causa erros.

Crie um arquivo render.ts que importe modelos e exporte funções assíncronas:

import { render } from "@react-email/render";
import { WelcomeEmail } from "./templates/welcome";

export async function renderWelcomeEmail(props: {
  userName: string;
  loginUrl: string;
}) {
  return render(WelcomeEmail(props));
}

No NestJS, chame a função render para obter HTML e envie por meio de seu transportador de e-mail.

Fluxo de trabalho de desenvolvimento

Visualização local

Execute npx react-email dev para uma visualização baseada em navegador com recarga dinâmica. As alterações aparecem instantaneamente, tornando a iteração mais rápida.

Teste entre clientes

Teste em clientes usando Litmus ou Email on Acid. No teste mínimo: Gmail (Chrome), Outlook (Windows), Apple Mail, Gmail (iOS), Apple Mail (iOS), Yahoo Mail e Outlook.com.

Práticas recomendadas de estilo

Somente estilos inline: React Email inline estilos automaticamente para compatibilidade do cliente
Fontes do sistema: Use Arial, Georgia, Verdana. Fontes personalizadas têm suporte limitado.
Largura máxima de 600 px: largura padrão de e-mail para computadores e dispositivos móveis
Layout baseado em tabela: os componentes do React Email são renderizados como tabelas para compatibilidade com o Outlook
Modo escuro: inclui meta tags para suporte ao modo escuro do Apple Mail e Outlook

Modelos de e-mail comuns

Confirmação do pedido

Inclua o número do pedido, lista de itens com preços, endereço de entrega, entrega estimada e link de rastreamento quando disponível. Use um layout de tabela para a lista de itens.

Redefinição de senha

Mantenha o mínimo: breve explicação, botão de redefinição em destaque com link por tempo limitado, aviso de segurança sobre não compartilhar o link e contato de suporte.

E-mail da fatura

Anexe a fatura em PDF e inclua um resumo no corpo do e-mail: número da fatura, data, data de vencimento, valor total e um botão para visualizar/pagar online.

Notificação de Envio

Inclua o número do pedido, nome da transportadora, número de rastreamento com link clicável, data estimada de entrega e itens sendo enviados.

Perguntas frequentes

P: Por que não usar um criador de e-mail de arrastar e soltar?

P: O React Email funciona com algum serviço de envio?

Sim. Ele gera strings HTML padrão compatíveis com Nodemailer, SendGrid, Postmark, AWS SES, Resend ou qualquer servidor SMTP.

P: Como lidamos com a localização de e-mails?

P: Podemos incluir imagens ou gráficos dinâmicos?

Use imagens geradas no servidor hospedadas em URLs. Bibliotecas como QuickChart renderizam gráficos como imagens. Evite imagens incorporadas – use URLs hospedados para compatibilidade.

O que vem a seguir

React Email transforma o desenvolvimento de email transacional de exercícios frustrantes de layout de tabela em fluxos de trabalho modernos baseados em componentes.

Entre em contato com a ECOSIRE para desenvolvimento de modelos de e-mail ou explore nossos serviços de implementação Odoo para fluxos de trabalho de e-mail integrados.

Publicado pela ECOSIRE – ajudando empresas a escalar com soluções de software empresarial.

Modelos de e-mail React: crie lindos e-mails transacionais

Modelos de e-mail React: crie lindos e-mails transacionais

Por que reagir ao e-mail

Configuração do projeto

Modelos de construção

Componentes de layout compartilhados

Estrutura do modelo

Renderização para integração NestJS

Fluxo de trabalho de desenvolvimento

Visualização local

Teste entre clientes

Práticas recomendadas de estilo

Modelos de e-mail comuns

Confirmação do pedido

Redefinição de senha

E-mail da fatura

Notificação de Envio

Perguntas frequentes

O que vem a seguir

Expanda o seu negócio com ECOSIRE

Artigos Relacionados

Padrões de API empresarial NestJS 11

Next.js 16 App Router: padrões de produção e armadilhas

Consulta React (TanStack): padrões de busca de dados

Modelos de e-mail React: crie lindos e-mails transacionais

Modelos de e-mail React: crie lindos e-mails transacionais

Por que reagir ao e-mail

Configuração do projeto

Modelos de construção

Componentes de layout compartilhados

Estrutura do modelo

Renderização para integração NestJS

Fluxo de trabalho de desenvolvimento

Visualização local

Teste entre clientes

Práticas recomendadas de estilo

Modelos de e-mail comuns

Confirmação do pedido

Redefinição de senha

E-mail da fatura

Notificação de Envio

Perguntas frequentes

O que vem a seguir

Expanda o seu negócio com ECOSIRE

Artigos Relacionados

Padrões de API empresarial NestJS 11

Next.js 16 App Router: padrões de produção e armadilhas

Consulta React (TanStack): padrões de busca de dados