Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo.

S kombinacijo React in Firebase lahko ustvarite super odzivne aplikacije. Če ste že seznanjeni z Reactom, je učenje o integraciji Firebase odličen naslednji korak.

Če želite razumeti osnove ravnanja s podatki Firebase, se morate naučiti združiti njegovo zbirko podatkov Firestore z Reactom, da ustvarite aplikacijo CRUD. Z uporabo tega znanja lahko začnete ustvarjati razširljive aplikacije s polnim skladom z malo ali nič zaledne kode.

Povežite svojo aplikacijo React s Firebase Firestore

Če tega še niste storili, pojdite na konzolo Firebase in povežite Firestore s svojim projektom React.

Postopek je enostaven, če ste ga že ustvarili vašo aplikacijo React.

Nato naredite novo firebase_setup imenik znotraj vašega projekta src mapo. Ustvariti firebase.js datoteko v tej mapi. Konfiguracijsko kodo, ki jo boste dobili med ustvarjanjem projekta Firebase, prilepite v novo datoteko:

instagram viewer 
uvoz {initializeApp} od "firebase/aplikacija";
uvoz {getFirestore} od "@firebase/firestore"
konst firebaseConfig = {
apiKey: postopek.env.REACT_APP_apiKey,
authDomain: postopek.env.REACT_APP_authDomain,
projectId: postopek.env.REACT_APP_projectId,
StorageBucket: postopek.env.REACT_APP_storageBucket,
messagingSenderId: postopek.env.REACT_APP_messagingSenderId,
appId: postopek.env.REACT_APP_appId,
izmerjeniId: postopek.env.REACT_APP_measurementId
};
konst app = initializeApp (firebaseConfig);
izvozkonst firestore = getFirestore (aplikacija)

The firestore spremenljivka vsebuje vaše okolje Firebase Firestore. To boste uporabljali v celotni aplikaciji, medtem ko postavljate zahteve za API.

Čeprav ta koda uporablja metodo .env za maskiranje informacij o konfiguraciji, obstajajo boljše načine za shranjevanje skrivnosti v React.

Zdaj pa namestite požarna baza in uuid knjižnice v vaši aplikaciji React. Čeprav uuid ni obvezen, ga lahko uporabite kot enolični identifikator za vsak dokument, objavljen v bazi podatkov Firestore.

npm namestite požarna baza uuid

Tukaj je predstavitev tega, kar nameravate zgraditi z React in Firestore:

Zapišite podatke v zbirko podatkov Firestore

Lahko uporabite setDoc oz addDoc način dodajanja dokumentov v Firebase. The addDoc Prednost metode je, da Firebase-u naroči, naj ustvari edinstven ID za vsak zapis.

Za začetek uvozite naslednje odvisnosti v App.js:

uvoz './App.css';
uvoz {useEffect, useState} od 'reagirati';
uvoz { addDoc, zbirka, setDoc, deleteDoc, doc, poizvedba, onSnapshot } od "firebase/firestore";
uvoz { gasilska } od './firebase_setup/firebase';
uvoz { v4 kot uuidv4} od 'uuid';

Preden nadaljujete, si oglejte strukturo DOM in stanja, ki jih uporablja ta vadnica:

funkcijoaplikacija() {
konst [info, setInfo] = useState([])
konst [isUpdate, setisUpdate] = useState(lažno)
 const [docId, setdocId] = useState("")
 const [podrobnosti, setDetail] = useState("")
konst [ids, setIds] = useState([])
vrnitev (
<div className="aplikacija">
<oblika>
<vrsta vnosa= "besedilo" vrednost={podrobnosti} onChange={handledatachange} />
 {
 isUpdate? (
<>
<gumb onClick={handlesubmitchange} tip = "predložiti">Nadgradnja</button>
<gumb onClick={() => { setisUpdate (false); setDetail("")}}>
 X
</button>
</>
 ): (<gumb onClick={submithandler} type="predložiti">Shrani</button>)
 }
</form>


{info.map((podatki, indeks)=>
<div key={ids[index]} className='podatkovni vsebnik' id='podatkovni vsebnik'>
<p ime razreda='podatke' id='podatke' data-id ={ids[index]} key={ids[index]}>{podatki}</str>
<gumb className='gumb za delete' id='gumb za brisanje' onClick={handledelete}>
Izbriši
</button>


<gumb className='gumb za posodobitev' id='gumb za posodobitev' onClick={handleupdate}>
 Uredi
</button>
</div>
 )}
</div>
 );
}
izvozprivzeto aplikacija;

Nato ustvarite upravljalnik oddaje za pisanje podatkov v bazo podatkov Firestore. To je onSubmit dogodek. Torej ga boste uporabili v gumbu za pošiljanje.

Poleg tega ustvarite obravnavo sprememb. Ta dogodek posluša spremembe v polju obrazca in posreduje vnos v matriko (the detajl polje v tem primeru). To gre v bazo podatkov.

konst handledatachange = (e) => {
setDetail(e.tarča.vrednost)
 };
konst submithandler = (e) => {
e.preventDefault()
 const ref = zbirka (firestore, "testni_podatki")


pustiti podatki = {
 uuid: uuidv4(),
 testData: podrobnosti
 }


poskusi {
 addDoc (ref, podatki)
 } ulov(napaka) {
konzola.log (napaka)
 }
setDetail("")
 }

Medtem ko Firebase samodejno ustvari ID-je dokumentov (razen če tega preprečite), polje UUID služi tudi kot enolični identifikator za vsak dokument.

Preberite podatke iz zbirke podatkov Firestore

Pridobite podatke iz baze podatkov Firestore znotraj useEffect hook z metodo poizvedbe Firestore:

 useEffect(() => {
konst getData = asinh () => {
konst podatki = čakati poizvedba (zbirka (firestore, "test_data"));
onSnapshot (podatki, (querySnapshot) => {
konst baza podatkovInfo = [];
konst dataIds = []


poizvedbaSnapshot.za vsakogar((doc) => {
baza podatkovInfo.potisni(doc.podatki().testData);
dataIds.potisni(doc.id)
 });


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

Zgornja koda uporablja poizvedbo Firebase za pridobitev posnetka podatkov, poslanih v Firestore z uporabo onSnapshot funkcijo.

Posnetek omogoča vaši aplikaciji, da posluša spremembe v ozadju. Odjemalca samodejno posodobi vsakič, ko nekdo piše v bazo podatkov.

The setInfo država zgrabi podatke v vsakem dokumentu. Preslikali boste to ( info array) med upodabljanjem v DOM.

The setIds država sledi vsem ID-jem dokumentov (predanim kot Ids niz). Vsak ID lahko uporabite za zagon poizvedb za brisanje in posodobitev za vsak dokument. Nato lahko posredujete vsak ID dokumenta kot atribut DOM med preslikavo skozi info niz.

Tukaj je uporaba stanja znotraj DOM (kot je prikazano v prejšnjem delčku kode):

Posodobite obstoječe podatke v Firestore

Uporabi setDoc način za posodobitev dokumenta ali polja v dokumentu.

Definirajte dva upravljalnika za dejanje posodobitve. Eden upravlja gumb za pošiljanje urejenih podatkov (handlesubmitchange), druga pa za gumb, ki podatke prepiše v vnosno polje za urejanje (handleupdate):

konst handleupdate = (e) => {
 setisUpdate(prav)
setDetail(e.tarča.parentNode.otroci[0].textContent)
setdocId(e.tarča.parentNode.otroci[0].getAttribute(&quot;podatkovni-id&quot;))
};
konst handlesubmitchange = asinh (e) => {
e.preventDefault()
 const docRef = doc (firestore, 'testni_podatki', docId);


konst posodobljeni podatki = čakati {
 testData: podrobnosti
 };


čakatisetDoc(docRef, posodobljeni podatki, { združiti:prav })
 .potem (console.log("Podatki so bili uspešno spremenjeni"))
setisUpdate(lažno)
 setDetail("") 
}

Kot je prikazano v prejšnjem delčku kode, je tukaj upodabljanje DOM za dejanja ustvarjanja in posodabljanja:

The handleupdate funkcija cilja vsak ID dokumenta v DOM z uporabo njegove poti vozlišča. To uporablja za poizvedovanje po vsakem dokumentu iz zbirke podatkov, da lahko izvede spremembe. Gumb Uredi uporablja to funkcijo.

torej isUpdate (sledi z setisUpdate stanje) vrača prav ko uporabnik klikne gumb Uredi. To dejanje prikaže gumb Posodobi, ki pošlje urejene podatke, ko jih uporabnik klikne. Dodatek X gumb zapre dejanje urejanja, ko ga kliknete—z nastavitvijo isUpdate do lažno.

če isUpdate je lažno, namesto tega DOM obdrži začetni gumb Shrani.

Izbrišite podatke iz Firestore

Obstoječe podatke iz Firestore lahko izbrišete z izbrišiDoc metoda. Kot ste storili za dejanje Posodobi, pridobite vsak dokument z uporabo njegovega enoličnega ID-ja tako, da ciljate na njegov atribut DOM z uporabo poti vozlišča:

konst handledelete = asinh (e) => {
 const docRef = doc (firestore, 'testni_podatki', e.target.parentNode.children[0].getAttribute("podatkovni-id"));
čakati deleteDoc (docRef)
 .potem(() => {
konzola.log(`${e.target.parentNode.children[0].textContent} je bil uspešno izbrisan.`)
 })
 .ulov(napaka => {
konzola.log (napaka);
 })
}

Prenesite zgornjo funkcijo v gumb Izbriši. Odstrani podatke iz baze podatkov in DOM, ko jih uporabnik klikne.

Združite Firebase s svojim najboljšim čelnim ogrodjem

Firebase vam pomaga napisati manj kode, medtem ko poizvedujete po podatkih neposredno s strani odjemalca. Poleg Reacta podpira tudi druga ogrodja JavaScript, vključno z Angular.js, Vue.js in mnogimi drugimi.

Zdaj, ko ste videli, kako deluje z Reactom, se boste morda želeli naučiti tudi združiti z Angular.js.