5 tópicos úteis para usar em React apps com Firebase e Firestore

Image for post
Image for post

Nesta artigo, vamos ver 5 usos do Firebase que foram muito úteis para mim em alguns projetos. Vamos lá!

Introdução

O primeiro passo é instalar os packages que nós precisamos:

Podemos usar o `npm install`para isso também. ;)

Configuração

Agora, vamos criar nosso arquivo de configuração. No meu caso eu nomeei como .

Uma pequena observação no código sobre . Essa configuração permite gravar os dados de perfil (como nome, telefone, etc..) em uma collection automaticamente.
Agora precisamos configurar o arquivo , verifiquemos as mudanças abaixo:

Usando

Por último nós verificamos aqui como usar isso em alguns casos como:

1. Redirecionar o login

2. Usando Autenticação:

Explicando o código: Neste método estamos usando o login com o Google, repare no estamos lançando uma mensagem, caso não dê erro ele automaticamente atualizará o state firebase.auth. :)

3. Usando real-time.

Explicando o código: Neste caso nós estamos como que 'ouvindo' a collection ordenando ela por data decrescente. Sempre que houve uma inclusão, exclusão ou atualização nessa collection no firebase, nós obteremos aqui o que foi feito na variavel .

4. Usando Firestore

Explicando o código: Neste exemplo estamos adicionando um comentário no firestore.

5. Usando as informações de perfil.

Veja como é simples usando os dados de perfil do usuário logado no código acima.

Isso é tudo. Eu espero ter ajudado. Obrigado.

Written by

Software Engineer, Full Stack Developer, Musician and Writer. edertaveira.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store