Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission.

Ved at bruge kombinationen af ​​React og Firebase kan du producere super responsive applikationer. Hvis du allerede er bekendt med React, er det et glimrende næste skridt at lære at integrere Firebase.

For at forstå det grundlæggende i Firebases datahåndtering, bør du lære, hvordan du parrer dens Firestore-database med React for at bygge en CRUD-app. Ved at bruge den viden kan du begynde at skabe skalerbare full-stack-applikationer med lidt eller ingen backend-kode.

Forbind din React-app til Firebase Firestore

Hvis du ikke allerede har gjort det, skal du gå til Firebase-konsollen og tilslut Firestore til dit React-projekt.

Processen er nem, hvis du allerede har gjort det oprettet din React-app.

Lav derefter en ny firebase_setup mappe inde i dit projekt src folder. Lave en firebase.js fil i denne mappe. Indsæt den konfigurationskode, du får, mens du opretter et Firebase-projekt i den nye fil:

instagram viewer 
importere { initializeApp } fra "firebase/app";
importere {getFirestore} fra "@firebase/firestore"
konst firebaseConfig = {
apiKey: behandle.env.REACT_APP_apiKey,
authDomain: behandle.env.REACT_APP_authDomain,
projekt-id: behandle.env.REACT_APP_projectId,
opbevaring Bucket: behandle.env.REACT_APP_storageBucket,
messagingSenderId: behandle.env.REACT_APP_messagingSenderId,
appId: behandle.env.REACT_APP_appId,
måle-id: behandle.env.REACT_APP_measurementId
};
konst app = initializeApp (firebaseConfig);
eksportkonst firestore = getFirestore (app)

Det firestore variabel indeholder dit Firebase Firestore-miljø. Du vil bruge dette på tværs af appen, mens du laver API-anmodninger.

Selvom denne kode bruger .env-metoden til at maskere konfigurationsoplysningerne, er der bedre måder at gemme hemmeligheder i React.

Installer nu brandbase og uuid biblioteker i din React-app. Selvom uuid er valgfrit, kan du bruge det som en unik identifikator for hvert dokument, der sendes til Firestore-databasen.

npm installere brandbase uuid

Her er en demonstration af, hvad du er ved at bygge med React og Firestore:

Skriv data til Firestore-databasen

Du kan bruge sætDoc eller addDoc metode til at tilføje dokumenter til Firebase. Det addDoc metoden har den fordel, at den instruerer Firebase til at generere et unikt ID for hver post.

For at starte skal du importere følgende afhængigheder til App.js:

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

Inden du fortsætter, skal du se på DOM-strukturen og de stater, som denne tutorial bruger:

fungereApp() {
konst [info, setInfo] = useState([])
konst [isUpdate, setisUpdate] = useState(falsk)
 const [docId, setdocId] = useState("")
 const [detail, setDetail] = useState("")
konst [ids, setIds] = useState([])
Vend tilbage (
<div klassenavn="App">
<form>
<input type= "tekst" value={detail} onChange={handledatachange} />
 {
 er opdateret? (
<>
<button onClick={handlesubmitchange} type = "Indsend">Opdatering</button>
<knap påKlik={() => { setisUpdate (falsk); sætDetail("")}}>
 x
</button>
</>
 ): (<knap onClick={submithandler} type="Indsend">Gemme</button>)
 }
</form>


{info.map((data, indeks)=>
<div nøgle={ids[indeks]} klassenavn='data-beholder' id='data-beholder'>
<p klassenavn='data' id='data' data-id ={ids[indeks]} nøgle={ids[indeks]}>{data}</s>
<knap klassenavn='slette-knap' id='slet-knap' onClick={handledelete}>
Slet
</button>


<knap klassenavn='opdatering-knap' id='opdatering-knap' onClick={handleupdate}>
 Redigere
</button>
</div>
 )}
</div>
 );
}
eksportStandard App;

Derefter skal du oprette en indsendelsesbehandler for at skrive data ind i Firestore-databasen. Dette er en ved indsend begivenhed. Så du skal bruge det i indsend-knappen.

Derudover skal du oprette en ændringshandler. Denne hændelse lytter til ændringer i formularfeltet og sender inputtet til et array (den detalje array i dette tilfælde). Dette går ind i databasen.

konst handledatachange = (e) => {
sætDetail(e.mål.værdi)
 };
konst submithandler = (e) => {
e.preventDefault()
 const ref = samling (firestore, "test_data")


lade data = {
 uuid: uuidv4(),
 testData: detaljer
 }


prøve {
 addDoc (ref, data)
 } fangst(fejl) {
konsol.log (fejl)
 }
sætDetail("")
 }

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

Læs data fra Firestore-databasen

Hent data fra Firestore-databasen i useEffect hook ved hjælp af Firestore-forespørgselsmetoden:

 useEffect(() => {
konst getData = asynkron () => {
konst data = vente forespørgsel (indsamling (firestore, "test_data"));
onSnapshot (data, (querySnapshot) => {
konst databaseInfo = [];
konst dataIds = []


querySnapshot.for hver((doc) => {
databaseInfo.skubbe(dok.data().testData);
data-id'er.skubbe(dok.id)
 });


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

Ovenstående kode bruger Firebase-forespørgslen til at få et øjebliksbillede af data sendt til Firestore ved hjælp af på Snapshot fungere.

Et øjebliksbillede giver din app mulighed for at lytte til ændringer i backend. Det opdaterer klienten automatisk, hver gang nogen skriver til databasen.

Det sætInfo stat griber dataene i hvert dokument. Du vil kortlægge dette (den info array) under gengivelse til DOM.

Det sætIds tilstand sporer alle dokument-id'er (bestået som Ids array). Du kan bruge hvert id til at køre Slet- og Opdater-forespørgslerne på hvert dokument. Du kan derefter sende hvert dokument-id som en DOM-attribut, mens du kortlægger info array.

Her er tilstandsbrugen inden for DOM (som vist i det forrige kodestykke):

Opdater eksisterende data i Firestore

Brug sætDoc metode til at opdatere et dokument eller et felt i et dokument.

Definer to handlere for opdateringshandlingen. Man håndterer indsend-knappen for de redigerede data (håndtere submitchange), mens den anden er til knappen, der omskriver dataene til inputfeltet til redigering (håndtere opdatering):

konst handleupdate = (e) => {
 setisUpdate(rigtigt)
sætDetail(e.mål.parentNode.børn[0].textContent)
setdocId(e.mål.parentNode.børn[0].getAttribute(&quot;data-id&quot;))
};
konst handlesubmitchange = asynkron (e) => {
e.preventDefault()
 const docRef = doc (firestore, 'test_data', docId);


konst opdatere data = vente {
 testData: detaljer
 };


ventesætDoc(docRef, opdatere data, { fusionere:rigtigt })
 .then (console.log("Data blev ændret"))
setisUpdate(falsk)
 sætDetail("") 
}

Som vist i det forrige kodestykke er her DOM-gengivelsen for oprettelse og opdatering:

Det håndtere opdatering funktion målretter mod hvert dokument-id i DOM ved hjælp af dets nodesti. Den bruger dette til at forespørge hvert dokument fra databasen, så det kan foretage ændringer. Rediger-knappen bruger denne funktion.

Så isUpdate (spores af setisOpdatering stat) returnerer rigtigt når en bruger klikker på knappen Rediger. Denne handling henter knappen Opdater frem, som indsender de redigerede data, når en bruger klikker på den. Det ekstra x knappen lukker redigeringshandlingen, når der klikkes på - ved indstilling isUpdate til falsk.

Hvis isUpdate er falskDOM beholder i stedet den oprindelige Gem-knap.

Slet data fra Firestore

Du kan slette eksisterende data fra Firestore ved hjælp af slet dok metode. Som du gjorde for opdateringshandlingen, skal du hente hvert dokument ved hjælp af dets unikke ID ved at målrette dets DOM-attribut ved hjælp af nodestien:

konst handledelete = asynkron (e) => {
 const docRef = doc (firestore, 'test_data', e.target.parentNode.children[0].getAttribute("data-id"));
vente deleteDoc (docRef)
 .then(() => {
konsol.log(`${e.target.parentNode.children[0].textContent} er blevet slettet.`)
 })
 .fangst(fejl => {
konsol.log (fejl);
 })
}

Send ovenstående funktion ind i knappen Slet. Det fjerner data fra databasen og DOM, når en bruger klikker på det.

Par Firebase med dit bedste frontend-rammeværk

Firebase hjælper dig med at skrive mindre kode, mens du forespørger data direkte fra klientsiden. Udover React understøtter den andre JavaScript-frameworks, herunder Angular.js, Vue.js og mange andre.

Nu hvor du har set, hvordan det fungerer med React, vil du måske også lære at parre det med Angular.js.