React é uma biblioteca front-end para construir interfaces de usuário para aplicativos front-end. Além disso, o React é útil ao criar seus aplicativos, pois usa componentes reutilizáveis.  A questão que sempre existiu para os desenvolvedores front-end é como lidar com as solicitações dos dados do formulário sem escrever ou ter conhecimento das funcionalidades do back-end. Construir um servidor de back-end pode ser tedioso e usar um serviço de terceiros é necessário para esta tarefa para aliviar a dor de escrever a lógica.  O que é EmailJS?  O EmailJS é um serviço que ajuda a enviar e-mails usando aplicativos do lado do cliente, como React, Vue e Angular, sem servidor durante a configuração e instalação.  Neste tutorial, você aprenderá como conectar uma biblioteca de front-end, React, com EmailJS para receber mensagens de usuários em seu site ou aplicativos móveis sem o estresse de criar do zero.  Demonstração  Obtenha uma vantagem inicial com o código inicial   ou crie um novo aplicativo React. neste repositório  Pré-requisitos  Para seguir com o tutorial, você precisa ter o seguinte:    instalado em sua máquina local Nó >= 14.0.0 e npm >= 5.6  Uma compreensão dos fundamentos do React  Uma   para experimentar o serviço. conta EmailJS  Começando  A primeira etapa da construção de um novo projeto é ter as ferramentas de desenvolvimento que facilitam a construção. No seu terminal, execute este comando:   npx create-react-app react-contact-form-with-emailjs  O comando acima cria o clichê usando o comando   que contém todos os arquivos e pacotes para o aplicativo React. create-react-app  Instalando EmailJS  Como uma dependência, execute o comando para instalar EmailJS SDK no aplicativo React.   npm install @emailjs/browser  Executando o Projeto  Para executar o aplicativo React, navegue até o diretório do projeto e execute o servidor de desenvolvimento fornecido com o recurso hot reload, que, por sua vez, atualiza o aplicativo com qualquer alteração feita durante o desenvolvimento.  Execute este comando:   cd react-contact-form-with-emailjs npm start  O aplicativo está acessível em   . http://localhost:3000  Criando o formulário de contato  Coletar e receber respostas de seus usuários através do formulário de contato é um recurso vital que um site precisa ter, pois o torna confiável aos olhos dos visitantes.  Então, vamos criar o formulário de contato. No arquivo App.js, copie e cole o seguinte 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;   Estilizando o formulário de contato  A interface do usuário do aplicativo precisa estar bonita para os usuários, portanto, no arquivo   , copie e cole o seguinte 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; }  A página deve ficar assim com tudo feito corretamente:   E-mail de configuraçãoJS  Com o preenchimento da página do formulário de contato sem nenhuma funcionalidade para enviar mensagens, vamos configurar o serviço que enviará o conteúdo do formulário para o seu e-mail.   Adicionar um serviço de e-mail  Esta seção é sobre a integração entre EmailJS e seu servidor de e-mail. No painel do EmailJS, escolha o serviço   na guia   , que deve abrir uma nova página chamada   .  Gmail Email Services config service Em seguida, altere os parâmetros de   e   . O   será usado posteriormente ao inicializar o formulário de contato para conectá-lo ao EmailJS. Certifique-se de clicar no botão   e   para confirmar suas alterações.  nome ID do serviço ID do serviço Conectar conta criar serviço   Criando um modelo de e-mail  O modelo de e-mail é essencial quando você deseja incluir o assunto do e-mail, o conteúdo que ele conterá e seu destino em sua caixa de entrada quando um usuário enviar uma mensagem do lado do cliente do seu site.  No painel, clique na   e em   . guia Modelo de e-mail Criar novo modelo  Em seguida, você deve clicar na guia   e alterar o   e a   para qualquer coisa que desejar. O   será utilizado posteriormente, conforme a imagem abaixo:  Configurações nome ID do modelo template ID  Voltando à guia Conteúdo, os valores dentro das chaves são variáveis dinâmicas que devem ter o mesmo valor definido no elemento   no formulário de contato, como   ,   e   . <form> message user_name user_email  Criando as Variáveis de Ambiente  As variáveis de ambiente   é um arquivo que armazena suas chaves públicas e outros valores que você não deseja compartilhar e é privado apenas para você. .env  Na raiz do diretório do seu projeto, crie um arquivo,   , e cole o seguinte: .env   // .env REACT_APP_TEMPLATE_ID=TEMPLATE_ID REACT_APP_SERVICE_ID=SERVICE_ID REACT_APP_PUBLIC_KEY=API_PUBLIC_KEY  Para a chave pública, você pode encontrá-la clicando na guia   e copiando o valor conforme mostrado na seção   :  Account public key   Inicializar EmailJS  No aplicativo React, importe o pacote instalado,   package. @emailjs/browser  Copie e cole o seguinte:   // src/App.js import React from 'react' import emailjs from '@emailjs/browser'; function App() { return ( <div> // form element </div> ); } export default App;   Lidando com o envio do formulário  O gancho   manipula o envio do formulário de contato. useRef  Copie e atualize o código no arquivo   : 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;  O seguinte acontece no código acima:  O hook   é importado e inicializado com uma variável chamada form useRef  O gancho,   , é usado como referência e atribuído ao elemento  useRef <form>  Na função   , o formulário possui o método   que impede a atualização da página sendEmail preventDefault  Ainda assim, na função   , a função   é invocada e inicializada com o ID do   do   , a propriedade   do   e a  sendEmail sendForm service ID template ID form .current ref public key  Uma função de retorno de chamada para os casos de sucesso e falha que ocorrem com o método  .then()  Agora vamos ver o resultado desse projeto:   E-mail de confirmação    Conclusão  Usar o EmailJS para lidar com solicitações de dados no lado do cliente de seu aplicativo é uma excelente maneira de receber respostas de um formulário de contato. O EmailJS fornece outros recursos para explorar e oferece uma experiência robusta sem nunca construir seu servidor ou ter conhecimento de desenvolvimento de back-end. Ele faz tudo por você sob o capô.  Você já usou EmailJS antes? O que você acha da minha abordagem acima? Deixe-nos saber nos comentários abaixo!

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 áudio é produzido no idioma original da história!

Muito longo; Para ler

Make resilience your competitive advantage

Integrando um formulário de contato com o EmailJS no React

Integrando um formulário de contato com o EmailJS no React

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Uma breve introdução à teoria do cérebro de Boltzmann

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Uma breve introdução à teoria do cérebro de Boltzmann

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps