De conciliação com a pesquisa Stack Overflow de 2022, 21,14% dos desenvolvedores usam o Firebase, tornando-o a quarta plataforma de nuvem mais popular. É uma tecnologia em evolução para integrar o back-end perfeitamente.
Com o Firebase, você pode desenvolver um aplicativo full-stack sem redigir uma única risco de código de back-end. Saiba porquê conectar seu aplicativo React.js ao Firebase hoje mesmo e crie em qualquer lugar.
Instale o pacote Firebase
Depois de produzir seu aplicativo React, altere o diretório para a pasta raiz do seu projeto e instale o pacote Firebase executando:
npm install firebase
Aditar seu aplicativo React a um projeto do Firebase
A próxima lanço é produzir um projeto do Firebase e vinculá-lo ao seu aplicativo React. Acesse o console do Firebase:
- Clique Aditar projeto para iniciar um novo projeto do Firebase.
- Digite um nome de projeto e clique em Continuar.
- Clique Continuar na próxima página.
- Selecione sua conta do Firebase na lista suspensa ou clique em Fabricar uma novidade conta se você ainda não tem um.
- Por término, clique Fabricar projeto.
- Clique Continuar mal o processo for concluído.
- Em seguida, clique no ícone Web () no quina superior esquerdo da página a seguir para configurar o Firebase para a Web.
- Insira um sobrenome para seu aplicativo no campo fornecido. Logo clique Registrar aplicativo.
- Copie o código gerado e guarde-o para a próxima lanço (discutida na seção a seguir).
- Clique Continuar para o console.
- Há muitas opções na página a seguir. Role para insignificante e selecione Cloud Firestore já que você só precisa configurar um banco de dados neste caso.
- A seguir, clique Fabricar banco de dados.
- Clique Próximo. Selecione seu lugar preposto do Firestore na lista suspensa.
- Logo clique Permitir para produzir um banco de dados do Firestore.
Inicialize o Firebase em seu aplicativo React
Crie uma novidade pasta dentro do seu projeto src diretório. Você pode invocar isso de firebase_setup. A seguir, crie um firebase.js registo dentro dessa pasta. Em seguida, cole o código gerado anteriormente neste registo.
Por enquanto, você pode armazenar o objeto de feição (firebaseConfig) dentro de um .env Registro. Mas considere usar uma maneira mais segura de mascarar segredos do React na produção. Dados que você armazena em um .env registo pode vazar facilmente na compilação do seu aplicativo.
Se estiver usando a opção .env, anexe “REACT_APP” a cada nome de variável dentro .env. Caso contrário, seu aplicativo não lerá as strings. Outrossim, reinicie seu servidor React toda vez que você mudar os detalhes no .env Registro.
Por exemplo, para inserir a chave secreta do Firebase do seu aplicativo no .env Registro:
REACT_APP_apiKey = yourFirebaseAccessKey
Assim, você pode ajustar o código gerado da seguinte forma:
import { initializeApp } from "firebase/app";
import { getFirestore } from "@firebase/firestore"
const firebaseConfig = {
apiKey: process.env.REACT_APP_apiKey,
authDomain: process.env.REACT_APP_authDomain,
projectId: process.env.REACT_APP_projectId,
storageBucket: process.env.REACT_APP_storageBucket,
messagingSenderId: process.env.REACT_APP_messagingSenderId,
appId: process.env.REACT_APP_appId,
measurementId: process.env.REACT_APP_measurementId
};
const app = initializeApp(firebaseConfig);
export const firestore = getFirestore(app)Teste sua conexão do Firebase
Você pode testar a conexão enviando dados fictícios ao Firestore. Comece criando um alças pasta dentro do seu projeto src diretório. Crie um manipulador de envio dentro deste registo. Você pode invocar isso handlesubmit.js, por exemplo:
import { addDoc, collection } from "@firebase/firestore"
import { firestore } from "../firebase_setup/firebase"const handleSubmit = (testdata) => {
const ref = collection(firestore, "test_data")
let data = {
testData: testdata
}
try {
addDoc(ref, data)
} catch(err) {
console.log(err)
}
}
export default handleSubmit
Logo dentro App.js:
import './App.css';
import handleSubmit from './handles/handlesubmit';
import { useRef } from 'react';function App() {
const dataRef = useRef()
const submithandler = (e) => {
e.preventDefault()
handleSubmit(dataRef.current.value)
dataRef.current.value = ""
}
return (
<div className="App">
<form onSubmit={submithandler}>
<input type= "text" ref={dataRef} />
<button type = "submit">Save</button>
</form>
</div>
);
}
export default App;
Execute seu aplicativo React e tente enviar dados por meio do formulário. Atualize o console do banco de dados do Firebase para ver as informações enviadas em sua coleção. Com o vital, você pode explorar muitas outras coisas que o Firebase pode fazer para ver a melhor forma de usá-lo.
Crie em qualquer lugar com Firebase e React
O Firebase é uma solução versátil de back-end porquê serviço que permite dimensionar seu aplicativo com eficiência. Depois de conectar seu aplicativo React, você pode aproveitar seus muitos recursos para produzir seu site ao seu paladar.
Por exemplo, o kit de ferramentas de autenticação do Firebase é um dos recursos que você pode explorar.
Barnabé Ferreira