Construye y envía emails con React Email

Introducción a React Email. Framework para diseñar plantillas de correo electrónico con componentes predefinidos.

react-mail

Diseñar correos electrónicos utilizando HTML y CSS siempre ha sido un reto debido a la dificultad de crear plantillas que funcionen correctamente en la gran variedad de clientes de correo existentes. Problemas como las inconsistencias de renderizado, incompatibilidades con el modo oscuro y deficiencias en accesibilidad pueden convertirse en un verdadero dolor de cabeza para cualquier desarrollador.

A lo largo de los años, han surgido diversas soluciones para mitigar estos inconvenientes. Entre ellas, destacan frameworks como MJML, Maizzle y la más reciente React Email. En este artículo, exploraremos esta última librería y cómo facilita la creación de plantillas de correo electrónico modernas.

Instalación de React Email

Para comenzar con React Email, podemos utilizar el siguiente comando, que generará una carpeta con el proyecto base:

Terminal
npx create-email@latest

Luego, ingresamos al directorio del proyecto e instalamos las dependencias necesarias:

Terminal
cd react-email-starter
npm install

Ejecutar el servidor en local

Para iniciar el entorno de desarrollo y visualizar nuestras plantillas de email en tiempo real, ejecutamos:

Terminal
npm run dev

Este comando iniciará un servidor local. Una vez en ejecución, podremos acceder a la interfaz de previsualización de emails.

Abre tu navegador y accede a la URL http://localhost:3000. Verás una interfaz con ejemplos de plantillas que podrás modificar y ver en tiempo real. Estas plantillas están ubicadas en la carpeta emails dentro del proyecto.

Plantilla de email

Las plantillas son muy parecidas a un componente en React y las debes guardar en archivos tsx la versión de TypeScript para jsx que permite mezclar TypeScript con HTML para crear los componentes.

Además React Email proporciona un seguido de componentes que te facilitarán el diseño de plantillas. Puedes ver aquí los componentes disponibles y cómo se usan.

Construir plantillas de email

Cuando hayas finalizado el diseño de tus plantillas de correo electrónico, puedes construirlas para su despliegue ejecutando:

Terminal
npm run build

Este comando generará los archivos de salida en la carpeta .react-email/dist/preview/. Estos archivos pueden ser utilizados para integraciones con servicios de envío de correos electrónicos o ser exportados y utilizados en plataformas como AWS SES, SendGrid, Mailchimp, entre otros o integrarlos en tu propio sistema Backend.

Conclusión

React Email es una excelente opción para crear plantillas de correo electrónico. Gracias a su integración con React, permite diseñar emails reutilizables, optimizados y accesibles sin las frustraciones habituales del desarrollo tradicional en HTML y CSS.

Si deseas mejorar la experiencia de diseño y envío de correos electrónicos, definitivamente deberías considerar React Email.