Enviar correo electrónico desde la aplicación web React

1. Crear una aplicación de correo electrónico con la API de EmailJS
2. Enviar un correo electrónico con Expressjs y Mailgun
3. Conclusión

Idealmente, React es un marco de front-end para construir las interfaces de usuario de las aplicaciones. Debido a la flexibilidad de React y la facilidad de instalación de las dependencias, React se puede usar para crear una aplicación completa, que tenga tanto el frontend como el backend.

Esto también es cierto cuando queremos crear aplicaciones que una aplicación de correo electrónico requiere que se intercambien datos entre servidores, pero ¿cómo creamos una aplicación de correo electrónico con React?

Crear una aplicación de correo electrónico con la API de EmailJS

EmailJS es una de esas dependencias que permite a los usuarios crear una aplicación de correo electrónico dentro del marco de React. Gracias a la dependencia, no necesitaríamos construir un backend para la aplicación ya que se encarga del lado del servidor; todo lo que tenemos que hacer es poner los códigos correctos.

Para comenzar, nos dirigiremos a emailjs.com para crear una cuenta. Una vez que hemos confirmado la cuenta, configuramos un servicio de correo electrónico.

En la barra lateral izquierda del sitio web, hacemos clic en Servicios de correo electrónico y, de la lista, seleccionamos Gmail; veremos una ventana emergente. Haga clic en Conectar cuenta, seleccione el correo electrónico que queremos conectar al servicio, luego seleccione Agregar servicio para crear el servicio de correo electrónico.

Una vez que esto sea exitoso, debemos recibir una identificación de servicio y un correo electrónico de prueba enviado al correo electrónico que conectamos al servicio.

A continuación, seleccionamos Plantillas de correo electrónico en la barra lateral izquierda y hacemos clic en Crear nueva plantilla para crear una plantilla de correo electrónico. Una vez que estemos satisfechos con cómo es, hacemos clic en Guardar.

Se creará una ID de plantilla. Necesitaremos esto dentro de nuestro código.

Ahora, proceda a crear una carpeta de proyecto de React. Una vez hecho esto, navegamos a la carpeta del proyecto e instalamos la dependencia de EmailJS, usando:

npm install emailjs-com

Ahora, importamos la dependencia al archivo App.js y luego agregamos algunos códigos, como este:

Fragmento de código- App.js:

import React from 'react';
import emailjs from 'emailjs-com';

export default function ContactUs() {

  function sendEmail(e) {
    e.preventDefault();

    emailjs.sendForm('service_j0q23dh', 'template_rhntbdy', e.target, 'ehCd9ARJUiDG1yjXT')
      .then((result) => {
        window.location.reload()
      }, (error) => {
        console.log(error.text);
      });
  }

  return (
    <form className="contact-form" onSubmit={sendEmail}>
      <input type="hidden" name="contact_number" />
      <label>Name</label>
      <input type="text" name="from_name" />
      <label>Email</label>
      <input type="email" name="from_email" />
      <label>Subject</label>
      <input type="text" name="subject" />
      <label>Message</label>
      <textarea name="html_message" />
      <input type="submit" value="Send" />
    </form>
  );
}

Ahora dentro del emailjs.sendForm('YOUR_SERVICE_ID' 'YOUR_TEMPLATE_ID' target, 'YOUR_USER_ID'), reemplazarás cada elemento con los que has creado.

Después de que el correo se envía con éxito, la función window.location.reload() actualiza la página, preparándola para otra tarea. Luego continuamos con la construcción de la página de correo electrónico.

Asignamos el controlador de eventos onSubmit al botón de envío. Una vez que se haga clic, se enviará el correo electrónico.

Producción:

Enviar un correo electrónico con Expressjs y Mailgun

Esta vez, crearemos una aplicación de envío de correo electrónico React de pila completa. Tendrá tanto front como backend, enviando el correo electrónico desde su propio servidor.

Para comenzar con la interfaz, cree una nueva aplicación React e instale algunas dependencias. Instale Axios con npm install axios; esto maneja las solicitudes que enviaremos al backend.

Lo siguiente es instalar Toastify con npm install react-toastify. Esta dependencia ayuda a crear una notificación con estilo que aparece cuando hemos enviado correctamente el correo electrónico o no.

Dentro del archivo App.js, importe las dependencias instaladas como se muestra a continuación, luego agregue estos códigos:

Fragmento de código- App.js:

import './App.css';
import { useState } from 'react';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import axios from 'axios';

function App() {
  const [email, setEmail] = useState('');
  const [subject, setSubject] = useState('');
  const [message, setMessage] = useState('');
  const [loading, setLoading] = useState(false);

  const submitHandler = async (e) => {
    e.preventDefault();
    if (!email || !subject || !message) {
      return toast.error('Please fill email, subject and message');
    }
    try {
      setLoading(true);
      const { data } = await axios.post(`/api/email`, {
        email,
        subject,
        message,
      });
      setLoading(false);
      toast.success(data.message);
    } catch (err) {
      setLoading(false);
      toast.error(
        err.response && err.response.data.message
          ? err.response.data.message
          : err.message
      );
    }
  };
  return (
    <div className="App">
      <ToastContainer position="bottom-center" limit={1} />
      <header className="App-header">
        <form onSubmit={submitHandler}>
          <h1>Send Email</h1>
          <div>
            <label htmlFor="email">Email</label>
            <input
              onChange={(e) => setEmail(e.target.value)}
              type="email"
            ></input>
          </div>
          <div>
            <label htmlFor="subject">Subject</label>
            <input
              id="subject"
              type="text"
              onChange={(e) => setSubject(e.target.value)}
            ></input>
          </div>
          <div>
            <label htmlFor="message">Message</label>
            <textarea
              id="message"
              onChange={(e) => setMessage(e.target.value)}
            ></textarea>
          </div>
          <div>
            <label></label>
            <button disabled={loading} type="submit">
              {loading ? 'Sending...' : 'Submit'}
            </button>
          </div>
        </form>
      </header>
    </div>
  );
}

export default App;

Los estados de los elementos en la página cambiarán, por lo que asignamos cada componente a la función useState, luego configuramos el Axios para manejar los datos que se ingresarán dentro de cada campo.

Esto se hace dentro del componente submitHandler. Toastify verifica las notificaciones y las transmite de manera adecuada.

A continuación, creamos el formulario como parte de la aplicación de correo electrónico. El botón de envío se asigna a la función submitHandler, que se activa una vez que se hace clic en el botón de envío, gracias al controlador de eventos onSubmit.

Para embellecer la página, incluya este fragmento de estilo dentro del archivo App.css, como se muestra a continuación:

Fragmento de código- App.css:

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

form > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem;
}
form > div > label {
  margin: 1rem;
}
form > div > input,
form > div > textarea {
  padding: 0.5rem;
  min-width: 20rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

Ahora, vayamos al backend. Crearemos una nueva carpeta fuera de nuestra carpeta de proyecto y la llamaremos backend. Luego navegamos por esta carpeta dentro de la terminal y escribimos npm init -y para iniciar el nodo.

Luego ubicamos el archivo .gitignore y lo abrimos. Está justo encima del archivo package.json de la carpeta del proyecto, justo debajo de la carpeta src.

Elimina el / detrás de node_modules. Esto hará que los módulos de nodo en la carpeta backend se activen.

Aún así, en la carpeta del proyecto, abra el archivo package.json. Después de la entrada nombre, agregue esto a la siguiente línea: "proxy": "http://localhost:4000/",; este es el proxy donde se ejecutará el backend.

Ahora instale estas dependencias simultáneamente así:

npm install dotenv express mailgun-js

El dotenv nos ayuda a proteger los datos vitales que usaremos dentro de nuestros códigos, como las claves API privadas. express maneja las conexiones del servidor desde el backend, mientras que mailgun nos proporciona las claves API que necesitaremos para servir nuestra aplicación de correo electrónico.

A continuación, crearemos dos archivos, server.js y .env. Dentro del archivo server.js, escribe estos códigos:

Fragmento de código- server.js:

const express = require('express');
const dotenv = require('dotenv');
const mg = require('mailgun-js');

dotenv.config();

const mailgun = () =>
  mg({
    apiKey: process.env.MAILGUN_API_KEY,
    domain: process.env.MAILGUN_DOMIAN,
  });

const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.post('/api/email', (req, res) => {
  const { email, subject, message } = req.body;
  mailgun()
    .messages()
    .send(
      {
        from: 'John Doe <john@mg.yourdomain.com>',
        to: `${email}`,
        subject: `${subject}`,
        html: `<p>${message}</p>`,
      },
      (error, body) => {
        if (error) {
          console.log(error);
          res.status(500).send({ message: 'Error in sending email' });
        } else {
          console.log(body);
          res.send({ message: 'Email sent successfully' });
        }
      }
    );
});

const port = process.env.PORT || 4000;
app.listen(port, () => {
  console.log(`serve at http://localhost:${port}`);
});

Importamos las dependencias descargadas y luego creamos los códigos para ponerlas en uso. Las claves de API y DOMINIO que obtendremos cuando nos registremos en mailgun.com están escritas dentro del archivo .env, como se muestra a continuación:

Fragmento de código- .env:

MAILGUN_DOMIAN=sandbox540579ee3e724d14a5d72e9d087111a6.mailgun.org
MAILGUN_API_KEY=68fb630dbe57d3ba42d3a13774878d62-1b8ced53-29cac61a

Los importamos al archivo server.js. Luego configuramos las solicitudes y respuestas de correo electrónico y el puerto en el que queremos que se ejecute el servidor.

Para obtener las claves dentro del archivo .env, vaya a mailgun.com y regístrese. A continuación, proceda a Enviar en la barra lateral izquierda, haga clic en Dominios y debería ver sandboxXXXXmailgun.org, que es la clave de dominio.

Cópielo y péguelo como se ve en el archivo .env anterior, y luego haga clic en la clave de dominio. En el extremo derecho, debería ver las claves API; revele la clave API privada, cópiela y péguela en el archivo .env.

Todavía en la página del dominio, en el extremo derecho, verá Destinatarios autorizados, escriba el correo electrónico que desea enviar. Vaya a ese correo electrónico para confirmar que desea recibir un correo electrónico de su perfil de Mailgun.

Luego regrese a la página del dominio y actualícela para asegurarse de que el correo electrónico del destinatario haya sido verificado.

Vuelva a la terminal, vaya a la carpeta del proyecto y escriba npm start para iniciar la aplicación. Abra otra pestaña de terminal, cd en la carpeta de back-end y escriba node server.js para iniciar la carpeta de back-end.

Ve a la aplicación y envía el correo electrónico.

Producción:

Conclusión

Hasta ahora, puede crear casi cualquier aplicación utilizando el marco React debido a su flexibilidad para reunir múltiples piezas de componentes, API y dependencias para crear una aplicación web liviana, flexible, pero muy efectiva y eficiente.