Så här ansluter du din React-app till Firebase

Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision.

Enligt 2022 års Stack Overflow-undersökning använder 21,14 procent av utvecklarna Firebase, vilket gör den till den fjärde mest populära molnplattformen. Det är en teknologi som utvecklas för att integrera backend sömlöst.

Med Firebase kan du utveckla en fullstack-applikation utan att skriva en enda rad med backend-kod. Lär dig hur du kopplar din React.js-applikation till Firebase idag och bygger på språng.

Installera Firebase-paketet

Efter skapa din React-app, ändra katalog till projektets rotmapp och installera Firebase-paketet genom att köra:

npm Installera eldbas

Lägg till din React-app i ett Firebase-projekt

Nästa steg är att skapa ett Firebase-projekt och länka det till din React-app. Gå till Firebase-konsol:

1. Klick Lägg till projekt för att starta ett nytt Firebase-projekt.
2. Ange ett projektnamn och klicka sedan Fortsätta.
3. Klick Fortsätta på nästa sida.
4. Välj ditt Firebase-konto i rullgardinsmenyn eller klicka Skapa ett nytt konto om du inte redan har en.
5. Klicka slutligen Skapa projekt.
6. Klick Fortsätta när processen är klar.
7. Klicka sedan på webbikonen () uppe till vänster på följande sida för att konfigurera Firebase för webben.
8. Ange ett smeknamn för din app i det angivna fältet. Klicka sedan Registrera app.
9. Kopiera den genererade koden och behåll den för följande steg (diskuteras i följande avsnitt).
10. Klick Fortsätt till konsolen.
11. Det finns många alternativ på följande sida. Rulla ned och välj Cloud Firestore eftersom du bara behöver skapa en databas i det här fallet.
12. Klicka sedan Skapa databas.
13. Klick Nästa. Välj önskad Firestore-plats från rullgardinsmenyn.
14. Klicka sedan Gör det möjligt för att skapa en Firestore-databas.

Initiera Firebase i din React-app

Skapa en ny mapp i ditt projekt src katalog. Du kan kalla detta firebase_setup. Skapa sedan en firebase.js filen i den mappen. Klistra sedan in koden som genererades tidigare i den här filen.

För närvarande kan du lagra konfigurationsobjektet (firebaseConfig) inuti en .env fil. Men överväg att använda en säkrare sätt att maskera React-hemligheter i produktion. Data som du lagrar i en .env fil kan lätt läcka i din appbyggnad.

Till exempel, för att ange din apps Firebase hemliga nyckel i .env fil:

REACT_APP_apiKey = din FirebaseAccessKey

Således kan du finjustera den genererade koden enligt följande:

importera { initializeApp } från "firebase/app";
importera { getFirestore } från "@firebase/firestore"
konst firebaseConfig = {
apiKey: bearbeta.env.REACT_APP_apiKey,
authDomain: bearbeta.env.REACT_APP_authDomain,
projekt-ID: bearbeta.env.REACT_APP_projectId,
lagringBucket: bearbeta.env.REACT_APP_storageBucket,
meddelandeSenderId: bearbeta.env.REACT_APP_messagingSenderId,
appId: bearbeta.env.REACT_APP_appId,
mätnings-ID: bearbeta.env.REACT_APP_measurementId
};
konst app = initializeApp (firebaseConfig);
exporterakonst firestore = getFirestore (app)

Testa din Firebase-anslutning

Du kan testa anslutningen genom att skicka in dummydata till Firestore. Börja med att skapa en handtag mapp i ditt projekts src katalog. Skapa en inlämningshanterare i den här filen. Du kan kalla detta handlesubmit.js, till exempel:

importera { addDoc, collection } från "@firebase/firestore"
importera { firestore } från "../firebase_setup/firebase"
konst handleSubmit = (testdata) => {
konst ref = samling (firestore, "test_data") // Firebase skapar detta automatiskt
låta data = {
 testdata: testdata
 }
Prova {
 addDoc (ref, data)
 } fånga(fel) {
trösta.log (fel)
 }
}
exporterastandard handleSubmit

Sedan inuti App.js:

importera './App.css';
importera handleSubmit från './handles/handlesubmit';
importera { useRef } från 'reagera';
fungeraApp() {
konst dataRef = useRef()
konst submithandler = (e) => {
e.preventDefault()
handleSubmit(dataRef.nuvarande.värde)
 dataRef.current.value = ""
 }
lämna tillbaka (
<div className="App">
<form onSubmit={submithandler}>
<ingångstyp= "text" ref={dataRef} />
<knapptyp = "Skicka in">Spara</button>
</form>
</div>
 );
}
exporterastandard App;

Kör din React-app och testa att skicka in data via formuläret. Uppdatera Firebase-databaskonsolen för att se den inskickade informationen i din samling. Med grunderna på plats kan du utforska många andra saker Firebase kan göra för att se hur man bäst använder den.

Bygg på språng med Firebase och React

Firebase är en mångsidig backend-as-a-service-lösning som låter dig skala din app effektivt. När du väl har anslutit din React-app kan du utnyttja dess många funktioner för att bygga din webbplats efter dina önskemål.

Till exempel är Firebase-autentiseringsverktyget en av funktionerna du kanske vill utforska.