Enviar email con React

Si estamos creando algún tipo de landing page en el que creemos que no necesitamos backend. O por algún motivo nos olvidamos que el formulario de contacto necesita de cierto lenguaje (PHP Python, etc) y queremos hacerlo solo con React.

Vamos a tener que inventarnos algo, ya sea con Express.js o algún tipo de servicio que nos permita enviar un email desde un formulario con React.js

Usar EmailJS para enviar email con ReactJs

EmailJS es un servicio que nos permite usar nuestros formularios hechos en React con Javascript, sin necesidad de servidores o backend por detrás.

Para usar su servicios, primeramente debemos registrarnos y seguir los siguientes pasos:

Agregar un Nuevo Servicio de email, en mi caso email.
Crear una email template, modificamos lo que tengamos que hacer
En «Integracion» copiamos nuestro User ID y API Token

Una vez que tengamos todo.
Nos vamos a nuestro proyecto e instalamos emailjs

npm install emailjs-com

Creamos un archivo donde estan todos nuestros permisos y datos para usar EmailJS. En este caso yo lo guardé en un archivo llamados ApiKey.js y agregue lo siguiente.

//archivo ApiKey.js
export default { 
USER_ID: 'user_#####', 
TEMPLATE_ID: 'template_####'
SERVICE_ID: 'service_###'
}

Ahora en el archivo de nuestro formulario llamamos a Emailjs y agregamos lo siguiente.

import ApiKey from './ApiKey'

const form = useRef()
const sendEmail = e => {
    e.preventDefault()

    emailjs
      .sendForm(ApiKey.SERVICE_ID, ApiKey.TEMPLATE_ID, form.current, ApiKey.USER_ID)
      .then(
        result => {
          alert('Correo enviado correctamente')
        },
        error => {
          alert(`Ocurrio un error, intente nuevamente - ${error}`)
        }
      )
  }

justo debajo. Nuestro formulario…

class FormContact extends Component {
    
    render(){
        return(
                <form onSubmit = {sendEmail}>
                    <label>Nombre y Apellidos</label>
                    <input type="text" name="from_name" />
                    <label>Correo Electrónico</label>
                    <input type="text" name="reply_to" />
                    <label>Telefono</label>
                    <input type="text" name="phone" />
                    <label>Asunto</label>
                    <textarea name="message"/>
                    <button className="btn btn__primary" type="submit">Enviar Mensaje</button>
                </form>
        )
    }
}

export default FormContact;

El «name» de las etiquetas HTML tienen que coincidir con las que hayan definido en la plantilla que crearon en la plataforma de EmailJS y eso seria todo lo necesario para enviar email con react desde un formulario

Usar EmailJS para enviar email con ReactJs

Appatico