Preact + emailjs envio de e-mail sem backend

Nesse artigo vamos, ver como enviar email com Preact, sem ter um backend, para isso vamos usar uma libe muito bacana emailjs, então vamos ao codigo.

Inicialmente iremos criar um form usando Preact com linkState, que ira facilitar a manipulação de nosso form.

Vamos então instalar o que iremos precisar, irei levar e consideração que ja tem sua app com Preact rodando.

npm i linkstate emailjs-com -S

agora vamos criar nosso form.

Nosso codigo ira ficar assim.

Vamos agora usando o linkState, para facilitar a interação entre nossos inputs e nosso componente.

Para isso vamos primeiro criar os estados do nosso componente

Feito isso , agora vamos vincular nossos estados com nossos inputs.

Notem que tem algumas classes de CSS, nesse projeto usamos milligram.io, após vincularmos nosso componentes a nossos estados, temos os famosos, componentes controlados.

Vamos a parte mais bacana, onde iremos criar a nossa função para enviar o e-mail, para isso crie uma conta no http://www.emailjs.com , apos criar sua conta va em Email Service, onde pode configurar o seu servidor smtp, que pode ser qualquer um inclusive gmail.

após isso, vá em Email Templates onde ira criar o template do seu email.

Note que temos alguns nomes com {{ }} que são nossas variáveis que seraão passadas em nossa função de enviar.

Apos criar seu template clique em code<> , e ele ira mostrar o código para realizar o envio, nesse código tera algo assim.

agora precisamos do user_id a chave para que possa enviar nosso email, esse dado você consegue na opção Account .

agora com todos os dados, vamos a nossa função de enviar.

Vamos ver como ficara nosso componente completo.

Agora seus clientes podem entrar em contato pelo seu site ou sua PWA, sem que tenha um backend.

Gostou, leia também como criar uma PWA com preact + netlify.
quer interagir com a galera , entre no grupo do telegram https://t.me/PreactJsBrasil