React, enviando e-mails com Emailjs

Primeiramente, este artigo presume que você tenha os conhecimentos básicos de React como states, leitura de formulários e, claro, já esteja familiarizado com o nosso npm de cada dia.

Vamos utilizar o serviço Emailjs para realizar os envios de e-mail.

Configurando os serviços no EmailJS

O fluxo do Emailjs funciona da seguinte maneira:

  1. E-mail Services: Suas credenciais para envio dos e-mails.
  2. E-mail Templates: A formatação de como será enviado o e-mail.

No dashboard do Emailjs, após realizar o cadastro do seu serviço de e-mail, você verá um item assim:

Salve o “Service ID”, vamos precisar dele em breve.

Agora é hora de configurarmos o template do nosso e-mail. Este template está sendo utilizando no meu site pessoal, através do formulário de contato:

A formatação é livre, os parâmetros referenciados, como por exemplo {{nome}}, são atributos de um objeto json enviando junto com a chamada de envio de e-mail. Após salvarmos o template, vamos anotar o seu id:

Instalando o pacote emailjs-com:

npm install emailjs-com --save

Agora que temos tudo o que precisamos, vamos realizar o envio do e-mail.
Primeiro, vamos importar o pacote:

import emailjs from 'emailjs-com';

Feito isso, na função que recebe o seu formulário e após tratar o estado da sua aplicação com os dados do seu formulário, vamos adicionar o seguinte código:

emailjs.send('service_id', 'template_id', this.state, 'user_id').then((response) => {
   //E-mail enviado com sucesso
}, (err) => {
   //Tratamento de erro
});

Simples assim! Lembrando que você pode consultar o seu user_id diretamente no seu perfil no site do Emailjs.
Só trocar os parâmetros pelos seus respectivos ids e pronto, sua aplicação está agora enviando e-mails.

A versão gratuita do Emailjs possui um limite de 200 e-mails/mês, então caso você tenha uma necessidade maior, não esqueça de verificar o melhor plano para você.

Qualquer dúvida ou sugestão, é só chamar!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Rolar para o topo