Use o Firebase para armazenamento de dados de back-end e desenvolva aplicativos simples com facilidade.
Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado.
De acordo 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 de pilha completa sem escrever uma única linha de código de back-end. Aprenda a conectar seu aplicativo React.js com o Firebase hoje mesmo e crie em qualquer lugar.
Instale o pacote Firebase
Depois criando seu aplicativo React, altere o diretório para a pasta raiz do seu projeto e instale o pacote Firebase executando:
npm instalar base de fogo
Adicione seu aplicativo React a um projeto do Firebase
A próxima etapa é criar um projeto do Firebase e vinculá-lo ao seu aplicativo React. Vou ao Console do Firebase:
- Clique Adicionar 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 no menu suspenso ou clique em Criar uma nova conta se você ainda não tiver um.
- Finalmente, clique Criar projeto.
- Clique Continuar assim que o processo for concluído.
- Em seguida, clique no ícone da Web () no canto superior esquerdo da página seguinte para configurar o Firebase para a web.
- Insira um apelido para seu aplicativo no campo fornecido. Então clique Registrar aplicativo.
- Copie o código gerado e guarde-o para a próxima etapa (discutida na seção a seguir).
- Clique Continuar para o console.
- Existem muitas opções na página seguinte. Role para baixo e selecione Cloud Firestore já que você só precisa configurar um banco de dados neste caso.
- Em seguida, clique Criar banco de dados.
- Clique Próximo. Selecione o local preferido do Firestore no menu suspenso.
- Então clique Habilitar para criar um banco de dados do Firestore.
Inicialize o Firebase em seu aplicativo React
Crie uma nova pasta dentro do seu projeto origem diretório. Você pode chamar isso de firebase_setup. A seguir, crie um firebase.js arquivo dentro dessa pasta. Em seguida, cole o código gerado anteriormente neste arquivo.
Por enquanto, você pode armazenar o objeto de configuração (firebaseConfig) dentro de um .env arquivo. Mas considere usar um método mais seguro maneira de mascarar os segredos do React em produção. Dados que você armazena em um .env arquivo 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. Além disso, reinicie seu servidor React sempre que alterar os detalhes no .env arquivo.
Por exemplo, para inserir a chave secreta do Firebase do seu aplicativo no .env arquivo:
REACT_APP_apiKey = suaFirebaseAccessKey
Assim, você pode ajustar o código gerado da seguinte maneira:
importar {inicializarAplicativo} de "firebase/aplicativo";
importar { getFirestore } de "@firebase/firestore"
const firebaseConfig = {
Chave API: processo.env.REACT_APP_apiKey,
domínio de autenticação: processo.env.REACT_APP_authDomain,
ID do projeto: processo.env.REACT_APP_projectId,
armazenamentoBalde: processo.env.REACT_APP_storageBucket,
messageSenderId: processo.env.REACT_APP_messagingSenderId,
appId: processo.env.REACT_APP_appId,
ID de medição: processo.env.REACT_APP_measurementId
};
const app = initializeApp (firebaseConfig);
exportarconst firestore = getFirestore (aplicativo)Teste sua conexão com o Firebase
Você pode testar a conexão enviando dados fictícios ao Firestore. Comece criando um alças pasta dentro do seu projeto origem diretório. Crie um manipulador de envio dentro desse arquivo. você pode chamar isso handlesubmit.js, por exemplo:
importar { addDoc, coleção } de "@firebase/firestore"
importar { firestore } de "../firebase_setup/firebase"const handleSubmit = (testdata) => {
const ref = coleção (firestore, "test_data") // Firebase cria isso automaticamentedeixar dados = {
testData: testdata
}tentar {
addDoc (ref, dados)
} pegar(err) {
console.log (erro)
}
}
exportarpadrão manipularEnviar
Então dentro App.js:
importar './App.css';
importar manipularEnviar de './handles/handlesubmit';
importar { useRef } de 'reagir';funçãoAplicativo() {
const dataRef = useRef()const submithandler = (e) => {
e.preventDefault()
manipularEnviar(dataRef.atual.valor)
dataRef.current.value = ""
}retornar (
<div className="Aplicativo">
<formulário onSubmit={submithandler}>
<tipo de entrada= "texto" ref={dataRef} />
<tipo de botão = "enviar">Salvar</button>
</form>
</div>
);
}
exportarpadrão Aplicativo;
Execute seu aplicativo React e tente enviar dados por meio do formulário. Atualize o console do banco de dados Firebase para ver as informações enviadas em sua coleção. Com o básico pronto, você pode explorar muitos outros 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 como serviço que permite dimensionar seu aplicativo com eficiência. Depois de conectar seu aplicativo React, você pode aproveitar seus muitos recursos para criar seu site ao seu gosto.
Por exemplo, o kit de ferramentas de autenticação Firebase é um dos recursos que você pode querer explorar.
