Sådan forbinder du din React-app til Firebase

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.

Ifølge 2022 Stack Overflow-undersøgelsen bruger 21,14 procent af udviklerne Firebase, hvilket gør det til den fjerde mest populære cloud-platform. Det er en teknologi i udvikling til at integrere backend problemfrit.

Med Firebase kan du udvikle en fuld stack-applikation uden at skrive en enkelt linje med backend-kode. Lær, hvordan du forbinder din React.js-applikation med Firebase i dag og bygger på farten.

Installer Firebase-pakken

Efter oprettelse af din React-app, skift mappe til dit projekts rodmappe og installer Firebase-pakken ved at køre:

npm installere brandbase

Føj din React-app til et Firebase-projekt

Det næste trin er at oprette et Firebase-projekt og linke det til din React-app. Gå til Firebase-konsol:

1. Klik Tilføj projekt for at starte et nyt Firebase-projekt.
instagram viewer
2. Indtast et projektnavn, og klik derefter Blive ved.
3. Klik Blive ved på næste side.
4. Vælg din Firebase-konto i rullemenuen eller klik Oprette en ny konto hvis du ikke allerede har en.
5. Klik til sidst Opret projekt.
6. Klik Blive ved når processen er afsluttet.
7. Klik derefter på webikonet () øverst til venstre på den følgende side for at konfigurere Firebase til nettet.
8. Indtast et kaldenavn til din app i det angivne felt. Klik derefter Registrer app.
9. Kopier den genererede kode og behold den til det følgende trin (diskuteret i det følgende afsnit).
10. Klik Fortsæt til konsollen.
11. Der er mange muligheder på den følgende side. Rul ned og vælg Cloud Firestore da du kun skal oprette en database i dette tilfælde.
12. Klik derefter Opret database.
13. Klik Næste. Vælg din foretrukne Firestore-placering fra rullemenuen.
14. Klik derefter Aktiver for at oprette en Firestore-database.

Initialiser Firebase i din React-app

Opret en ny mappe i dit projekt src vejviser. Du kan kalde dette firebase_setup. Opret derefter en firebase.js fil i den mappe. Indsæt derefter den tidligere genererede kode i denne fil.

Indtil videre kan du gemme konfigurationsobjektet (firebaseConfig) inde i en .env fil. Men overvej at bruge en mere sikker måde at maskere React-hemmeligheder på i produktion. Data, som du gemmer i en .env fil kan nemt lække i din app build.

For eksempel at indtaste din apps hemmelige Firebase-nøgle i .env fil:

REACT_APP_apiKey = din FirebaseAccessKey

Således kan du finjustere den genererede kode som følger:

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)

Test din Firebase-forbindelse

Du kan teste forbindelsen ved at indsende dummy-data til Firestore. Start med at oprette en håndtag mappe inde i dit projekts src vejviser. Opret en indsend-handler i denne fil. Du kan kalde dette handlesubmit.js, for eksempel:

importere { addDoc, collection } fra "@firebase/firestore"
importere { firestore } fra "../firebase_setup/firebase"
konst handleSubmit = (testdata) => {
konst ref = samling (firestore, "test_data") // Firebase opretter dette automatisk
lade data = {
 testdata: testdata
 }
prøve {
 addDoc (ref, data)
 } fangst(fejl) {
konsol.log (fejl)
 }
}
eksportStandard handleSend

Så indenfor App.js:

importere './App.css';
importere handleSend fra './handles/handlesubmit';
importere { useRef } fra 'reagere';
fungereApp() {
konst dataRef = useRef()
konst submithandler = (e) => {
e.preventDefault()
handleSend(dataRef.nuværende.værdi)
 dataRef.current.value = ""
 }
Vend tilbage (
<div klassenavn="App">
<form onSubmit={submithandler}>
<input type= "tekst" ref={dataRef} />
<knaptype = "Indsend">Gemme</button>
</form>
</div>
 );
}
eksportStandard App;

Kør din React-app, og prøv at indsende data via formularen. Opdater Firebase-databasekonsollen for at se de indsendte oplysninger i din samling. Med det grundlæggende på plads kan du udforske mange andre ting Firebase kan for at se, hvordan man bedst bruger det.

Byg på farten med Firebase og React

Firebase er en alsidig backend-as-a-service-løsning, der giver dig mulighed for at skalere din app effektivt. Når du har tilsluttet din React-app, kan du udnytte dens mange funktioner til at bygge din hjemmeside efter din smag.

For eksempel er Firebase-godkendelsesværktøjssættet en af ​​de funktioner, du måske vil udforske.