Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon.

Ved å bruke kombinasjonen av React og Firebase kan du produsere superresponsive applikasjoner. Hvis du allerede er kjent med React, er det et utmerket neste skritt å lære hvordan du integrerer Firebase.

For å forstå det grunnleggende om Firebases datahåndtering, bør du lære hvordan du parer Firestore-databasen med React for å bygge en CRUD-app. Ved å bruke den kunnskapen kan du begynne å lage skalerbare fullstack-applikasjoner med lite eller null backend-kode.

Koble React-appen din til Firebase Firestore

Hvis du ikke allerede har gjort det, gå til Firebase-konsollen og koble Firestore til ditt React-prosjekt.

Prosessen er enkel hvis du allerede har gjort det opprettet React-appen din.

Deretter lager du en ny firebase_setup katalog inne i prosjektet ditt src mappe. Lage en firebase.js filen inne i denne mappen. Lim inn konfigurasjonskoden du får når du oppretter et Firebase-prosjekt i den nye filen:

instagram viewer 
import { initializeApp } fra "firebase/app";
import {getFirestore} fra "@firebase/firestore"
konst firebaseConfig = {
apiKey: prosess.env.REACT_APP_apiKey,
authDomain: prosess.env.REACT_APP_authDomene,
prosjekt-ID: prosess.env.REACT_APP_projectId,
oppbevaringsbøtte: prosess.env.REACT_APP_storageBucket,
messagingSenderId: prosess.env.REACT_APP_messagingSenderId,
appId: prosess.env.REACT_APP_appId,
måle-ID: prosess.env.REACT_APP_measurementId
};
konst app = initializeApp (firebaseConfig);
eksportkonst firestore = getFirestore (app)

De brannlager variabelen inneholder Firebase Firestore-miljøet ditt. Du vil bruke dette på tvers av appen mens du sender API-forespørsler.

Selv om denne koden bruker .env-metoden for å maskere konfigurasjonsinformasjonen, finnes det bedre måter å lagre hemmeligheter i React.

Installer nå brannbase og uuid biblioteker i React-appen din. Selv om uuid er valgfritt, kan du bruke den som en unik identifikator for hvert dokument som legges inn i Firestore-databasen.

npm installere brannbase uuid

Her er en demonstrasjon av hva du skal bygge med React og Firestore:

Skriv data til Firestore-databasen

Du kan bruke setDoc eller addDoc metode for å legge til dokumenter i Firebase. De addDoc metoden har fordelen at den instruerer Firebase til å generere en unik ID for hver post.

For å starte, importer følgende avhengigheter til App.js:

import './App.css';
import { useEffect, useState } fra 'reagere';
import { addDoc, collection, setDoc, deleteDoc, doc, query, onSnapshot } fra "firebase/firestore";
import { firestore } fra './firebase_setup/firebase';
import { v4 som uuidv4 } fra 'uuid';

Før du fortsetter, se på DOM-strukturen og tilstandene som denne opplæringen bruker:

funksjonApp() {
konst [info, setInfo] = useState([])
konst [isUpdate, setisUpdate] = useState(falsk)
 const [docId, setdocId] = useState("")
 const [detail, setDetail] = brukState("")
konst [ids, setIds] = useState([])
komme tilbake (
<div klassenavn="App">
<form>
<input type= "tekst" value={detail} onChange={handledatachange} />
 {
 er oppdatering? (
<>
<button onClick={handlesubmitchange} type = "sende inn">Oppdater</button>
<knapp påKlikk={() => { setisUpdate (false); setDetail("")}}>
 X
</button>
</>
 ): (<button onClick={submithandler} type="sende inn">Lagre</button>)
 }
</form>


{info.map((data, indeks)=>
<div nøkkel={ids[indeks]} klassenavn='databeholder' id='databeholder'>
<p klassenavn='data' id='data' data-id ={ids[indeks]} nøkkel={ids[indeks]}>{data}</s>
<knappen klassenavn='slette-knapp' id='slette-knappen' onClick={handledelete}>
Slett
</button>


<knappen klassenavn='oppdatering-knappen' id='oppdatering-knappen' onClick={handleupdate}>
 Redigere
</button>
</div>
 )}
</div>
 );
}
eksportmisligholde App;

Deretter oppretter du en innsendingsbehandler for å skrive data inn i Firestore-databasen. Dette er en ved innsending begivenhet. Så du bruker den i send-knappen.

Opprett i tillegg en endringsbehandler. Denne hendelsen lytter til endringer i skjemafeltet og sender inndataene til en matrise (den detalj array i dette tilfellet). Dette går inn i databasen.

konst handledatachange = (e) => {
settDetaljer(e.mål.verdi)
 };
konst innsendingshandler = (e) => {
e.preventDefault()
 const ref = samling (firestore, "testdata")


la data = {
 uuid: uuidv4(),
 testData: detalj
 }


prøve {
 addDoc (ref, data)
 } å fange(feil) {
konsoll.log (feil)
 }
setDetail("")
 }

Mens Firebase automatisk genererer dokument-ID-er (med mindre du forhindrer det), fungerer UUID-feltet også som en unik identifikator for hvert dokument.

Les data fra Firestore-databasen

Hent data fra Firestore-databasen i useEffect hekte ved å bruke Firestore-spørringsmetoden:

 useEffect(() => {
konst getData = asynkron () => {
konst data = avvente spørring (samling (firestore, "test_data"));
onSnapshot (data, (querySnapshot) => {
konst databaseInfo = [];
konst dataIds = []


querySnapshot.for hver((dok) => {
databaseInfo.trykk(dok.data().testdata);
dataIds.trykk(dok.id)
 });


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

Koden ovenfor bruker Firebase-spørringen for å få et øyeblikksbilde av data sendt til Firestore ved hjelp av på Snapshot funksjon.

Et øyeblikksbilde lar appen din lytte til endringer i backend. Den oppdaterer klienten automatisk hver gang noen skriver til databasen.

De setInfo staten henter dataene i hvert dokument. Du vil kartlegge gjennom dette (den info array) mens du gjengir til DOM.

De setIds staten sporer alle dokument-ID-er (vedtatt som Ids array). Du kan bruke hver ID til å kjøre Slett- og Oppdater-spørringene på hvert dokument. Du kan deretter sende hver dokument-ID som et DOM-attributt mens du kartlegger gjennom info array.

Her er tilstandsbruken i DOM (som vist i forrige kodebit):

Oppdater eksisterende data i Firestore

Bruke setDoc metode for å oppdatere et dokument eller et felt i et dokument.

Definer to behandlere for oppdateringshandlingen. Man håndterer send-knappen for de redigerte dataene (handlesubmitchange), mens den andre er for knappen som skriver om dataene til inndatafeltet for redigering (håndtere oppdatering):

konst handleupdate = (e) => {
 setisUpdate(ekte)
settDetaljer(e.mål.parentNode.barn[0].textContent)
setdocId(e.mål.parentNode.barn[0].getAttribute(&quot;data-id&quot;))
};
konst handlesubmitchange = asynkron (e) => {
e.preventDefault()
 const docRef = doc (firestore, 'testdata', docId);


konst oppdater data = avvente {
 testData: detalj
 };


avventesetDoc(docRef, oppdatere data, { slå sammen:true })
 .then (console.log("Dataene ble endret"))
setisUpdate(falsk)
 setDetail("") 
}

Som vist i forrige kodebit, her er DOM-gjengivelsen for opprettelse og oppdatering:

De håndtere oppdatering funksjonen målretter mot hver dokument-ID i DOM ved hjelp av nodebanen. Den bruker dette til å spørre hvert dokument fra databasen for å gjøre endringer. Rediger-knappen bruker denne funksjonen.

Så isUpdate (spores av setisOppdatering stat) returnerer ekte når en bruker klikker på Rediger-knappen. Denne handlingen henter opp Oppdater-knappen, som sender de redigerte dataene når en bruker klikker på den. Det ekstra X -knappen lukker redigeringshandlingen når den klikkes - ved innstilling isUpdate til falsk.

Hvis isUpdate er falsk, beholder DOM den opprinnelige Lagre-knappen i stedet.

Slett data fra Firestore

Du kan slette eksisterende data fra Firestore ved å bruke slett dok metode. Som du gjorde for oppdateringshandlingen, hent hvert dokument ved å bruke sin unike ID ved å målrette DOM-attributtet ved å bruke nodebanen:

konst handledelete = asynkron (e) => {
 const docRef = doc (firestore, 'testdata', e.target.parentNode.children[0].getAttribute("data-id"));
avvente deleteDoc (docRef)
 .deretter(() => {
konsoll.Logg(`${e.target.parentNode.children[0].textContent} har blitt slettet.`)
 })
 .å fange(feil => {
konsoll.log (feil);
 })
}

Send funksjonen ovenfor til Slett-knappen. Den fjerner dataene fra databasen og DOM-en når en bruker klikker på den.

Par Firebase med ditt beste frontend-rammeverk

Firebase hjelper deg med å skrive mindre kode mens du spør etter data direkte fra klientsiden. I tillegg til React, støtter den andre JavaScript-rammeverk, inkludert Angular.js, Vue.js og mange andre.

Nå som du har sett hvordan det fungerer med React, vil du kanskje også lære å pare det med Angular.js.