Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat.
Folosind combinația dintre React și Firebase, puteți produce aplicații super receptive. Dacă sunteți deja familiarizat cu React, să învățați cum să integrați Firebase este un pas excelent următor.
Pentru a înțelege elementele de bază ale gestionării datelor de la Firebase, ar trebui să învățați cum să asociați baza de date Firestore cu React pentru a crea o aplicație CRUD. Folosind aceste cunoștințe, puteți începe să creați aplicații scalabile full-stack cu cod backend mic sau zero.
Conectați-vă aplicația React la Firebase Firestore
Dacă nu ați făcut deja acest lucru, accesați consola Firebase și conectați Firestore la proiectul dvs. React.
Procesul este ușor dacă ați făcut-o deja v-ați creat aplicația React.
Apoi, faceți unul nou firebase_setup directorul din interiorul proiectului dvs src pliant. Creeaza o firebase.js fișier din acest folder. Inserați codul de configurare pe care îl veți obține în timp ce creați un proiect Firebase în noul fișier:
import { initializeApp } din „firebase/aplicație”;
import {getFirestore} din „@firebase/firestore”const firebaseConfig = {
apiKey: proces.env.REACT_APP_apiKey,
authDomain: proces.env.REACT_APP_authDomain,
projectId: proces.env.REACT_APP_projectId,
găleată de depozitare: proces.env.REACT_APP_storageBucket,
mesajeSenderId: proces.env.REACT_APP_messagingSenderId,
appId: proces.env.REACT_APP_appId,
măsurareId: proces.env.REACT_APP_measurementId
};
const app = initializeApp (firebaseConfig);
exportconst firestore = getFirestore (aplicație)
The focar variabila deține mediul Firebase Firestore. Veți folosi acest lucru în aplicație în timp ce faceți solicitări API.
Deși acest cod folosește metoda .env pentru a masca informațiile de configurare, există mai bune modalități de a stoca secrete în React.
Acum, instalați baza de foc și uuid biblioteci din aplicația dvs. React. În timp ce uuid este opțional, îl puteți utiliza ca identificator unic pentru fiecare document postat în baza de date Firestore.
npm instalare baza de foc uuid
Iată o demonstrație a ceea ce urmează să construiți cu React și Firestore:
Scrieți date în baza de date Firestore
Puteți folosi setDoc sau addDoc metodă de a adăuga documente la Firebase. The addDoc metoda are avantajul că instruiește Firebase să genereze un ID unic pentru fiecare înregistrare.
Pentru a începe, importați următoarele dependențe în App.js:
import './App.css';
import { useEffect, useState } din 'reacţiona';
import { addDoc, collection, setDoc, deleteDoc, doc, query, onSnapshot } din „firebase/firestore”;
import { firestore } din './firebase_setup/firebase';
import { v4 la fel de uuidv4 } din 'uuid';
Înainte de a continua, priviți structura DOM și stările pe care le folosește acest tutorial:
funcţieApp() {
const [info, setInfo] = useState([])
const [isUpdate, setisUpdate] = useState(fals)
const [docId, setdocId] = useState("")
const [detaliu, setDetail] = useState("")
const [ids, setIds] = useState([])întoarcere (
<div className="App">
<formă>
<tip de intrare= "text" value={detail} onChange={handledatachange} />
{
isUpdate? (
<>
<butonul onClick={handlesubmitchange} tip = "Trimite">Actualizați</button>
<butonul onClick={() => { setisUpdate (fals); setDetail("")}}>
X
</button>
</>
): (<butonul onClick={submithandler} tip="Trimite">Salvați</button>)
}
</form>{info.map((date, index)=>
<div key={ids[index]} className='container de date' id='container de date'>
<p className='date' id='date' data-id ={ids[index]} cheie={ids[index]}>{date}</p>
<butonul className='detele-buton' id='butonul de ștergere' onClick={handledelete}>
Șterge
</button><butonul className='butonul de actualizare' id='butonul de actualizare' onClick={handleupdate}>
Editați | ×
</button>
</div>
)}
</div>
);
}
exportMod implicit Aplicație;
Apoi, creați un handler de trimitere pentru a scrie date în baza de date Firestore. Aceasta este o onSubmit eveniment. Deci îl vei folosi în butonul de trimitere.
În plus, creați un handler de modificări. Acest eveniment ascultă modificările din câmpul formularului și transmite intrarea într-o matrice (the detaliu matrice în acest caz). Aceasta intră în baza de date.
const handledatachange = (e) => {
setDetail(e.ţintă.valoare)
};const submithandler = (e) => {
e.preventDefault()
const ref = colecție (firestore, "date_test")lăsa date = {
uuid: uuidv4(),
testData: detaliu
}încerca {
addDoc (ref, date)
} captură(eroare) {
consolă.log (eroare)
}
setDetail("")
}
În timp ce Firebase generează automat ID-uri de document (cu excepția cazului în care îl împiedicați), câmpul UUID servește și ca un identificator unic pentru fiecare document.
Citiți datele din baza de date Firestore
Preluați date din baza de date Firestore din useEffect agățați folosind metoda de interogare Firestore:
useEffect(() => {
const getData = asincron () => {
const date = asteapta interogare (colectare (firestore, "test_data"));onSnapshot (date, (querySnapshot) => {
const databaseInfo = [];
const dataIds = []querySnapshot.pentru fiecare((doc) => {
Informații baze de date.Apăsaţi(doc.date().testData);
dataIds.Apăsaţi(doc.id)
});setIds (dataIds)
setInfo (databaseInfo)
});
}
Obțineți date()
}, [])
Codul de mai sus folosește interogarea Firebase pentru a obține un instantaneu al datelor trimise către Firestore folosind onSnapshot funcţie.
Un instantaneu permite aplicației dvs. să asculte modificările din backend. Actualizează automat clientul de fiecare dată când cineva scrie în baza de date.
The setInfo stat preia datele din fiecare document. Veți mapa prin aceasta (the info matrice) în timpul redării către DOM.
The setIds stat urmărește toate ID-urile documentelor (transmise ca Id-uri matrice). Puteți folosi fiecare ID pentru a rula interogările de ștergere și actualizare pe fiecare document. Apoi puteți trece fiecare ID de document ca atribut DOM în timp ce mapați prin intermediul info matrice.
Iată utilizarea stării în DOM (așa cum se arată în fragmentul de cod anterior):
Actualizați datele existente în Firestore
Folosește setDoc metodă de a actualiza un document sau un câmp dintr-un document.
Definiți doi handlere pentru acțiunea de actualizare. Unul se ocupă de butonul de trimitere pentru datele editate (handlesubmitchange), în timp ce celălalt este pentru butonul care rescrie datele în câmpul de intrare pentru editare (handleupdate):
const handleupdate = (e) => {
setisUpdate(Adevărat)
setDetail(e.ţintă.parentNode.copii[0].textContent)
setdocId(e.ţintă.parentNode.copii[0].getAttribute("data-id"))
};const handlesubmitchange = asincron (e) => {
e.preventDefault()
const docRef = doc (firestore, 'date_test', docId);const updatedata = asteapta {
testData: detaliu
};asteaptasetDoc(docRef, date de actualizare, { combina:Adevărat })
.apoi (console.log("Datele au fost modificate cu succes"))
setisUpdate(fals)
setDetail("")
}
După cum se arată în fragmentul de cod anterior, iată redarea DOM pentru acțiunile de creare și actualizare:
The handleupdate funcția vizează fiecare ID de document din DOM folosind calea nodului său. Folosește acest lucru pentru a interoga fiecare document din baza de date pentru ca acesta să facă modificări. Butonul Editare folosește această funcție.
Asa de isUpdate (urmărită de setisUpdate stat) revine Adevărat când un utilizator face clic pe butonul Editare. Această acțiune afișează butonul Actualizare, care trimite datele editate atunci când un utilizator dă clic pe el. Extraul X butonul închide acțiunea de editare când este făcută clic - prin setare isUpdate la fals.
Dacă isUpdate este fals, DOM-ul păstrează în schimb butonul inițial Salvare.
Ștergeți datele din Firestore
Puteți șterge datele existente din Firestore utilizând deleteDoc metodă. Așa cum ați făcut pentru acțiunea Actualizare, preluați fiecare document folosind ID-ul său unic, țintind atributul DOM folosind calea nodului:
const handledelete = asincron (e) => {
const docRef = doc (firestore, 'date_test', e.target.parentNode.children[0].getAttribute("data-id"));
asteapta deleteDoc (docRef)
.atunci(() => {
consolă.Buturuga(`${e.target.parentNode.children[0].textContent} a fost șters cu succes.`)
})
.captură(eroare => {
consolă.log (eroare);
})
}
Treceți funcția de mai sus în butonul Ștergere. Îndepărtează datele din baza de date și din DOM atunci când un utilizator face clic pe ele.
Asociați Firebase cu cel mai bun cadru Frontend al dvs
Firebase vă ajută să scrieți mai puțin cod în timp ce interogați datele direct din partea clientului. Pe lângă React, acceptă și alte cadre JavaScript, inclusiv Angular.js, Vue.js și multe altele.
Acum că ați văzut cum funcționează cu React, poate doriți să învățați să îl asociați cu Angular.js.