Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu.

Reacti ja Firebase'i kombinatsiooni kasutades saate luua ülitundlikke rakendusi. Kui olete Reactiga juba tuttav, on Firebase'i integreerimise õppimine suurepärane järgmine samm.

Firebase'i andmetöötluse põhitõdede mõistmiseks peaksite õppima, kuidas siduda selle Firestore'i andmebaas Reactiga, et luua CRUD-rakendus. Neid teadmisi kasutades saate alustada skaleeritavate täispinu rakenduste loomist vähese või nulli taustakoodiga.

Ühendage oma Reacti rakendus Firebase Firestore'iga

Kui te pole seda veel teinud, minge Firebase'i konsooli ja ühendage Firestore oma Reacti projektiga.

Protsess on lihtne, kui olete seda juba teinud lõi oma Reacti rakenduse.

Järgmiseks tehke uus firebase_setup kataloogi oma projekti sees src kausta. Loo firebase.js faili selles kaustas. Kleepige Firebase'i projekti loomisel saadud konfiguratsioonikood uude faili.

importida { InitsialiseeriApp } 





instagram viewer


alates "firebase/app";
importida {getFirestore} alates "@firebase/firestore"
konst firebaseConfig = {
apiKey: protsessi.env.REACT_APP_apiKey,
authDomain: protsessi.env.REACT_APP_authDomain,
projekti ID: protsessi.env.REACT_APP_projectId,
ladustamisämber: protsessi.env.REACT_APP_storageBucket,
messaging SenderId: protsessi.env.REACT_APP_messagingSenderId,
appId: protsessi.env.REACT_APP_appId,
mõõtmiseId: protsessi.env.REACT_APP_measurementId
};
konst rakendus = InitsialiseeriApp (firebaseConfig);
eksportidakonst firestore = getFirestore (rakendus)

The tulehoidla muutuja sisaldab teie Firebase Firestore'i keskkonda. Kasutate seda API taotluste tegemisel kogu rakenduses.

Kuigi see kood kasutab konfiguratsiooniteabe maskeerimiseks .env-meetodit, on paremaid viise saladuste salvestamiseks Reactis.

Nüüd installige Firebase ja uuid teegid oma Reacti rakenduses. Kuigi uuid on valikuline, võite seda kasutada iga Firestore'i andmebaasi postitatud dokumendi kordumatu identifikaatorina.

npm installida Firebase uuid

Siin on demonstratsioon selle kohta, mida kavatsete Reacti ja Firestore'iga luua:

Kirjutage andmed Firestore'i andmebaasi

Võite kasutada setDoc või addDoc meetod dokumentide lisamiseks Firebase'i. The addDoc meetodi eeliseks on see, et see annab Firebase'ile korralduse luua iga kirje jaoks kordumatu ID.

Alustuseks importige rakendusse App.js järgmised sõltuvused.

importida './App.css';
importida { useEffect, useState } alates 'reageerida';
importida { addDoc, collection, setDoc, deleteDoc, doc, query, onSnapshot } alates "firebase/firestore";
importida { tulepood } alates './firebase_setup/firebase';
importida { v4 nagu uuidv4 } alates 'uuid';

Enne jätkamist vaadake DOM-i struktuuri ja olekuid, mida see õpetus kasutab:

funktsiooniRakendus() {
konst [info, setInfo] = useState([])
konst [isUpdate, setisUpdate] = useState(vale)
 const [docId, setdocId] = useState("")
 const [detail, setDetail] = useState("")
konst [ids, setIds] = useState([])
tagasi (
<div klassiNimi="Rakendus">
<vormi>
<sisendi tüüp= "tekst" value={detail} onChange={handledatachange} />
 {
 isUpdate? (
<>
<nupp onClick={handlesubmitchange} type = "Esita">Värskenda</button>
<nupp onClick={() => { setisUpdate (false); setDetail("")}}>
 X
</button>
</>
 ): (<nupp onClick={submithandler} type="Esita">Salvesta</button>)
 }
</form>


{info.map((andmed, register)=>
<div key={ids[index]} className='andmemahuti' id='andmemahuti'>
<p klassiNimi='andmeid' id='andmeid' data-id ={ids[indeks]} key={ids[indeks]}>{data}</lk>
<nupu klassinimi='kustutamise nupp' id='kustutamisnupp' onClick={handledelete}>
Kustuta
</button>


<nupu klassinimi='värskendamise nupp' id='värskendamise nupp' onClick={handleupdate}>
 Muuda
</button>
</div>
 )}
</div>
 );
}
eksportidavaikimisi Rakendus;

Järgmisena looge esitamise töötleja andmete Firestore'i andmebaasi kirjutamiseks. See on on Submit sündmus. Nii et kasutate seda saatmisnupul.

Lisaks looge muudatuste töötleja. See sündmus kuulab vormivälja muudatusi ja edastab sisendi massiivi ( detail massiiv sel juhul). See läheb andmebaasi.

konst handdatachange = (e) => {
setDetail(e.sihtmärk.väärtus)
 };
konst submithandler = (e) => {
e.preventDefault()
 const ref = kogumine (tuletaaste, "test_andmed")


lase andmed = {
 uuid: uuidv4(),
 testData: detail
 }


proovi {
 addDoc (viide, andmed)
 } püüda(err) {
konsool.log (viga)
 }
setDetail("")
 }

Kuigi Firebase genereerib automaatselt dokumendi ID-d (kui te seda ei takista), toimib UUID väli ka iga dokumendi kordumatu identifikaatorina.

Andmete lugemine Firestore'i andmebaasist

Andmete toomine Firestore'i andmebaasist useEffect konks Firestore'i päringumeetodi abil:

 useEffect(() => {
konst getData = asünkr () => {
konst andmed = ootama päring (kogu (tuletaaste, "test_andmed"));
onSnapshot (andmed, (querySnapshot) => {
konst databaseInfo = [];
konst dataIds = []


querySnapshot.igaühele((doc) => {
andmebaasInfo.push(dok.andmed().testData);
dataIds.push(dok.id)
 });


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

Ülaltoodud kood kasutab Firebase'i päringut, et saada ülevaade Firestore'i, kasutades on Snapshot funktsiooni.

Hetktõmmis võimaldab teie rakendusel kuulata taustaprogrammi muudatusi. See värskendab klienti automaatselt iga kord, kui keegi andmebaasi kirjutab.

The setInfo olek haarab igas dokumendis olevad andmed. Kaardistate selle kaudu ( info massiiv) DOM-i renderdamise ajal.

The setIds olek jälgib kõiki dokumendi ID-sid (edasi kui Ids massiiv). Iga ID-d saate kasutada iga dokumendi kustutamis- ja värskendamispäringute käitamiseks. Seejärel saate iga dokumendi ID-d edastada DOM-i atribuudina, kaardistades faili info massiivi.

Siin on DOM-i olekukasutus (nagu on näidatud eelmises koodilõigul):

Värskendage Firestore'is olemasolevaid andmeid

Kasuta setDoc meetod dokumendi või dokumendi välja värskendamiseks.

Määrake värskendustoimingu jaoks kaks töötlejat. Üks käsitleb redigeeritud andmete esitamise nuppu (käsitle muudatuse esitamist), teine ​​aga nupu jaoks, mis kirjutab andmed ümber redigeerimiseks sisestusväljale (käsitseda uuendust):

konst handupdate = (e) => {
 setisUpdate(tõsi)
setDetail(e.sihtmärk.parentNode.lapsed[0].textContent)
setdocId(e.sihtmärk.parentNode.lapsed[0].getAttribute(&tsitaat;andme-id&tsitaat;))
};
konst käepidesubmitchange = asünkr (e) => {
e.preventDefault()
 const docRef = doc (tuletaaste, 'test_andmed', docId);


konst updatedata = ootama {
 testData: detail
 };


ootamasetDoc(docRef, värskendatud andmed, { liita:tõsi })
 .then (console.log("Andmete muutmine õnnestus"))
setisUpdate(vale)
 setDetail("") 
}

Nagu on näidatud eelmises koodilõigul, on loomis- ja värskendamistoimingute jaoks DOM-i renderdus:

The käsitseda uuendust funktsioon sihib iga dokumendi ID-d DOM-is, kasutades selle sõlme teed. Ta kasutab seda iga dokumendi päringu tegemiseks andmebaasist, et teha muudatusi. Redigeeri nupp kasutab seda funktsiooni.

Niisiis isUpdate (jälgib setisUpdate osariik) tagastab tõsi kui kasutaja klõpsab nuppu Redigeeri. See toiming avab nupu Värskenda, mis edastab muudetud andmed, kui kasutaja sellel klõpsab. Lisa X nupp sulgeb klõpsamisel redigeerimistoimingu – seadistustega isUpdate juurde vale.

Kui isUpdate on vale, säilitab DOM selle asemel esialgse nupu Salvesta.

Kustutage andmed Firestore'ist

Saate Firestore'ist olemasolevaid andmeid kustutada, kasutades KustutaDoc meetod. Nagu värskendamise toimingu puhul, hankige iga dokument selle kordumatu ID-ga, sihtides selle DOM-i atribuuti, kasutades sõlme teed:

konst handdelete = asünkr (e) => {
 const docRef = doc (tuletaaste, 'test_andmed', e.target.parentNode.children[0].getAttribute("andme-id"));
ootama KustutaDoc (docRef)
 .then(() => {
konsool.log(`${e.target.parentNode.children[0].textContent} on edukalt kustutatud.")
 })
 .püüda(viga => {
konsool.log (viga);
 })
}

Edastage ülaltoodud funktsioon nupule Kustuta. See eemaldab andmed andmebaasist ja DOM-ist, kui kasutaja sellel klõpsab.

Siduge Firebase oma parima kasutajaliidese raamistikuga

Firebase aitab teil otse kliendi poolelt andmete päringute tegemise ajal vähem koodi kirjutada. Lisaks Reactile toetab see ka teisi JavaScripti raamistikke, sealhulgas Angular.js, Vue.js ja paljud teised.

Nüüd, kui olete näinud, kuidas see Reactiga töötab, võiksite ka õppida seda Angular.js-iga siduma.