Cómo enviar correos electrónicos con React usando Nodemailer

Cómo enviar correos electrónicos con React usando Nodemailer

Introducción

Como desarrollador frontend, a menudo necesitas enviar correos electrónicos desde una aplicación web creada con herramientas como React. Implementar funcionalidad de correo mejora la experiencia de usuario y facilita flujos como formularios de contacto, restablecimiento de contraseñas y notificaciones. En este artículo explico de forma clara y práctica cómo enviar correos desde React usando un backend con Nodemailer y Express, junto con buenas prácticas y soluciones a errores comunes.

Requisitos previos

Antes de comenzar asegúrate de tener instalados Node.js y un editor de código como Visual Studio Code. También es recomendable contar con conocimientos básicos de JavaScript y React. Para el envío de correos puedes usar un proveedor SMTP como SendLayer o cualquier otro servidor SMTP. Si prefieres externalizar el servicio de correo puedes usar proveedores con SDKs o APIs. Para proyectos profesionales y soluciones a medida considera los servicios de Q2BSTUDIO, especialistas en desarrollo de aplicaciones a medida y software a medida.

Crear el proyecto React

Si no tienes un proyecto existente, crea uno rápido con Vite usando este comando en la terminal npm create vite@latest react-email-app -- --template react Luego entra en la carpeta cd react-email-app instala dependencias con npm install y arranca el servidor de desarrollo con npm run dev.

Por qué usar un backend para enviar correos

React es una librería frontend y no es buena práctica exponer credenciales o hacer llamadas directas a servicios SMTP desde el cliente por motivos de seguridad. Lo habitual es crear un backend que reciba peticiones desde el frontend y realice el envío. Para ello usaremos Express y Nodemailer y habilitaremos CORS para permitir peticiones desde el origen del frontend.

Instalación de dependencias backend

En la carpeta del servidor crea un proyecto Node e instala nodemailer y cors con npm install nodemailer cors express dotenv. Crea un archivo .env con las credenciales SMTP por ejemplo SMTP_HOST=smtp.sendlayer.net SMTP_PORT=587 SMTP_USER=tu-usuario-smtp SMTP_PASS=tu-contraseña-smtp FROM_EMAIL=remitente@tudominio.com Recuerda que el remitente debe pertenecer al dominio autorizado por tu proveedor SMTP.

Esquema básico del servidor

Crea un endpoint POST en Express que reciba to subject y message desde el cuerpo de la petición. En el servidor inicializa Nodemailer con los datos del .env y usa transporter sendMail para enviar el correo. Valida que los campos requeridos estén presentes y maneja errores diferenciando respuestas del proveedor, falta de respuesta o errores internos.

Conectar React con el backend

Desde el proyecto React instala axios con npm install axios y realiza una petición POST al endpoint del servidor, por ejemplo https://localhost:3000/api/send-email. En el frontend puedes crear un formulario que capture destinatario asunto y mensaje y luego enviar ese objeto como payload. En la UI muestra estados como enviando y errores para mejorar la experiencia de usuario.

Enviar un correo de prueba

Asegúrate de que el backend esté corriendo con node server.js y que el frontend esté en ejecución con npm run dev. Desde la interfaz React pulsa el botón de enviar y revisa la bandeja de entrada del destinatario. Si todo está correcto recibirás el mensaje y en la consola del servidor verás el identificador del envío.

Buenas prácticas y extensiones

Usa variables de entorno para no exponer claves en el código. En producción despliega el backend en un servicio seguro y autentificado, por ejemplo en infraestructura cloud. Si tu proyecto requiere soluciones empresariales completas, en Q2BSTUDIO ofrecemos desarrollo de aplicaciones a medida y servicios cloud aws y azure para desplegar y escalar tus sistemas de forma segura. Si necesitas incorporar capacidades de inteligencia artificial y agentes IA a tus flujos de correo y notificaciones explora nuestras soluciones de inteligencia artificial para empresas y servicios de inteligencia de negocio.

Solución de errores comunes

Error ERR_NETWORK: suele ocurrir cuando intentas conectar directamente desde el frontend a un servicio que bloquea llamadas desde orígenes no autorizados. Solución: crea un backend y desde ahí realiza el envío.

Error Missing required fields: asegúrate de enviar to subject y message en el cuerpo de la petición.

Errores de CORS: confirma que en el backend tienes app use cors antes de las rutas y que el origen del frontend está permitido.

Preguntas frecuentes

Se puede enviar correo sin backend: sí, usando SDKs de proveedores o servicios como EmailJS que permiten llamadas desde el cliente, aunque debes considerar seguridad y límites de uso.

Cómo proteger claves en el frontend: nunca incluir claves en el código cliente. Usa variables de entorno en el servidor o servicios gestionados que proporcionen tokens seguros.

Se pueden enviar correos HTML: sí, en la configuración del correo cambia la propiedad texto por html y pasa el contenido HTML que desees.

Q2BSTUDIO y servicios relacionados

En Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida que complementa soluciones frontend como el ejemplo de este artículo con backends robustos, ciberseguridad y automatización. Ofrecemos servicios profesionales de ciberseguridad y pentesting para proteger tus sistemas, así como Servicios cloud aws y azure para desplegar aplicaciones con alta disponibilidad. Si buscas potenciar tus datos y reporting podemos ayudarte con servicios inteligencia de negocio y Power BI. Integramos soluciones de ia para empresas y agentes IA para automatizar tareas y mejorar la eficiencia operativa. Si quieres desarrollar un proyecto completo de correo, notificaciones y automatización hablamos de software a medida y aplicaciones a medida que se ajustan a tus necesidades.

Recursos y enlaces

Si necesitas una solución de desarrollo a medida visita nuestra página de desarrollo de aplicaciones y software a medida y si te interesa incorporar inteligencia artificial a tus procesos consulta nuestra oferta de inteligencia artificial para empresas .

Conclusión

Enviar correos desde una app React es un flujo común que mejora la interacción con los usuarios. La arquitectura recomendada separa frontend y backend, utilizando Nodemailer en el servidor para gestionar SMTP de forma segura. Si prefieres externalizar todo el backend o necesitas integración con servicios cloud y capacidades avanzadas de IA, en Q2BSTUDIO podemos acompañarte desde el diseño hasta el despliegue y la seguridad.

¿Necesitas ayuda para implementar esto en tu proyecto? Contacta con Q2BSTUDIO y te ayudamos a diseñar e implementar la solución ideal en software a medida, inteligencia artificial, ciberseguridad y servicios cloud.