Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu.

Pomocou kombinácie React a Firebase môžete vytvárať super responzívne aplikácie. Ak už poznáte React, skvelým ďalším krokom je naučiť sa integrovať Firebase.

Ak chcete porozumieť základom spracovania údajov Firebase, mali by ste sa naučiť, ako spárovať databázu Firestore s Reactom, aby ste vytvorili aplikáciu CRUD. Pomocou týchto znalostí môžete začať vytvárať škálovateľné aplikácie s úplným zásobníkom s malým alebo nulovým backendovým kódom.

Pripojte svoju aplikáciu React k Firebase Firestore

Ak ste tak ešte neurobili, prejdite do konzoly Firebase a pripojte Firestore k vášmu projektu React.

Tento proces je jednoduchý, ak ste to už urobili vytvoril vašu aplikáciu React.

Ďalej vytvorte nový firebase_setup adresár vo vašom projekte src priečinok. Vytvor firebase.js súbor v tomto priečinku. Do nového súboru prilepte konfiguračný kód, ktorý získate pri vytváraní projektu Firebase:

instagram viewer 
importovať { initializeApp } od "firebase/aplikácia";
importovať {getFirestore} od "@firebase/firestore"
konšt firebaseConfig = {
apiKey: proces.env.REACT_APP_apiKey,
authDomain: proces.env.REACT_APP_authDomain,
projectId: proces.env.REACT_APP_projectId,
skladovacie vedro: proces.env.REACT_APP_storageBucket,
messagingSenderId: proces.env.REACT_APP_messagingSenderId,
appId: proces.env.REACT_APP_appId,
meranieId: proces.env.REACT_APP_measurementId
};
konšt app = initializeApp (firebaseConfig);
exportkonšt firestore = getFirestore (aplikácia)

The ohnisko premenná obsahuje vaše prostredie Firebase Firestore. Toto použijete v celej aplikácii pri vytváraní požiadaviek API.

Hoci tento kód používa metódu .env na maskovanie informácií o konfigurácii, existujú aj lepšie spôsoby ukladania tajomstiev v Reacte.

Teraz nainštalujte firebase a uuid knižnice vo vašej aplikácii React. Aj keď je uuid voliteľné, môžete ho použiť ako jedinečný identifikátor pre každý dokument odoslaný do databázy Firestore.

npm Inštalácia firebase uuid

Tu je ukážka toho, čo sa chystáte postaviť pomocou React a Firestore:

Zapíšte údaje do databázy Firestore

Môžete použiť setDoc alebo addDoc spôsob pridávania dokumentov do Firebase. The addDoc Táto metóda má tú výhodu, že dáva pokyn Firebase, aby vygenerovala jedinečné ID pre každý záznam.

Ak chcete začať, importujte do App.js nasledujúce závislosti:

importovať './App.css';
importovať { useEffect, useState } od 'reagovať';
importovať { addDoc, collection, setDoc, deleteDoc, doc, query, onSnapshot } od "firebase/firestore";
importovať { ohnisko } od './firebase_setup/firebase';
importovať { v4 ako uuidv4} od 'uuid';

Skôr ako budete pokračovať, pozrite sa na štruktúru DOM a stavy, ktoré používa tento tutoriál:

funkciuApp() {
konšt [info, setInfo] = useState([])
konšt [isUpdate, setisUpdate] = useState(falošný)
 const [docId, setdocId] = useState("")
 const [detail, setDetail] = useState("")
konšt [ids, setIds] = useState([])
vrátiť (
<div názov triedy="App">
<formulár>
<typ vstupu = "text" value={detail} onChange={handledatachange} />
 {
 isUpdate? (
<>
<button onClick={handlesubmitchange} type = "Predložiť">Aktualizovať</button>
<button onClick={() => { setisUpdate (false); setDetail("")}}>
 X
</button>
</>
 ): (<button onClick={submithandler} type="Predložiť">Uložiť</button>)
 }
</form>


{info.map((údaje, index)=>
<div key={ids[index]} className='dátový kontajner' id='dátový kontajner'>
<p názov triedy='údajov' id='údajov' data-id ={ids[index]} key={ids[index]}>{údaje}</str>
<button className='tlačidlo detele' id='tlačidlo vymazať' onClick={handledelete}>
Odstrániť
</button>


<button className='tlačidlo aktualizácie' id='tlačidlo aktualizácie' onClick={handleupdate}>
 Upraviť
</button>
</div>
 )}
</div>
 );
}
exportpredvolená App;

Ďalej vytvorte obslužný program odosielania na zapisovanie údajov do databázy Firestore. Toto je onOdoslať udalosť. Takže ho použijete v tlačidle odoslať.

Okrem toho vytvorte obslužný program zmien. Táto udalosť počúva zmeny v poli formulára a odovzdá vstup do poľa ( detail pole v tomto prípade). Toto prejde do databázy.

konšt handledatachange = (e) => {
setDetail(e.cieľ.hodnota)
 };
konšt submithandler = (e) => {
e.preventPredvolené()
 const ref = zbierka (firestore, "test_data")


nech údaje = {
 uuid: uuidv4(),
 testData: detail
 }


skúste {
 addDoc (odkaz, údaje)
 } chytiť(chyba) {
konzoly.log (chyba)
 }
setDetail("")
 }

Zatiaľ čo Firebase automaticky generuje ID dokumentov (pokiaľ tomu nezabránite), pole UUID slúži aj ako jedinečný identifikátor pre každý dokument.

Čítanie údajov z databázy Firestore

Načítajte údaje z databázy Firestore v rámci useEffect háčik pomocou metódy dotazu Firestore:

 useEffect(() => {
konšt getData = async () => {
konšt údaje = čakať dotaz (kolekcia (firestore, "test_data"));
onSnapshot (údaje, (querySnapshot) => {
konšt databaseInfo = [];
konšt dataIds = []


querySnapshot.pre každý((doc) => {
DatabaseInfo.TAM(doc.údaje().testData);
dataIds.TAM(doc.id)
 });


setIds (dataIds)
 setInfo (databaseInfo)
 });
 }
getData()
 }, [])

Vyššie uvedený kód používa dotaz Firebase na získanie snímky údajov odoslaných do Firestore pomocou onSnapshot funkciu.

Snímka umožňuje vašej aplikácii počúvať zmeny v backende. Aktualizuje klienta automaticky vždy, keď niekto zapíše do databázy.

The setInfo stav zachytáva údaje v každom dokumente. Budete mapovať cez toto ( Info pole) pri vykresľovaní do DOM.

The setIds štát sleduje všetky ID dokumentov (predávané ako ID pole). Každé ID môžete použiť na spustenie dotazov na odstránenie a aktualizáciu v každom dokumente. Potom môžete odovzdať každé ID dokumentu ako atribút DOM pri mapovaní cez Info pole.

Tu je použitie stavu v rámci modelu DOM (ako je znázornené v predchádzajúcom útržku kódu):

Aktualizujte existujúce údaje vo Firestore

Použi setDoc metóda na aktualizáciu dokumentu alebo poľa v dokumente.

Definujte dva obslužné programy pre akciu aktualizácie. Jeden spracuje tlačidlo odoslať pre upravené údaje (handlesubmitchange), zatiaľ čo druhé je pre tlačidlo, ktoré prepisuje údaje do vstupného poľa na úpravu (aktualizácia rukoväte):

konšt handleupdate = (e) => {
 setisUpdate(pravda)
setDetail(e.cieľ.parentNode.deti[0].textObsah)
setdocId(e.cieľ.parentNode.deti[0].getAttribute(&quot;data-id&quot;))
};
konšt handlesubmitchange = async (e) => {
e.preventPredvolené()
 const docRef = doc (firestore, 'test_data', docId);


konšt aktualizované = čakať {
 testData: detail
 };


čakaťsetDoc(docRef, aktualizované, { zlúčiť:pravda })
 .then (console.log("Údaje sa úspešne zmenili"))
setisUpdate(falošný)
 setDetail("") 
}

Ako je znázornené v predchádzajúcom útržku kódu, tu je vykreslenie modelu DOM pre akcie vytvorenia a aktualizácie:

The aktualizácia rukoväte funkcia sa zameriava na každý ID dokumentu v DOM pomocou jeho cesty uzla. Používa to na vyžiadanie každého dokumentu z databázy na vykonanie zmien. Túto funkciu používa tlačidlo Upraviť.

Takže isUpdate (sledované setisUpdate štát) vracia pravda keď používateľ klikne na tlačidlo Upraviť. Táto akcia vyvolá tlačidlo Aktualizovať, ktoré odošle upravené údaje, keď naň používateľ klikne. Extra X tlačidlo zatvorí akciu úprav po kliknutí – nastavením isUpdate do falošný.

Ak isUpdate je falošný, DOM si namiesto toho zachová počiatočné tlačidlo Uložiť.

Odstrániť údaje z Firestore

Existujúce údaje z Firestore môžete odstrániť pomocou deleteDoc metóda. Rovnako ako v prípade akcie Aktualizovať získajte každý dokument pomocou jeho jedinečného ID zacielením na jeho atribút DOM pomocou cesty uzla:

konšt handledelete = async (e) => {
 const docRef = doc (firestore, 'test_data', e.target.parentNode.children[0].getAttribute("data-id"));
čakať deleteDoc (docRef)
 .potom(() => {
konzoly.log(`${e.target.parentNode.children[0].textContent} bol úspešne odstránený.`)
 })
 .chytiť(chyba => {
konzoly.log (chyba);
 })
}

Vyššie uvedenú funkciu zadajte do tlačidla Odstrániť. Keď naň používateľ klikne, odstráni údaje z databázy a DOM.

Spárujte Firebase s najlepším rámcom frontendu

Firebase vám pomáha písať menej kódu, zatiaľ čo dopytujete údaje priamo zo strany klienta. Okrem React podporuje aj ďalšie frameworky JavaScript, vrátane Angular.js, Vue.js a mnohých ďalších.

Teraz, keď ste videli, ako to funguje s Reactom, možno by ste sa tiež chceli naučiť spárovať ho s Angular.js.