React es una biblioteca front-end para crear interfaces de usuario para aplicaciones front-end. Además, React es útil al crear sus aplicaciones, ya que utiliza componentes reutilizables.  La pregunta que siempre ha existido para los desarrolladores front-end es cómo manejar las solicitudes de los datos del formulario sin escribir o tener conocimiento de las funcionalidades del back-end. Construir un servidor back-end puede ser tedioso, y se requiere el uso de un servicio de terceros para esta tarea para aliviar el dolor de escribir la lógica.  ¿Qué es EmailJS?  EmailJS es un servicio que ayuda a enviar correos electrónicos utilizando aplicaciones del lado del cliente como React, Vue y Angular, sin servidor durante la configuración y configuración.  En este tutorial, aprenderá cómo conectar una biblioteca front-end, React, con EmailJS para recibir mensajes de usuario en su sitio web o aplicaciones móviles sin el estrés de construir desde cero.  Manifestación  Obtenga una ventaja inicial con el código de inicio en   o cree una nueva aplicación React. este repositorio  requisitos previos  Para seguir con el tutorial, necesita tener lo siguiente:    instalado en su máquina local Nodo >= 14.0.0 y npm >= 5.6  Una comprensión de los conceptos básicos de React  Una   para probar el servicio. cuenta de EmailJS  Empezando  El primer paso para construir un nuevo proyecto es tener las herramientas de desarrollo que hacen que la construcción sea muy sencilla. En tu terminal, ejecuta este comando:   npx create-react-app react-contact-form-with-emailjs  El comando anterior crea el texto modelo usando el comando   que tiene todos los archivos y paquetes para la aplicación React. create-react-app  Instalando EmailJS  Como dependencia, ejecute el comando para instalar EmailJS SDK en la aplicación React.   npm install @emailjs/browser  Ejecutando el Proyecto  Para ejecutar la aplicación React, navegue hasta el directorio del proyecto y ejecute el servidor de desarrollo que viene con la función de recarga en caliente, que, a su vez, actualiza la aplicación con cualquier cambio realizado durante el desarrollo.  Ejecute este comando:   cd react-contact-form-with-emailjs npm start  Se puede acceder a la aplicación en   . http://localhost:3000  Crear el formulario de contacto  Recopilar y recibir respuestas de sus usuarios a través del formulario de contacto es una característica vital que debe tener un sitio web, ya que lo hace confiable a los ojos de los visitantes.  Entonces, vamos a crear el formulario de contacto. En su archivo App.js, copie y pegue el siguiente código:   // src/App.js import React from 'react' import './App.css'; function App() { return ( <div> <h1>Contact Form</h1> <form className='cf'> <div className='half left cf'> <input type='text' placeholder='Name' name='user_name' /> <input type='email' placeholder='Email address' name='user_email' /> </div> <div className='half right cf'> <textarea name='message' type='text' placeholder='Message'></textarea> </div> <input type='submit' value='Submit' id='input-submit' /> </form> </div> ); } export default App;   Aplicar estilo al formulario de contacto  La interfaz de usuario de la aplicación debe verse hermosa para los usuarios, por lo que en el archivo   , copie y pegue el siguiente código: App.css   // src/App.css @import url(https://fonts.googleapis.com/css?family=Merriweather); html, body { background: #f1f1f1; font-family: 'Merriweather', sans-serif; padding: 1em; } h1 { text-align: center; color: #a8a8a8; } form { max-width: 600px; text-align: center; margin: 20px auto; } input, textarea { border: 0; outline: 0; padding: 1em; border-radius: 8px; display: block; width: 100%; margin-top: 1em; font-family: 'Merriweather', sans-serif; resize: none; } #input-submit { color: white; background: #e74c3c; cursor: pointer; } #input-submit:hover { box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2); } textarea { height: 126px; } .half { float: left; width: 48%; margin-bottom: 1em; } .right { width: 50%; } .left { margin-right: 2%; } @media (max-width: 480px) { .half { width: 100%; float: none; margin-bottom: 0; } } .cf:before, .cf:after { content: ' '; display: table; } .cf:after { clear: both; }  La página debería verse así con todo bien hecho:   Configurar correo electrónicoJS  Con la finalización de la página del formulario de contacto sin ninguna funcionalidad para enviar mensajes, configuremos el servicio que enviará el contenido del formulario a su correo electrónico.   Agregar un servicio de correo electrónico  Esta sección trata sobre la integración entre EmailJS y su servidor de correo electrónico. En su panel de EmailJS, elija el servicio de   en la pestaña   , que debería abrir una nueva página llamada   .  Gmail Servicios de correo electrónico servicio de configuración A continuación, cambie los parámetros de   e   . La   se usará más adelante al inicializar el formulario de contacto para conectarlo a EmailJS. Asegúrese de hacer clic en el botón   y   para confirmar sus cambios.  nombre identificación del servicio identificación del servicio Conectar cuenta crear servicio   Creación de una plantilla de correo electrónico  La plantilla de correo electrónico es esencial cuando desea incluir el asunto del correo electrónico, el contenido que contendrá y su destino en su bandeja de entrada cuando un usuario envíe un mensaje desde el lado del cliente de su sitio web.  En el tablero, haga clic en la   y en   . pestaña Plantilla de correo electrónico Crear nueva plantilla  A continuación, debe hacer clic en la pestaña   y cambiar el   y   a lo que desee. El   se usará más adelante, como se muestra en la siguiente imagen:  Configuración Nombre la ID de plantilla ID de la plantilla  Volviendo a la pestaña Contenido, los valores dentro de las llaves son variables dinámicas que deben tener el mismo valor definido en el elemento   en el formulario de contacto, como el   , el nombre de   y   . <form> mensaje usuario el correo electrónico del usuario  Crear las variables de entorno  Las variables de entorno   es un archivo que almacena sus claves públicas y otros valores que no desea compartir y es privado solo para usted. .env  En la raíz del directorio de su proyecto, cree un archivo,   , y pegue lo siguiente: .env   // .env REACT_APP_TEMPLATE_ID=TEMPLATE_ID REACT_APP_SERVICE_ID=SERVICE_ID REACT_APP_PUBLIC_KEY=API_PUBLIC_KEY  Para la clave pública, puede encontrarla haciendo clic en la pestaña   y copiando el valor como se muestra en la sección   :  Account public key   Inicializar EmailJS  En la aplicación React, importe el paquete instalado,   package. @emailjs/browser  Copia y pega lo siguiente:   // src/App.js import React from 'react' import emailjs from '@emailjs/browser'; function App() { return ( <div> // form element </div> ); } export default App;   Manejo del envío de formularios  El   maneja el envío de formularios de contacto. useRef  Copie y actualice el código en el archivo   : App.js   // src/App.js import React, { useRef } from 'react'; // imports function App() { const form = useRef(); const sendEmail = (e) => { e.preventDefault(); emailjs .sendForm( process.env.REACT_APP_SERVICE_ID, process.env.REACT_APP_TEMPLATE_ID, form.current, process.env.REACT_APP_PUBLIC_KEY ) .then( (result) => { alert('message sent successfully...'); console.log(result.text); }, (error) => { console.log(error.text); } ); }; return ( <div> <h1>Contact Form</h1> <form className='cf' ref={form} onSubmit={sendEmail}> // div container with input element </form> </div> ); } export default App;  Lo siguiente sucede en el código anterior:  El hook   es importado e inicializado con una variable llamada form useRef  El gancho,   , se usa como referencia y se asigna al elemento  useRef <form>  En la función   , el formulario tiene el método   que evita que la página se actualice sendEmail preventDefault  Aún así, en la función   , la función   se invoca y se inicializa con el ID de   de   , la propiedad   de   y la   . sendEmail sendForm service ID template ID form .current ref public key  Una función de devolución de llamada para los casos de éxito y falla que ocurren con el método  .then()  Ahora veamos el resultado de este proyecto:   Email de confirmación    Conclusión  Usar EmailJS para manejar solicitudes de datos en el lado del cliente de su aplicación es una excelente manera de recibir respuestas de un formulario de contacto. EmailJS proporciona otras funciones para explorar y le brinda una experiencia sólida sin tener que construir su servidor o tener conocimiento del desarrollo de back-end. Lo hace todo por ti debajo del capó.  ¿Has usado EmailJS antes? ¿Qué opinas de mi enfoque anterior? ¡Háganos saber en los comentarios a continuación!

Initialized

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - No No No Nodejs

2022 - Remote Work Warrior

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Integrando un formulario de contacto con EmailJS en React

Integrando un formulario de contacto con EmailJS en React

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps