Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius.

Naudodami „React“ ir „Firebase“ derinį galite sukurti itin reaguojančias programas. Jei jau esate susipažinę su React, išmokti integruoti Firebase yra puikus kitas žingsnis.

Norėdami suprasti „Firebase“ duomenų tvarkymo pagrindus, turėtumėte sužinoti, kaip susieti jos „Firestore“ duomenų bazę su „React“, kad sukurtumėte CRUD programą. Naudodamiesi šiomis žiniomis, galite pradėti kurti keičiamo dydžio programas su nedideliu arba nuliniu foniniu kodu.

Prijunkite „React“ programą prie „Firebase Firestore“.

Jei to dar nepadarėte, eikite į „Firebase“ pultą ir prijunkite Firestore prie savo React projekto.

Procesas yra lengvas, jei jau tai padarėte sukūrė savo React programėlę.

Tada sukurkite naują firebase_setup katalogą savo projekte src aplanką. Sukurti firebase.js failą šiame aplanke. Įklijuokite konfigūracijos kodą, kurį gausite kurdami Firebase projektą naujame faile:

instagram viewer 
importuoti { inicializuoti programą } iš „firebase/app“;
importuoti {getFirestore} iš „@firebase/firestore“
konst firebaseConfig = {
apiKey: procesas.env.REACT_APP_apiKey,
authDomain: procesas.env.REACT_APP_authDomain,
projekto ID: procesas.env.REACT_APP_projectId,
saugojimo kibiras: procesas.env.REACT_APP_storageBucket,
pranešimų siuntėjo ID: procesas.env.REACT_APP_messagingSenderId,
appId: procesas.env.REACT_APP_appId,
matavimo ID: procesas.env.REACT_APP_measurementId
};
konst app = inicializuotiApp (firebaseConfig);
eksportuotikonst firestore = getFirestore (programa)

The gaisrinė kintamajame yra jūsų „Firebase Firestore“ aplinka. Tai naudosite visoje programoje teikdami API užklausas.

Nors šiame kode konfigūracijos informacijai maskuoti naudojamas .env metodas, yra ir geresnių būdai, kaip saugoti paslaptis „React“..

Dabar įdiekite ugnies bazė ir uuid bibliotekas savo React programoje. Nors uuid yra neprivalomas, galite naudoti jį kaip unikalų kiekvieno dokumento, paskelbto Firestore duomenų bazėje, identifikatorių.

npm diegti ugnies bazė uuid

Štai demonstracija, ką ketinate sukurti naudodami „React“ ir „Firestore“.

Įrašykite duomenis į „Firestore“ duomenų bazę

Galite naudoti setDoc arba addDoc būdas pridėti dokumentus prie „Firebase“. The addDoc Metodas turi pranašumą, nes jis nurodo „Firebase“ sugeneruoti unikalų kiekvieno įrašo ID.

Norėdami pradėti, importuokite toliau nurodytas priklausomybes į App.js:

importuoti './App.css';
importuoti { useEffect, useState } iš „reaguoti“;
importuoti { addDoc, collection, setDoc, deleteDoc, doc, query, onSnapshot } iš „firebase/firestore“;
importuoti { ugnies parduotuvė } iš './firebase_setup/firebase';
importuoti { v4 kaip uuidv4 } iš 'uuid';

Prieš tęsdami peržiūrėkite DOM struktūrą ir būsenas, kurios naudojamos šioje mokymo programoje:

funkcijaProgramėlė() {
konst [info, setInfo] = useState([])
konst [isUpdate, setisUpdate] = useState(klaidinga)
 const [docId, setdocId] = useState("")
 const [detail, setDetail] = useState("")
konst [ids, setIds] = useState([])
grąžinti (
<div className="Programėlė">
<forma>
<įvesties tipas = "tekstą" value={detail} onChange={handledatachange} />
 {
 yra atnaujinimas? (
<>
<mygtukas onClick={handlesubmitchange} type = "Pateikti">Atnaujinti</button>
<mygtukas onClick={() => { setisUpdate (false); setDetail("")}}>
 X
</button>
</>
 ): (<mygtukas onClick={submithandler} type="Pateikti">Sutaupyti</button>)
 }
</form>


{info.map((duomenys, indeksas)=>
<div raktas={ids[index]} className='duomenų talpykla' id='duomenų talpykla'>
<p klasėsPavadinimas='duomenis' id='duomenis' data-id ={ids[indeksas]} raktas={ids[indeksas]}>{duomenys}</p>
<mygtukas className='ištrynimo mygtukas' id='trynimo mygtukas' onClick={handledelete}>
Ištrinti
</button>


<mygtukas className='atnaujinimo mygtukas' id='atnaujinimo mygtukas' onClick={handleupdate}>
 Redaguoti
</button>
</div>
 )}
</div>
 );
}
eksportuotinumatytas Programėlė;

Tada sukurkite pateikimo tvarkyklę, kad įrašytumėte duomenis į „Firestore“ duomenų bazę. Tai yra onSubmit įvykis. Taigi naudosite jį mygtuku pateikti.

Be to, sukurkite pakeitimų tvarkyklę. Šis įvykis išklauso formos lauko pakeitimus ir perduoda įvestį į masyvą ( detalė masyvas šiuo atveju). Tai patenka į duomenų bazę.

konst handdatachange = (e) => {
setDetail(e.taikinys.vertė)
 };
konst submithandler = (e) => {
e.preventDefault()
 const ref = surinkimas (firestore, "testo_duomenys")


leisti duomenys = {
 uuid: uuidv4(),
 testData: detalė
 }


bandyti {
 addDoc (nuoroda, duomenys)
 } sugauti(err) {
konsolė.log (klaida)
 }
setDetail("")
 }

Nors „Firebase“ automatiškai generuoja dokumentų ID (nebent to užkertate), UUID laukas taip pat naudojamas kaip unikalus kiekvieno dokumento identifikatorius.

Skaitykite duomenis iš „Firestore“ duomenų bazės

Gaukite duomenis iš Firestore duomenų bazės naudojimoEfektas kabliukas naudojant Firestore užklausos metodą:

 useEffect(() => {
konst getData = async () => {
konst duomenys = laukti užklausa (rinkimas (firestore, "test_data"));
onSnapshot (duomenys, (querySnapshot) => {
konst DatabaseInfo = [];
konst dataIds = []


querySnapshot.kiekvienam((doc) => {
duomenų bazės informacija.stumti(doc.duomenys().testData);
dataIds.stumti(doc.id)
 });


setIds (dataIds)
 setInfo (duomenų bazės informacija)
 });
 }
getData ()
 }, [])

Aukščiau pateiktas kodas naudoja „Firebase“ užklausą, kad gautų momentinę duomenų, pateiktų „Firestore“, naudojant onSnapshot funkcija.

Momentinė nuotrauka leidžia programai klausytis foninės programos pakeitimų. Jis automatiškai atnaujina klientą kiekvieną kartą, kai kas nors rašo į duomenų bazę.

The setInfo būsena paima kiekvieno dokumento duomenis. Žemėlapį sudarysite per tai ( informacija masyvas) pateikiant DOM.

The setIds būsena seka visus dokumentų ID (perduota kaip ID masyvas). Galite naudoti kiekvieną ID, kad paleistumėte kiekvieno dokumento ištrynimo ir atnaujinimo užklausas. Tada galite perduoti kiekvieną dokumento ID kaip DOM atributą susiedami per informacija masyvas.

Štai būsenos naudojimas DOM (kaip parodyta ankstesniame kodo fragmente):

Atnaujinkite esamus duomenis „Firestore“.

Naudoti setDoc būdas atnaujinti dokumentą arba dokumento lauką.

Apibrėžkite du atnaujinimo veiksmo tvarkykles. Vienas tvarko redaguotų duomenų pateikimo mygtuką (tvarkyti pateikimo pakeitimą), o kitas skirtas mygtukui, kuris perrašo duomenis į įvesties lauką redaguoti (tvarkyti atnaujinimą):

konst handupdate = (e) => {
 setisUpdate(tiesa)
setDetail(e.taikinys.parentNode.vaikai[0].textContent)
setdocId(e.taikinys.parentNode.vaikai[0].getAttribute(&citata;duomenų ID&citata;))
};
konst tvarkyti pateikimo pakeitimą = async (e) => {
e.preventDefault()
 const docRef = doc (firestore, 'testo_duomenys', docId);


konst atnaujinti duomenys = laukti {
 testData: detalė
 };


lauktisetDoc(docRef, atnaujinti duomenis, { sujungti:tiesa })
 .ten (console.log("Duomenys sėkmingai pakeisti"))
setisUpdate(klaidinga)
 setDetail("") 
}

Kaip parodyta ankstesniame kodo fragmente, kūrimo ir atnaujinimo veiksmų DOM atvaizdavimas:

The tvarkyti atnaujinimą funkcija nukreipia kiekvieną dokumento ID DOM, naudodama jo mazgo kelią. Jis naudoja tai, kad užklaustų kiekvieną dokumentą iš duomenų bazės, kad galėtų atlikti pakeitimus. Mygtukas Redaguoti naudoja šią funkciją.

Taigi isAtnaujinti (sekama setisUpdate valstybės) grąžina tiesa kai vartotojas spusteli mygtuką Redaguoti. Šis veiksmas rodo mygtuką Atnaujinti, kuris pateikia redaguotus duomenis, kai vartotojas jį spusteli. Papildomas X mygtukas uždaro redagavimo veiksmą spustelėjus – nustatant isAtnaujinti į klaidinga.

Jeigu isAtnaujinti yra klaidinga, DOM vietoj to išsaugo pradinį mygtuką Įrašyti.

Ištrinkite duomenis iš „Firestore“.

Galite ištrinti esamus duomenis iš „Firestore“ naudodami ištrintiDoc metodas. Kaip ir atlikdami atnaujinimo veiksmą, gaukite kiekvieną dokumentą naudodami unikalų ID, taikydami jo DOM atributą naudodami mazgo kelią:

konst handdelete = async (e) => {
 const docRef = doc (firestore, 'testo_duomenys', e.target.parentNode.children[0].getAttribute("duomenų ID"));
laukti deleteDoc (docRef)
 .tada (() => {
konsolė.log(`${e.target.parentNode.children[0].textContent} buvo sėkmingai ištrinta.“.)
 })
 .sugauti(klaida => {
konsolė.log (klaida);
 })
}

Perduokite aukščiau nurodytą funkciją į mygtuką Ištrinti. Jis pašalina duomenis iš duomenų bazės ir DOM, kai vartotojas juos spusteli.

Sujunkite „Firebase“ su geriausiu „Frond Framework“.

„Firebase“ padeda rašyti mažiau kodo, kai pateikiate duomenų užklausą tiesiai iš kliento pusės. Be React, ji palaiko ir kitas JavaScript sistemas, įskaitant Angular.js, Vue.js ir daugelį kitų.

Dabar, kai pamatėte, kaip tai veikia su React, galbūt norėsite išmokti susieti jį su Angular.js.