Formulário de contato com React + Firebase

Vamos criar um formulário de contato feito em ReactJS e armazenar as solicitações de contato no Firebase Database.

O que é o Firebase Realtime Database?

É um serviço que armazena e sincroniza dados com nosso banco de dados NoSQL hospedado na nuvem. Os dados são sincronizados com todos os clientes em tempo real e permanecem disponíveis quando seu aplicativo está offline.

Uma das grandes qualidades do Firebase RealTime Database é que ele funciona offline, o Firebase RealTime Database SDK armazena os dados em disco e quando a conexão é restabelecida o cliente recebe os dados faltantes e sincroniza com o estado atual do servidor. (Recurso que adoro).

Nosso projeto de exemplo é construído com “create-React-app”, então vamos pular toda a configuração inicial e focar em trabalhar no arquivo “App.js” onde criaremos o formulário.

Configure o Firebase em nosso projeto React

Para usar Firebase RealTime Database em nossa aplicação React devemos importar a biblioteca “Firebase” que instalaremos em nosso projeto a partir do npm com o seguinte comando:

npm install —save firebase

Vamos ao nosso “Firebase Console” escolhemos ou criamos um projeto e na opção “Adicionar Firebase à sua aplicação web” copiamos a configuração que inclui apiKey, authDomain, projectId, databaseURL, storageBucket necessários para conectar com o serviço.

Criamos um arquivo dentro de “src/” e o chamaremos de “Firebase.js” onde adicionaremos nossa configuração da seguinte forma:

Criando nosso formulário de contato dentro de nosso arquivo App.js

Deixo-vos o repositório com o projeto: react-form-firebase

Demonstração do formulário: https://gndx-projects.firebaseapp.com/