Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju.

Koristeći kombinaciju Reacta i Firebasea, možete proizvesti super responzivne aplikacije. Ako ste već upoznati s Reactom, učenje kako integrirati Firebase odličan je sljedeći korak.

Da biste razumjeli osnove Firebaseovog rukovanja podacima, trebali biste naučiti kako upariti njegovu Firestore bazu podataka s Reactom za izradu CRUD aplikacije. Koristeći to znanje možete početi stvarati skalabilne full-stack aplikacije s malo ili bez pozadinskog koda.

Povežite svoju aplikaciju React s Firebase Firestoreom

Ako to već niste učinili, idite na Firebase konzolu i povežite Firestore sa svojim React projektom.

Postupak je jednostavan ako već jeste stvorio svoju aplikaciju React.

Zatim napravite novi firebase_setup imenik unutar vašeg projekta src mapa. Stvoriti firebase.js datoteku unutar ove mape. Zalijepite konfiguracijski kod koji ćete dobiti tijekom izrade Firebase projekta unutar nove datoteke:

instagram viewer 
uvoz {inicijalizirajApp} iz "firebase/aplikacija";
uvoz {getFirestore} iz "@firebase/firestore"
konst firebaseConfig = {
apiKey: postupak.env.REACT_APP_apiKey,
authDomain: postupak.env.REACT_APP_authDomain,
projektId: postupak.env.REACT_APP_projectId,
spremnik za pohranu: postupak.env.REACT_APP_storageBucket,
messagingSenderId: postupak.env.REACT_APP_messagingSenderId,
appId: postupak.env.REACT_APP_appId,
ID mjerenja: postupak.env.REACT_APP_measurementId
};
konst app = initializeApp (firebaseConfig);
izvozkonst firestore = getFirestore (aplikacija)

The vatrogasno spremište varijabla sadrži vaše Firebase Firestore okruženje. To ćete koristiti u cijeloj aplikaciji dok postavljate API zahtjeve.

Iako ovaj kôd koristi metodu .env za maskiranje informacija o konfiguraciji, postoje i bolje načine pohranjivanja tajni u React.

Sada instalirajte vatrena baza i uuid biblioteke u vašoj aplikaciji React. Dok uuid nije obavezan, možete ga koristiti kao jedinstveni identifikator za svaki dokument objavljen u Firestore bazi podataka.

npm instalirati vatrena baza uuid

Evo demonstracije onoga što ćete izgraditi s Reactom i Firestoreom:

Zapišite podatke u Firestore bazu podataka

Možete koristiti postaviDoc ili addDoc metoda za dodavanje dokumenata u Firebase. The addDoc Metoda ima prednost jer upućuje Firebase da generira jedinstveni ID za svaki zapis.

Za početak uvezite sljedeće ovisnosti u App.js:

uvoz './App.css';
uvoz {useEffect, useState} iz 'reagirati';
uvoz { addDoc, zbirka, setDoc, deleteDoc, doc, upit, onSnapshot } iz "firebase/firestore";
uvoz { vatrogasna } iz './firebase_setup/firebase';
uvoz {v4 kao uuidv4 } iz 'uuid';

Prije nego nastavite, pogledajte DOM strukturu i stanja koja koristi ovaj vodič:

funkcijaaplikacija() {
konst [info, setInfo] = useState([])
konst [isUpdate, setisUpdate] = useState(lažno)
 const [docId, setdocId] = useState("")
 const [detalj, setDetail] = useState("")
konst [ids, setIds] = useState([])
povratak (
<div className="aplikacija">
<oblik>
<vrsta unosa= "tekst" vrijednost={detalj} onChange={handledatachange} />
 {
 isUpdate? (
<>
<gumb onClick={handlesubmitchange} tip = "podnijeti">Ažuriraj</button>
<gumb onClick={() => { setisUpdate (false); setDetail("")}}>
 x
</button>
</>
 ): (<gumb onClick={submithandler} type="podnijeti">Uštedjeti</button>)
 }
</form>


{info.map((podaci, indeks)=>
<div ključ={ids[index]} className='spremnik podataka' id='spremnik podataka'>
<p naziv klase='podaci' id='podaci' data-id ={ids[index]} key={ids[index]}>{podaci}</str>
<gumb className='gumb za uklanjanje' id='gumb za brisanje' onClick={handledelete}>
Izbrisati
</button>


<gumb className='gumb za ažuriranje' id='gumb za ažuriranje' onClick={handleupdate}>
 Uredi
</button>
</div>
 )}
</div>
 );
}
izvozzadano aplikacija;

Zatim stvorite rukovatelja podnošenjem za upisivanje podataka u Firestore bazu podataka. Ovo je onSubmit događaj. Stoga ćete ga koristiti u gumbu za slanje.

Osim toga, stvorite rukovatelja promjenama. Ovaj događaj osluškuje promjene u polju obrasca i prosljeđuje unos u polje (the detalj niz u ovom slučaju). Ovo ide u bazu podataka.

konst handledatachange = (e) => {
setDetail(e.cilj.vrijednost)
 };
konst submithandler = (e) => {
e.preventDefault()
 const ref = kolekcija (firestore, "test_podaci")


neka podaci = {
 uuid: uuidv4(),
 testData: detalj
 }


probati {
 addDoc (ref, podaci)
 } ulov(pogreška) {
konzola.log (pogreška)
 }
setDetail("")
 }

Iako Firebase automatski generira ID-ove dokumenata (osim ako to ne spriječite), polje UUID također služi kao jedinstveni identifikator za svaki dokument.

Pročitajte podatke iz Firestore baze podataka

Dohvaćanje podataka iz Firestore baze podataka unutar useEffect hook pomoću Firestore metode upita:

 useEffect(() => {
konst getData = asinkroni () => {
konst podaci = čekati upit (kolekcija (firestore, "test_data"));
onSnapshot (podaci, (querySnapshot) => {
konst baza podatakaInfo = [];
konst dataIds = []


upit Snimka.za svakoga((doc) => {
baza podatakaInfo.gurnuti(doc.podaci().testData);
dataIds.gurnuti(doc.iskaznica)
 });


setIds (dataIds)
 setInfo (informacije baze podataka)
 });
 }
getData()
 }, [])

Gornji kod koristi Firebase upit za dobivanje snimke podataka dostavljenih Firestoreu pomoću onSnapshot funkcija.

Snimka omogućuje vašoj aplikaciji da sluša promjene u pozadini. Ažurira klijenta automatski svaki put kada netko piše u bazu podataka.

The setInfo država grabi podatke u svakom dokumentu. Mapirati ćete kroz ovo ( info niz) tijekom renderiranja u DOM.

The setIds stanje prati sve ID-ove dokumenata (prošle kao ID-ovi niz). Svaki ID možete koristiti za pokretanje upita za brisanje i ažuriranje na svakom dokumentu. Zatim možete proslijediti svaki ID dokumenta kao DOM atribut tijekom mapiranja kroz info niz.

Evo korištenja stanja unutar DOM-a (kao što je prikazano u prethodnom isječku koda):

Ažurirajte postojeće podatke u Firestoreu

Koristiti postaviDoc metoda ažuriranja dokumenta ili polja u dokumentu.

Definirajte dva rukovatelja za radnju ažuriranja. Jedan rukuje gumbom za slanje za uređene podatke (rukovanje podnošenjem promjene), dok je drugi za gumb koji prepisuje podatke u polje za unos za uređivanje (rukovati ažuriranjem):

konst handleupdate = (e) => {
 setisUpdate(pravi)
setDetail(e.cilj.parentNode.djeca[0].textContent)
setdocId(e.cilj.parentNode.djeca[0].getAttribute(&quot;podaci-id&quot;))
};
konst handlesubmitchange = asinkroni (e) => {
e.preventDefault()
 const docRef = doc (firestore, 'test_podaci', docId);


konst ažurirani podaci = čekati {
 testData: detalj
 };


čekatipostaviDoc(docRef, ažurirani podaci, { sjediniti:istina })
 .zatim (console.log("Podaci su uspješno promijenjeni"))
setisUpdate(lažno)
 setDetail("") 
}

Kao što je prikazano u prethodnom isječku koda, ovo je DOM renderiranje za radnje stvaranja i ažuriranja:

The rukovati ažuriranjem funkcija cilja svaki ID dokumenta u DOM-u koristeći njegovu stazu čvora. To koristi za postavljanje upita svakom dokumentu iz baze podataka kako bi izvršio izmjene. Gumb Uredi koristi ovu funkciju.

Tako isUpdate (praćeno od strane setisUpdate država) vraća pravi kada korisnik klikne gumb Uredi. Ova radnja otvara gumb Ažuriraj, koji šalje uređene podatke kada korisnik klikne na njega. Dodatak x gumb zatvara radnju uređivanja kada se klikne—postavljanjem isUpdate do lažno.

Ako isUpdate je lažno, DOM umjesto toga zadržava početni gumb Spremi.

Brisanje podataka iz Firestorea

Možete izbrisati postojeće podatke iz Firestorea pomoću izbrisatiDoc metoda. Kao što ste učinili za radnju ažuriranja, dohvatite svaki dokument pomoću njegovog jedinstvenog ID-a ciljanjem njegovog DOM atributa pomoću staze čvora:

konst rukovanje brisanjem = asinkroni (e) => {
 const docRef = doc (firestore, 'test_podaci', e.target.parentNode.children[0].getAttribute("podaci-id"));
čekati izbrisatiDoc (docRef)
 .onda(() => {
konzola.log(`${e.target.parentNode.children[0].textContent} je uspješno izbrisan.`)
 })
 .ulov(greška => {
konzola.log (greška);
 })
}

Proslijedite gornju funkciju u gumb Izbriši. Uklanja podatke iz baze podataka i DOM-a kada korisnik klikne na njega.

Uparite Firebase sa svojim najboljim Frontend okvirom

Firebase vam pomaže da pišete manje koda dok podatke postavljate izravno s klijentske strane. Osim Reacta, podržava i druge JavaScript okvire, uključujući Angular.js, Vue.js i mnoge druge.

Sad kad ste vidjeli kako radi s Reactom, možda biste također željeli naučiti upariti ga s Angular.js.