Hoe u uw React-app kunt verbinden met Firebase

Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen.

Volgens de Stack Overflow-enquête uit 2022 gebruikt 21,14 procent van de ontwikkelaars Firebase, waarmee het het op drie na populairste cloudplatform is. Het is een evoluerende technologie om de backend naadloos te integreren.

Met Firebase kunt u een full-stack-applicatie ontwikkelen zonder een enkele regel backend-code te schrijven. Leer hoe u uw React.js-applicatie vandaag nog kunt verbinden met Firebase en onderweg kunt bouwen.

Installeer het Firebase-pakket

Na het maken van uw React-app, verander de map naar de hoofdmap van uw project en installeer het Firebase-pakket door het volgende uit te voeren:

npm installeren vuurbasis

Voeg uw React-app toe aan een Firebase-project

De volgende stap is het maken van een Firebase-project en dit koppelen aan uw React-app. Ga naar de Firebase-console:

1. Klik Project toevoegen om een ​​nieuw Firebase-project te starten.
2. Voer een projectnaam in en klik vervolgens op Doorgaan.
3. Klik Doorgaan op de volgende pagina.
4. Selecteer uw Firebase-account in de vervolgkeuzelijst of klik Maak een nieuw account aan als je er nog geen hebt.
5. Klik ten slotte Project aanmaken.
6. Klik Doorgaan zodra het proces is voltooid.
7. Klik vervolgens op het webpictogram () naar de linkerbovenhoek van de volgende pagina om Firebase voor het web in te stellen.
8. Voer een bijnaam voor uw app in het daarvoor bestemde veld in. Dan klikken App registreren.
9. Kopieer de gegenereerde code en bewaar deze voor de volgende stap (besproken in de volgende sectie).
10. Klik Ga door naar de console.
11. Er zijn veel opties op de volgende pagina. Scroll naar beneden en selecteer Cloud Firestore omdat u in dit geval alleen een database hoeft op te zetten.
12. Klik vervolgens Maak een databank aan.
13. Klik Volgende. Selecteer uw gewenste Firestore-locatie in de vervolgkeuzelijst.
14. Dan klikken Inschakelen om een ​​Firestore-database te maken.

Initialiseer Firebase in uw React-app

Maak een nieuwe map binnen uw project src map. U kunt dit firebase_setup. Maak vervolgens een firebase.js bestand in die map. Plak vervolgens de eerder gegenereerde code in dit bestand.

Voorlopig kunt u het configuratieobject (firebaseConfig) opslaan in een .env bestand. Maar overweeg een veiliger te gebruiken manier om React-geheimen te maskeren in de maak. Gegevens die u opslaat in een .env bestand kan gemakkelijk lekken in uw app-build.

Als u bijvoorbeeld de geheime Firebase-sleutel van uw app wilt invoeren in het .env bestand:

REACT_APP_apiKey = uwFirebaseAccessKey

U kunt de gegenereerde code dus als volgt verfijnen:

importeren { app initialiseren } van "vuurbasis/app";
importeren { haalFirestore } van "@firebase/firestore"
const firebaseConfig = {
API sleutel: proces.env.REACT_APP_apiKey,
authDomein: proces.env.REACT_APP_authDomain,
projectId: proces.env.REACT_APP_projectId,
opslagEmmer: proces.env.REACT_APP_opslagBucket,
messagingSenderId: proces.env.REACT_APP_messagingSenderId,
appId: proces.env.REACT_APP_appId,
metingId: proces.env.REACT_APP_meet-Id
};
const app = app initialiseren (firebaseConfig);
exporterenconst firestore = haalFirestore (app)

Test uw Firebase-verbinding

U kunt de verbinding testen door dummygegevens naar Firestore te sturen. Begin met het maken van een handgrepen map in uw project src map. Maak een verzendhandler in dit bestand. Je kunt dit bellen handlesubmit.js, bijvoorbeeld:

importeren { addDoc, verzameling } van "@firebase/firestore"
importeren { vuuropslag } van "../firebase_setup/firebase"
const handleSubmit = (testgegevens) => {
const ref = verzameling (firestore, "test_data") // Firebase maakt dit automatisch aan
laten gegevens = {
 testData: testdata
 }
poging {
 addDoc (ref, gegevens)
 } vangst(fout) {
troosten.log (fout)
 }
}
exporterenstandaard handvatVerzenden

Dan naar binnen App.js:

importeren './App.css';
importeren handvatVerzenden van './handles/handlesubmit';
importeren { gebruikRef } van 'Reageer';
functieapp() {
const dataRef = gebruikRef()
const indienhandler = (e) => {
e.voorkom standaard()
handvatVerzenden(gegevensRef.huidig.waarde)
 dataRef.huidige.waarde = ""
 }
opbrengst (
<div className="app">
<formulier onSubmit={submithandler}>
<invoertype= "tekst" ref={dataRef} />
<knoptype = "indienen">Redden</button>
</form>
</div>
 );
}
exporterenstandaard App;

Voer uw React-app uit en probeer gegevens in te dienen via het formulier. Vernieuw de Firebase-databaseconsole om de ingediende informatie in uw verzameling te bekijken. Met de basis op zijn plaats, kun je vele andere ontdekken dingen die Firebase kan doen om te zien hoe u deze het beste kunt gebruiken.

Bouw onderweg met Firebase en reageer

Firebase is een veelzijdige backend-as-a-service-oplossing waarmee u uw app effectief kunt schalen. Zodra u uw React-app hebt aangesloten, kunt u gebruikmaken van de vele functies om uw website naar wens te bouwen.

De Firebase-authenticatietoolkit is bijvoorbeeld een van de functies die u misschien wilt verkennen.