Kako povezati svoju React aplikaciju s Firebaseom

Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju.

Prema istraživanju Stack Overflowa iz 2022., 21,14 posto programera koristi Firebase, što ga čini četvrtom najpopularnijom platformom u oblaku. To je tehnologija koja se razvija za besprijekornu integraciju pozadine.

S Firebaseom možete razviti aplikaciju s punim nizom bez pisanja ijednog retka pozadinskog koda. Naučite kako danas povezati svoju React.js aplikaciju s Firebaseom i graditi u pokretu.

Instalirajte Firebase paket

Nakon stvaranje vaše aplikacije React, promijenite direktorij u korijensku mapu vašeg projekta i instalirajte Firebase paket pokretanjem:

npm instalirati vatrena baza

Dodajte svoju React aplikaciju Firebase projektu

Sljedeći korak je izraditi Firebase projekt i povezati ga sa svojom React aplikacijom. Idi na Firebase konzola:

1. Klik Dodaj projekt za pokretanje novog Firebase projekta.
2. Unesite naziv projekta, a zatim kliknite Nastaviti.
3. Klik Nastaviti na sljedećoj stranici.
4. Odaberite svoj Firebase račun s padajućeg izbornika ili kliknite Izraditi novi račun ako ga već nemate.
5. Na kraju kliknite Izradi projekt.
6. Klik Nastaviti nakon što proces završi.
7. Zatim kliknite ikonu Web () prema gornjem lijevom kutu sljedeće stranice kako biste postavili Firebase za web.
8. Unesite nadimak za svoju aplikaciju u predviđeno polje. Zatim kliknite Registrirajte aplikaciju.
9. Kopirajte generirani kod i zadržite ga za sljedeći korak (o kojem se govori u sljedećem odjeljku).
10. Klik Nastavite do konzole.
11. Na sljedećoj stranici postoji mnogo opcija. Pomaknite se prema dolje i odaberite Cloud Firestore budući da u ovom slučaju trebate samo postaviti bazu podataka.
12. Zatim kliknite Stvorite bazu podataka.
13. Klik Sljedeći. S padajućeg izbornika odaberite željenu lokaciju Firestorea.
14. Zatim kliknite Omogućiti za izradu Firestore baze podataka.

Inicijalizirajte Firebase u svojoj aplikaciji React

Stvorite novu mapu unutar svog projekta src imenik. Ovo možete nazvati firebase_setup. Zatim stvorite a firebase.js datoteku unutar te mape. Zatim zalijepite ranije generirani kod u ovu datoteku.

Za sada možete pohraniti konfiguracijski objekt (firebaseConfig) unutar a .env datoteka. Ali razmislite o upotrebi sigurnijeg način maskiranja tajni Reacta u proizvodnji. Podaci koje pohranjujete u a .env datoteka može lako procuriti u vašu verziju aplikacije.

Na primjer, da biste unijeli Firebase tajni ključ vaše aplikacije u .env datoteka:

REACT_APP_apiKey = vašFirebaseAccessKey

Dakle, možete fino podesiti generirani kod na sljedeći način:

uvoz {inicijalizirajApp} iz "firebase/aplikacija";
uvoz {getFirestore} iz "@firebase/firestore"
konst firebaseConfig = {
apiKey: postupak.env.REACT_APP_apiKey,
authDomain: postupak.env.REACT_APP_authDomain,
projektId: postupak.env.REACT_APP_projectId,
spremnik za pohranu: postupak.env.REACT_APP_storageBucket,
messagingSenderId: postupak.env.REACT_APP_messagingSenderId,
appId: postupak.env.REACT_APP_appId,
ID mjerenja: postupak.env.REACT_APP_measurementId
};
konst app = initializeApp (firebaseConfig);
izvozkonst firestore = getFirestore (aplikacija)

Testirajte svoju Firebase vezu

Možete testirati vezu podnošenjem lažnih podataka Firestoreu. Započnite stvaranjem a ručke mapu unutar vašeg projekta src imenik. Stvorite rukovatelja slanjem unutar ove datoteke. Možete nazvati ovo handlesubmit.js, na primjer:

uvoz { addDoc, zbirka } iz "@firebase/firestore"
uvoz { vatrogasna } iz "../firebase_setup/firebase"
konst handleSubmit = (testni podaci) => {
konst ref = zbirka (firestore, "test_data") // Firebase ovo stvara automatski
neka podaci = {
 testData: testni podaci
 }
probati {
 addDoc (ref, podaci)
 } ulov(pogreška) {
konzola.log (pogreška)
 }
}
izvozzadano rukovanjePošalji

Zatim unutra App.js:

uvoz './App.css';
uvoz rukovanjePošalji iz './handles/handlesubmit';
uvoz {useRef} iz 'reagirati';
funkcijaaplikacija() {
konst dataRef = useRef()
konst submithandler = (e) => {
e.preventDefault()
rukovanjePošalji(dataRef.Trenutno.vrijednost)
 dataRef.current.value = ""
 }
povratak (
<div className="aplikacija">
<obrazac onSubmit={submithandler}>
<vrsta unosa= "tekst" ref={dataRef} />
<tip gumba = "podnijeti">Uštedjeti</button>
</form>
</div>
 );
}
izvozzadano aplikacija;

Pokrenite svoju React aplikaciju i pokušajte poslati podatke putem obrasca. Osvježite konzolu baze podataka Firebase da biste vidjeli poslane informacije u svojoj zbirci. S osnovama na mjestu, možete istražiti mnoge druge stvari koje Firebase može učiniti da vidimo kako ga najbolje iskoristiti.

Gradite u pokretu uz Firebase i React

Firebase je svestrano rješenje backend-as-a-service koje vam omogućuje učinkovito skaliranje vaše aplikacije. Nakon što povežete svoju aplikaciju React, možete iskoristiti njezine brojne značajke za izradu svoje web stranice prema vašim željama.

Na primjer, Firebase set alata za provjeru autentičnosti jedna je od značajki koje biste mogli istražiti.