Tutorial para enviar correo con React.js (Hooks) y emailJS

Javascript
    28 Febrero, 2020   Regresar el blog
Compartir:

 Hoy aprenderemos a enviar un correo de nuestra típica sección de contacto de nuestra página web elaborada en su Front con React.js   usando su nueva característica que son los hooks.  Con la ayuda de emailJS enviaremos nuestra consulta a un correo. Con emailJs no es necesario un lenguaje de backend para enviar correos. 


TUTORIAL


  1. Abrimos el terminal presionando la tecla window + R
  2. Nos vamos al escritorio escribiendo cd desktop
  3. Escribimos la siguiente instrucción npx create-react-app emailjs
  4. navegamos hasta la carpeta creada cd emailjs
  5. Procedemos a instalar el siguiente paquete npm i emailjs-com
  6. Regístrese en EmailJS
  7. Después de registrarse, haga clic en Email Services, elige Gmail para comenzar. después puedes modificar el proveedor cuando quieras. 
  8. Tomemos nuestra clave API en este momento. En EmailJS, navegue a Accound > API KEYS > luego copie la ID de usuario a un bloc de notas para usarla más tarde.

https://tupaginaonline.net/archivos/arc12_44_39.png


Creamos una plantilla en EmailJS > Email Templates,   Reemplace los campos que se completarán con el envío del formulario con {{}} llaves dobles. Dentro de las llaves estará la clave en el par clave-valor del estado de su componente.


https://tupaginaonline.net/archivos/arc12_44_53.png



Ahora abrimos nuestro archivo App.js

importamos emailJS 

import emailjs from ´emailjs-com´


nuestro código quedará de la siguiente forma:




	
import React, {useState} from ´react´;
import emailjs from ´emailjs-com´;
const App = () => {
   const frmContact = { userEmail:´´, concernCategory:´´, emailTitle:´´, emailDetails:´´ };
   const [contact,setContact] = useState(frmContact);
   const [showMessage, setShowMessage] = useState(false);
   const handleChange = e => { 
		const {name,value} = e.target;
		setContact({...contact,[name]:value}); 
   };
   const handleSubmit = e =>{
	    e.preventDefault();
	   
		emailjs.send(´default_service´,´<YOUR TEMPLATE ID>´, contact, ´<YOUR USER ID>´)
		.then((response) => {
				   console.log(´SUCCESS!´, response.status, response.text);
				   setContact(frmContact);
				   setShowMessage(true);
		}, (err) => {
				   console.log(´FAILED...´, err);
		});
   }
  return (
    <div className="container pt-2 text-center">
		<div className="alert alert-light" role="alert">
		  <a href="https://tupaginaonline.net/tutorial-para-enviar-correo-con-react-js-hooks-y-emailjs">Tutorial para enviar correo con React.js (Hooks) y emailJS</a>
		</div>
		
		{ showMessage ? <div className="alert alert-success col-md-5 mx-auto" role="alert">Email Send Success!!</div> : ``}
	
		<form onSubmit={handleSubmit}>
			  <div className="pt-3"><h3 className="font-weight-bold"> Contact Us !! </h3></div>
			  <div className="pt-3 col-md-5 mx-auto">
					<div className="form-group text-left"> <b>Your Email</b> <br/>
						<input required type="text" value={contact.userEmail} name="userEmail" onChange={handleChange} className="form-control" placeholder="Your email" />
					</div>
			  </div>
			  <div className="pt-3 col-md-5 mx-auto">
					<div className="form-group text-left"> <b>Concern Category</b> <br/>
						<select  required className="form-control" value={contact.concernCategory} onChange={handleChange} name="concernCategory">
						    <option value=´´ >Select</option>
							<option value="info" >Info</option>
							<option value="buy">Buy</option>
							<option value="play tennis">Play tennis</option>
							<option value="other">Other</option>
						</select>
					</div>
			  </div>
			  <div className="pt-3 col-md-5 mx-auto">
					<div className="form-group text-left"> <b>Title</b> <br/>
						<input value={contact.emailTitle} required type="text" name="emailTitle" onChange={handleChange}  className="form-control" placeholder="Your email" />
					</div>
			  </div>
			  <div className="pt-3 col-md-5 mx-auto">
					<div className="form-group text-left"> <b>Describe your concerns</b> <br/>
						<textarea required name="emailDetails" onChange={handleChange} className="form-control" placeholder="Describe your concerns" value={contact.emailDetails}></textarea>
					</div>
			  </div>
			  <div className="pt-3 col-md-5 mx-auto text-left">
					<button className="btn btn-primary">Submit</button>
			  </div>
		</form>
		<div className="pt-5 font-weight-bold">tupaginaonline.net</div>		
	</div>
  );
}
export default App;

	


Probamos que se envía el correo al ver el log


https://tupaginaonline.net/archivos/arc15_29_01.jpg


https://tupaginaonline.net/archivos/arc15_29_15.jpg


Ejecutamos

npm run build


subimos nuestro build al servidor y listo


Podemos ver en funcionamiento el ejemplo haciendo clic aquí




Si deseas tener tu página web, dale clic al botón de abajo

¡Ordena ya tu página web!


3052 vistas
Compartir:


Autor
Jose Fuentes

- Web Developer -

0 COMENTARIO(S)
Contesta
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *
Comentario *
Nombre *
Correo electrónico *
Sitio web

Articulos Relacionados
Articulos recientes

Desarrollos en venta

$ usd dólar 600