Slik kobler du React-appen din til Firebase

Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon.

I følge Stack Overflow-undersøkelsen fra 2022 bruker 21,14 prosent av utviklerne Firebase, noe som gjør den til den fjerde mest populære skyplattformen. Det er en teknologi i utvikling for å integrere backend sømløst.

Med Firebase kan du utvikle en fullstack-applikasjon uten å skrive en eneste linje med backend-kode. Lær hvordan du kobler React.js-applikasjonen din til Firebase i dag og bygger på farten.

Installer Firebase-pakken

Etter lage din React-app, endre katalog til prosjektets rotmappe og installer Firebase-pakken ved å kjøre:

npm installere brannbase

Legg til React-appen din i et Firebase-prosjekt

Det neste trinnet er å opprette et Firebase-prosjekt og koble det til React-appen din. Gå til Firebase-konsoll:

1. Klikk Legg til prosjekt for å starte et nytt Firebase-prosjekt.
instagram viewer
2. Skriv inn et prosjektnavn, og klikk deretter Fortsette.
3. Klikk Fortsette på neste side.
4. Velg Firebase-kontoen din fra rullegardinmenyen eller klikk Lag en ny bruker hvis du ikke allerede har en.
5. Klikk til slutt Lag prosjekt.
6. Klikk Fortsette når prosessen er fullført.
7. Klikk deretter på webikonet () øverst til venstre på følgende side for å konfigurere Firebase for nettet.
8. Skriv inn et kallenavn for appen din i det angitte feltet. Klikk deretter Registrer app.
9. Kopier den genererte koden og behold den for det følgende trinnet (diskutert i følgende avsnitt).
10. Klikk Fortsett til konsollen.
11. Det er mange alternativer på den neste siden. Rull ned og velg Cloud Firestore siden du bare trenger å sette opp en database i dette tilfellet.
12. Klikk deretter Opprett database.
13. Klikk Neste. Velg din foretrukne Firestore-plassering fra rullegardinmenyen.
14. Klikk deretter Muliggjøre for å opprette en Firestore-database.

Initialiser Firebase i React-appen din

Opprett en ny mappe i prosjektet ditt src katalog. Du kan kalle dette firebase_setup. Deretter oppretter du en firebase.js filen inne i den mappen. Deretter limer du inn koden generert tidligere i denne filen.

Foreløpig kan du lagre konfigurasjonsobjektet (firebaseConfig) inne i en .env fil. Men vurder å bruke en sikrere måte å maskere React-hemmeligheter i produksjon. Data som du lagrer i en .env fil kan lett lekke i appbygget ditt.

For eksempel, for å skrive inn appens hemmelige Firebase-nøkkel i .env fil:

REACT_APP_apiKey = dinFirebaseAccessKey

Dermed kan du finjustere den genererte koden som følger:

import { initializeApp } fra "firebase/app";
import { getFirestore } fra "@firebase/firestore"
konst firebaseConfig = {
apiKey: prosess.env.REACT_APP_apiKey,
authDomain: prosess.env.REACT_APP_authDomene,
prosjekt-ID: prosess.env.REACT_APP_projectId,
oppbevaringsbøtte: prosess.env.REACT_APP_storageBucket,
messagingSenderId: prosess.env.REACT_APP_messagingSenderId,
appId: prosess.env.REACT_APP_appId,
måle-ID: prosess.env.REACT_APP_measurementId
};
konst app = initializeApp (firebaseConfig);
eksportkonst firestore = getFirestore (app)

Test Firebase-tilkoblingen din

Du kan teste tilkoblingen ved å sende inn dummydata til Firestore. Start med å lage en håndtak mappe inne i prosjektet ditt src katalog. Opprett en innsendingsbehandler inne i denne filen. Du kan kalle dette handlesubmit.js, for eksempel:

import { addDoc, collection } fra "@firebase/firestore"
import { firestore } fra "../firebase_setup/firebase"
konst handleSubmit = (testdata) => {
konst ref = samling (firestore, "test_data") // Firebase oppretter dette automatisk
la data = {
 testData: testdata
 }
prøve {
 addDoc (ref, data)
 } å fange(feil) {
konsoll.log (feil)
 }
}
eksportmisligholde handleSend inn

Så inne App.js:

import './App.css';
import handleSend inn fra './handles/handlesubmit';
import { useRef } fra 'reagere';
funksjonApp() {
konst dataRef = brukRef()
konst innsendingshandler = (e) => {
e.preventDefault()
handleSend inn(dataRef.nåværende.verdi)
 dataRef.current.value = ""
 }
komme tilbake (
<div klassenavn="App">
<form onSubmit={submithandler}>
<input type= "tekst" ref={dataRef} />
<knapp type = "sende inn">Lagre</button>
</form>
</div>
 );
}
eksportmisligholde App;

Kjør React-appen din og prøv å sende inn data via skjemaet. Oppdater Firebase-databasekonsollen for å se den innsendte informasjonen i samlingen din. Med det grunnleggende på plass kan du utforske mange andre ting Firebase kan gjøre for å se hvordan du best kan bruke den.

Bygg på farten med Firebase og React

Firebase er en allsidig backend-as-a-service-løsning som lar deg skalere appen din effektivt. Når du kobler til React-appen din, kan du utnytte dens mange funksjoner for å bygge nettstedet ditt etter din smak.

For eksempel er Firebase-autentiseringsverktøysettet en av funksjonene du kanskje vil utforske.