Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti.
Pomocí kombinace React a Firebase můžete vytvářet super responzivní aplikace. Pokud jste již obeznámeni s Reactem, naučit se integrovat Firebase je skvělým dalším krokem.
Abyste porozuměli základům zpracování dat Firebase, měli byste se naučit, jak spárovat její databázi Firestore s Reactem, abyste vytvořili aplikaci CRUD. S využitím těchto znalostí můžete začít vytvářet škálovatelné full-stack aplikace s malým nebo nulovým backendovým kódem.
Připojte svou aplikaci React k Firebase Firestore
Pokud jste tak ještě neučinili, přejděte do konzole Firebase a připojte Firestore k vašemu projektu React.
Proces je snadný, pokud jste to již udělali vytvořili vaši aplikaci React.
Dále vytvořte nový firebase_setup adresář uvnitř vašeho projektu src složku. Vytvořit firebase.js soubor v této složce. Do nového souboru vložte konfigurační kód, který získáte při vytváření projektu Firebase:
import { initializeApp } z "firebase/app";
import {getFirestore} z "@firebase/firestore"konst firebaseConfig = {
apiKey: proces.env.REACT_APP_apiKey,
authDomain: proces.env.REACT_APP_authDomain,
projectId: proces.env.REACT_APP_projectId,
úložný kbelík: proces.env.REACT_APP_storageBucket,
messagingSenderId: proces.env.REACT_APP_messagingSenderId,
appId: proces.env.REACT_APP_appId,
ID měření: proces.env.REACT_APP_measurementId
};
konst app = initializeApp (firebaseConfig);
vývozníkonst firestore = getFirestore (aplikace)
The ohniště proměnná obsahuje vaše prostředí Firebase Firestore. Toto použijete v celé aplikaci při vytváření požadavků API.
Ačkoli tento kód používá k maskování informací o konfiguraci metodu .env, existují lepší způsoby, jak ukládat tajemství v Reactu.
Nyní nainstalujte firebase a uuid knihovny ve vaší aplikaci React. I když je uuid volitelné, můžete jej použít jako jedinečný identifikátor pro každý dokument odeslaný do databáze Firestore.
npm Nainstalujte firebase uuid
Zde je ukázka toho, co se chystáte postavit pomocí React a Firestore:
Zapište data do databáze Firestore
Můžete použít setDoc nebo přidatDoc způsob přidávání dokumentů do Firebase. The přidatDoc Tato metoda má tu výhodu, že dává Firebase pokyn ke generování jedinečného ID pro každý záznam.
Chcete-li začít, importujte do App.js následující závislosti:
import './App.css';
import { useEffect, useState } z 'reagovat';
import { addDoc, collection, setDoc, deleteDoc, doc, query, onSnapshot } z "firebase/firestore";
import { ohniště } z './firebase_setup/firebase';
import { v4 tak jako uuidv4} z 'uuid';
Než budete pokračovat, podívejte se na strukturu DOM a stavy, které tento tutoriál používá:
funkceAplikace() {
konst [info, setInfo] = useState([])
konst [isUpdate, setisUpdate] = useState(Nepravdivé)
const [docId, setdocId] = useState("")
const [detail, setDetail] = useState("")
konst [ids, setIds] = useState([])vrátit se (
<div název_třídy="Aplikace">
<formulář>
<typ vstupu= "text" value={detail} onChange={handledatachange} />
{
isUpdate? (
<>
<button onClick={handlesubmitchange} type = "Předložit">Aktualizace</button>
<button onClick={() => { setisUpdate (false); setDetail("")}}>
X
</button>
</>
): (<button onClick={submithandler} type="Předložit">Uložit</button>)
}
</form>{info.map((data, index)=>
<div key={ids[index]} className='datový kontejner' id='datový kontejner'>
<p název_třídy='data' id='data' data-id ={ids[index]} key={ids[index]}>{data}</str>
<tlačítko className='tlačítko detele' id='tlačítko smazat' onClick={handledelete}>
Vymazat
</button><tlačítko className='tlačítko aktualizace' id='tlačítko aktualizace' onClick={handleupdate}>
Upravit
</button>
</div>
)}
</div>
);
}
vývoznívýchozí Aplikace;
Dále vytvořte obslužnou rutinu odeslání pro zápis dat do databáze Firestore. Tohle je na Odeslat událost. Takže jej použijete v tlačítku Odeslat.
Navíc vytvořte obslužnou rutinu změn. Tato událost naslouchá změnám v poli formuláře a předává vstup do pole ( detail pole v tomto případě). Toto jde do databáze.
konst handledatachange = (e) => {
setDetail(E.cílová.hodnota)
};konst Sendhandler = (e) => {
E.preventDefault()
const ref = kolekce (firestore, "testovací data")nechat data = {
uuid: uuidv4(),
testData: detail
}Snaž se {
addDoc (ref, data)
} chytit(chyba) {
řídicí panel.log (chyba)
}
setDetail("")
}
Zatímco Firebase automaticky generuje ID dokumentů (pokud tomu nezabráníte), pole UUID slouží také jako jedinečný identifikátor pro každý dokument.
Čtení dat z databáze Firestore
Načtěte data z databáze Firestore v rámci useEffect háček pomocí metody dotazu Firestore:
useEffect(() => {
konst getData = asynchronní () => {
konst údaje = čekat dotaz (kolekce (firestore, "test_data"));onSnapshot (data, (querySnapshot) => {
konst databaseInfo = [];
konst dataIds = []dotaz Snapshot.pro každého((doc) => {
databázové informace.TAM(doc.data().testovací data);
dataIds.TAM(doc.id)
});setIds (dataIds)
setInfo (databaseInfo)
});
}
getData()
}, [])
Výše uvedený kód používá dotaz Firebase k získání snímku dat odeslaných do Firestore pomocí onSnapshot funkce.
Snímek umožňuje vaší aplikaci naslouchat změnám v backendu. Aktualizuje klienta automaticky pokaždé, když někdo zapíše do databáze.
The setInfo stav zachytí data v každém dokumentu. Budete mapovat přes toto ( info pole) při vykreslování do DOM.
The setIds stát sleduje všechna ID dokumentů (předávaná jako ID pole). Každé ID můžete použít ke spuštění dotazů Odstranit a Aktualizovat u každého dokumentu. Každé ID dokumentu pak můžete předat jako atribut DOM při mapování přes info pole.
Zde je použití stavu v rámci DOM (jak je znázorněno v předchozím fragmentu kódu):
Aktualizujte existující data ve Firestore
Použijte setDoc metoda pro aktualizaci dokumentu nebo pole v dokumentu.
Definujte dva obslužné rutiny pro akci aktualizace. Jeden ovládá tlačítko Odeslat pro upravená data (handlesubmitchange), zatímco druhý je pro tlačítko, které přepisuje data do vstupního pole pro úpravy (aktualizace rukojeti):
konst handleupdate = (e) => {
setisUpdate(skutečný)
setDetail(E.cílová.parentNode.děti[0].textObsah)
setdocId(E.cílová.parentNode.děti[0].getAttribute("data-id"))
};konst handlesubmitchange = asynchronní (e) => {
E.preventDefault()
const docRef = doc (firestore, 'testovací data', docId);konst aktualizováno = čekat {
testData: detail
};čekatsetDoc(docRef, aktualizováno, { spojit:skutečný })
.then (console.log("Data byla úspěšně změněna"))
setisUpdate(Nepravdivé)
setDetail("")
}
Jak je znázorněno v předchozím úryvku kódu, zde je vykreslení modelu DOM pro akce vytvoření a aktualizace:
The aktualizace rukojeti funkce cílí na každé ID dokumentu v DOM pomocí jeho cesty uzlu. Používá to k dotazování každého dokumentu z databáze, aby provedl změny. Tuto funkci využívá tlačítko Upravit.
Tak isUpdate (sledováno setisUpdate stát) vrací skutečný když uživatel klikne na tlačítko Upravit. Tato akce vyvolá tlačítko Aktualizovat, které odešle upravená data, když na ně uživatel klikne. Extra X tlačítko zavře akci úprav po kliknutí – nastavením isUpdate na Nepravdivé.
Li isUpdate je Nepravdivé, DOM místo toho zachová počáteční tlačítko Uložit.
Smazat data z Firestore
Existující data z Firestore můžete odstranit pomocí deleteDoc metoda. Stejně jako u akce Aktualizace načtěte každý dokument pomocí jeho jedinečného ID zacílením na jeho atribut DOM pomocí cesty k uzlu:
konst handledelete = asynchronní (e) => {
const docRef = doc (firestore, 'testovací data', e.target.parentNode.children[0].getAttribute("data-id"));
čekat deleteDoc (docRef)
.pak(() => {
řídicí panel.log(`${e.target.parentNode.children[0].textContent} byl úspěšně smazán.`)
})
.chytit(chyba => {
řídicí panel.log (chyba);
})
}
Předejte výše uvedenou funkci do tlačítka Smazat. Odebere data z databáze a DOM, když na ně uživatel klikne.
Spárujte Firebase se svým nejlepším rozhraním frontend
Firebase vám pomáhá psát méně kódu, zatímco dotazujete data přímo na straně klienta. Kromě React podporuje další frameworky JavaScript, včetně Angular.js, Vue.js a mnoha dalších.
Nyní, když jste viděli, jak to funguje s Reactem, možná byste se také chtěli naučit spárovat jej s Angular.js.
