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.
Usando a combinação de React e Firebase, você pode produzir aplicativos super responsivos. Se você já está familiarizado com o React, aprender como integrar o Firebase é um excelente próximo passo.
Para entender os fundamentos da manipulação de dados do Firebase, você deve aprender como emparelhar seu banco de dados Firestore com o React para criar um aplicativo CRUD. Usando esse conhecimento, você pode começar a criar aplicativos full-stack escaláveis com pouco ou nenhum código de back-end.
Conecte seu aplicativo React ao Firebase Firestore
Se você ainda não o fez, acesse o console do Firebase e conecte o Firestore ao seu projeto React.
O processo é fácil se você já criou seu aplicativo React.
A seguir, faça um novo firebase_setup diretório dentro do seu projeto origem pasta. Criar uma firebase.js arquivo dentro desta pasta. Cole o código de configuração obtido ao criar um projeto do Firebase dentro do novo arquivo:
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)
O firestore variável contém seu ambiente Firebase Firestore. Você usará isso em todo o aplicativo ao fazer solicitações de API.
Embora esse código use o método .env para mascarar as informações de configuração, existem maneiras de armazenar segredos em React.
Agora, instale o base de fogo e uuid bibliotecas em seu aplicativo React. Embora uuid seja opcional, você pode usá-lo como um identificador exclusivo para cada documento postado no banco de dados do Firestore.
npm instalar base de fogo uuid
Aqui está uma demonstração do que você está prestes a construir com React e Firestore:
Gravar dados no banco de dados do Firestore
Você pode usar o setDoc ou addDoc método para adicionar documentos ao Firebase. O addDoc O método tem a vantagem de instruir o Firebase a gerar um ID exclusivo para cada registro.
Para começar, importe as seguintes dependências para App.js:
importar './App.css';
importar { useEffect, useState } de 'reagir';
importar { addDoc, coleção, setDoc, deleteDoc, doc, query, onSnapshot } de "firebase/firestore";
importar { firestore } de './firebase_setup/firebase';
importar {v4 como uuidv4 } de 'uuid';
Antes de prosseguir, observe a estrutura do DOM e os estados que este tutorial usa:
funçãoAplicativo() {
const [info, setInfo] = useState([])
const [isUpdate, setisUpdate] = useState(falso)
const [docId, setdocId] = useState("")
const [detalhe, setDetalhe] = useState("")
const [ids, setIds] = useState([])retornar (
<div className="Aplicativo">
<forma>
<tipo de entrada= "texto" value={detail} onChange={handledatachange} />
{
éAtualizar? (
<>
<botão onClick={handlesubmitchange} tipo = "enviar">Atualizar</button>
<botão onClick={() => { setisUpdate (falso); setDetail("")}}>
x
</button>
</>
): (<botão onClick={submithandler} type="enviar">Salvar</button>)
}
</form>{info.map((dados, índice)=>
<div key={ids[index]} className='recipiente de dados' id='recipiente de dados'>
<p className='dados' id='dados' data-id ={ids[index]} chave={ids[index]}>{dados}</p>
<botão className='botão de exclusão' id='botão deletar' onClick={handledelete}>
Excluir
</button><botão className='botão de atualização' id='botão de atualização' onClick={handleupdate}>
Editar
</button>
</div>
)}
</div>
);
}
exportarpadrão Aplicativo;
Em seguida, crie um gerenciador de envio para gravar dados no banco de dados do Firestore. Isto é um ao enviar evento. Então você vai usá-lo no botão enviar.
Além disso, crie um manipulador de alterações. Este evento escuta as alterações no campo do formulário e passa a entrada para um array (o detalhe matriz neste caso). Isso vai para o banco de dados.
const handledatachange = (e) => {
definirDetalhe(e.alvo.valor)
};const submithandler = (e) => {
e.preventDefault()
const ref = coleção (firestore, "dados de teste")deixar dados = {
uuid: uuidv4(),
testData: detalhe
}tentar {
addDoc (ref, dados)
} pegar(err) {
console.log (erro)
}
setDetail("")
}
Embora o Firebase gere IDs de documento automaticamente (a menos que você o impeça), o campo UUID também serve como um identificador exclusivo para cada documento.
Ler dados do banco de dados do Firestore
Busque dados do banco de dados do Firestore dentro do useEffect hook usando o método de consulta do Firestore:
useEffect(() => {
const getData = assíncrono () => {
const dados = aguardam consulta (coleção (firestore, "test_data"));onSnapshot (dados, (querySnapshot) => {
const banco de dadosInfo = [];
const dataIds = []querySnapshot.para cada((doc) => {
informações do banco de dados.empurrar(documento.dados().dados de teste);
dataIds.empurrar(documento.eu ia)
});setIds (dataIds)
setInfo (databaseInfo)
});
}
Obter dados()
}, [])
O código acima usa a consulta do Firebase para obter um instantâneo dos dados enviados ao Firestore usando o método no instantâneo função.
Um instantâneo permite que seu aplicativo escute as alterações no back-end. Ele atualiza o cliente automaticamente cada vez que alguém escreve no banco de dados.
O setInfo state pega os dados em cada documento. Você mapeará através deste (o informação array) durante a renderização para o DOM.
O setIds state rastreia todos os IDs de documentos (passados como o identificadores variedade). Você pode usar cada ID para executar as consultas Excluir e Atualizar em cada documento. Você pode passar cada ID de documento como um atributo DOM ao mapear por meio do informação variedade.
Aqui está o uso do estado dentro do DOM (conforme mostrado no trecho de código anterior):
Atualizar dados existentes no Firestore
Use o setDoc método para atualizar um documento ou um campo em um documento.
Defina dois manipuladores para a ação de atualização. Um lida com o botão enviar para os dados editados (lidar com a mudança), enquanto o outro é para o botão que reescreve os dados no campo de entrada para edição (lidar com atualização):
const handleupdate = (e) => {
setisUpdate(verdadeiro)
definirDetalhe(e.alvo.parentNode.crianças[0].textContent)
setdocId(e.alvo.parentNode.crianças[0].getAttribute("id de dados"))
};const handlesubmitchange = assíncrono (e) => {
e.preventDefault()
const docRef = doc (firestore, 'dados de teste', docId);const dados atualizados = aguardam {
testData: detalhe
};aguardamsetDoc(docRef, dados atualizados, { fundir:verdadeiro })
.então (console.log("Dados alterados com sucesso"))
setisUpdate(falso)
setDetail("")
}
Conforme mostrado no trecho de código anterior, aqui está a renderização do DOM para as ações de criação e atualização:
O lidar com atualização A função destina-se a cada ID de documento no DOM usando seu caminho de nó. Ele usa isso para consultar cada documento do banco de dados para fazer alterações. O botão Editar usa esta função.
Então isUpdate (rastreado pelo setisUpdate estado) retorna verdadeiro quando um usuário clica no botão Editar. Essa ação abre o botão Atualizar, que envia os dados editados quando um usuário clica nele. O Extra x botão fecha a ação de edição quando clicado - definindo isUpdate para falso.
Se isUpdate é falso, o DOM retém o botão Salvar inicial.
Excluir dados do Firestore
Você pode excluir dados existentes do Firestore usando o deleteDoc método. Como você fez para a ação Atualizar, recupere cada documento usando seu ID exclusivo, direcionando seu atributo DOM usando o caminho do nó:
const handle delete = assíncrono (e) => {
const docRef = doc (firestore, 'dados de teste', e.target.parentNode.children[0].getAttribute("id de dados"));
aguardam deleteDoc (docRef)
.então(() => {
console.registro(`${e.target.parentNode.children[0].textContent} foi excluído com sucesso.`)
})
.pegar(erro => {
console.log (erro);
})
}
Passe a função acima para o botão Excluir. Ele remove os dados do banco de dados e do DOM quando um usuário clica nele.
Combine o Firebase com seu melhor framework de front-end
O Firebase ajuda você a escrever menos código enquanto consulta dados diretamente do lado do cliente. Além do React, ele oferece suporte a outros frameworks JavaScript, incluindo Angular.js, Vue.js e muitos outros.
Agora que você viu como ele funciona com o React, talvez também queira aprender a emparelhá-lo com o Angular.js.
