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

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 ( Contact Form ); } 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 . 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 ( // form element ); } 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 ( Contact Form // div container with input element ); } 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 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!