Hvis du bygger en applikation med React eller React Native og ønsker at tilføje login, en realtidsdatabase eller blot slippe for at bekymre dig om backend, er Firebase en af de mest bekvemme og effektive muligheder, der er tilgængelige lige nu . Det giver dig mulighed for godkendelse, en database, fillagring og meget mere uden at oprette din egen API.
I denne artikel vil vi trin for trin se, hvordan man forbinder en React-app (og også React Native/Expo) til Firebase , hvordan man strukturerer projektet, konfigurerer e-mail- og Google-godkendelse, bevarer brugersessioner og læser/skriver data til både Firestore og Realtime-databasen. Vi gør dette med eksempler fra den virkelige verden og kommenteret kode, der forklarer det på et letforståeligt sprog, så du kan følge med, selvom du ikke er en teknisk ekspert.
Hvad er Firebase, og hvorfor passer det så godt sammen med React?
Firebase er en Google Backend as a Service , der leverer en række brugsklare tjenester: godkendelse, realtidsdatabase, Firestore (en NoSQL-dokumentdatabase), fillagring, analyser, vækstværktøjer, monetisering og mere. Det startede som en realtidsdatabase, men efter flere iterationer har det udviklet sig til en omfattende backend-platform.
I stedet for at opsætte din egen server, designe din API, administrere infrastrukturen og skalere den, kan du med Firebase forbinde din React-app direkte til backend ved hjælp af dens officielle SDK . Det betyder, at mange typiske backend-opgaver (godkendelse, CRUD, sikkerhedsregler, notifikationer osv.) reduceres til et par kald til veldokumenterede JavaScript-funktioner.
Integration med React er meget naturlig, fordi Firebase eksponerer sine data i JSON-format , og dets SDK'er er designet til at fungere på klientsiden. Med React læser du blot disse data, udfylder dine komponenters tilstand og lader biblioteket håndtere rendering af alt, når noget ændrer sig. Når du bruger dets realtidslyttere, udløser hver databaseopdatering en automatisk gengivelse, hvilket passer perfekt til Reacts deklarative model.
Opret og konfigurer et Firebase-projekt
Før du begynder at skrive React-kode, skal du have dit Firebase-miljø klar. Processen er meget ens, uanset om du bruger den fra en React-webapp, React Native eller Expo. I alle tilfælde er det første trin at oprette projektet i Firebase-konsollen.
Gå til https://firebase.google.com/ , log ind med din Google-konto, og få adgang til konsollen. Derfra skal du oprette et nyt projekt , give det et genkendeligt navn (f.eks. "react-firebase" eller "auth-firebase-react"), og vælge den region, der giver mest mening for din applikations målgruppe.
Når projektet er oprettet, fører Firebase dig til hoveddashboardet. Du vil se flere muligheder for at tilføje apps: iOS, Android og Web. For en React-webapp vælger du webikonet, mens du for React Native kan registrere iOS- og/eller Android-apps efter behov. Målet er i alle tilfælde at få en Firebase-konfiguration med nøgler som apiKey, authDomain, projectId og lignende.
Konsollen viser dig et kodestykke, der ser nogenlunde sådan ud:
const config = { apiKey: "AIzaSy*", authDomain: "tu-proyecto.firebaseapp.com", databaseURL: "https://tu-proyecto.firebaseio.com", projectId: "tu-proyecto", storageBucket: "tu-proyecto.appspot.com", messagingSenderId: "796"};firebase.initializeApp(config);I React Web behøver du egentlig kun konfigurationsobjektet og kaldet til initialisering af App ved hjælp af det nuværende modulære SDK. Du vil senere se, hvordan du kan tilpasse dette til din projektstruktur.
Valg af database: Realtidsdatabase vs. Firestore
Firebase tilbyder to hovedtyper af databaser: Realtime Database og Cloud Firestore . Begge er NoSQL, men de har vigtige forskelle i datamodel, forespørgsler og fakturering.
En realtidsdatabase er en kæmpe JSON-database, hvor alt er organiseret i en enkelt træstruktur. Den er ideel, når du har brug for Meget hurtige opdateringer og nem synkronisering i realtidStrukturen er baseret på noder og stier, og du tilgår dem med referencer som f.eks. firebase.database().ref('object/name')Det er den klassiske mulighed, hvis du ønsker noget i retning af chat, brugertilstedeværelse eller meget simple data.
Firestore organiserer derimod information i samlinger og dokumenter . Hvert dokument har felter, og du kan indlejre undersamlinger i det. Det giver mulighed for mere komplekse forespørgsler, sammensatte indekser, sortering og kombinerede filtre. Det er perfekt til lidt større applikationer, hvor du har brug for fleksible forespørgsler, skalerbarhed og mere udtryksfulde sikkerhedsregler.
Begge databaser kan problemfrit bruges i React, selv i den samme app. For eksempel kan du gemme brugere, opslag eller opgaver i Firestore og udnytte realtidsdatabasen til meget dynamiske data, som du vil overvåge kontinuerligt. Den vigtigste konklusion er, at i React lytter du blot efter ændringer og opdaterer status ; Firebase håndterer resten.
Opret en React Native / Expo-app med Firebase
Hvis du arbejder med React Native, kan du integrere Firebase ved hjælp af Firebase Web SDK , som er fuldt kompatibel med projekter oprettet med Expo eller det officielle React Native CLI. På denne måde er du ikke bundet til mellemliggende biblioteker, og du forbliver inden for Googles officielle supportramme.
For at komme i gang med Expo skal du installere Expo CLI globalt fra terminalen ved hjælp af npm install -g expo-cliOpret derefter et nyt React Native-projekt med expo initVælg en basisskabelon (f.eks. "tom" med administreret arbejdsgang) og start appen med yarn ios o yarn androidExpo viser dig en QR-kode, som du kan scanne med kameraet på iOS eller med Expo-appen på Android for at se dit projekt på enheden.
Når du har din basisapp kørende, skal du tilføje de nødvendige afhængigheder: først selve Firebase SDK'et med yarn add firebaseDerefter kan du integrere navigationsbiblioteker som f.eks. @react-navigation/native y @react-navigation/stak, sammen med de ekstra pakker, de har brug for i React Native (gesture-handler, reanimated, screens, safe-area-context osv.) for at administrere flowet mellem login, registrering og startskærme.
Det er også meget nyttigt at installere nogle hjælpekomponenter til den mobile brugergrænseflade, såsom react-native-keyboard-aware-scroll-view for korrekt håndtering af tastaturet i formularer, og biblioteker som base64 for at levere globale funktioner, der mangler i nogle mobile runtime-programmer (btoa, atob osv.). Alt dette tilføjes med en enkelt installationskommando ved hjælp af yarn i dit projekt.
Opsæt Firebase i React/React Native
Du centraliserer din Firebase-konfiguration i en enkelt fil, så resten af applikationen kun behøver at importere en præinitialiseret instans. Opret f.eks. en mappe src/firebase og inde i en konfigurationsfil, som f.eks. config.js (o config.ts i TypeScript).
I den fil skal du importere de nødvendige funktioner fra Firebase SDK'et og definere dit konfigurationsobjekt med de værdier, der leveres af Firebase-konsollen. I React Native-projekter, der bruger det ældre SDK, kan du muligvis se noget i retning af dette:
import * as firebase from 'firebase';import '@firebase/auth';import '@firebase/firestore';const configuracionFirebase = { apiKey: 'TU_CLAVE_API', authDomain: 'tu-dominio-auth.firebaseapp.com', databaseURL: 'https://tu-bd.firebaseio.com', projectId: 'tu-id-proyecto', storageBucket: 'tu-id-proyecto.appspot.com', messagingSenderId: '1234567890', appId: '1:1234567890:web:codigoapp'};if (!firebase.apps.length) { firebase.initializeApp(configuracionFirebase);}export { firebase };Webprojekter, der bruger Vite og TypeScript, bruger typisk den modulære version af Firebase SDK 9, og det er god praksis at placere følsomme værdier i miljøvariablerFor eksempel kan du oprette en fil .env i roden og definer nøgler som VITE_FIREBASE_API_KEY, VITE_FIREBASE_AUTH_DOMAINosv. Derefter konstruerer du objektet i konfigurationsfilen ud fra import.meta.env['VITE_FIREBASE_API_KEY'] og lignende.
Uanset fremgangsmåden er mønsteret det samme: du initialiserer Firebase-appen kun én gang og eksporterer den pågældende instans (eller eksporterer specifikke objekter som FirebaseAuth , Firestore eller Realtime Database ) til nem brug i resten af projektet.
Grundlæggende skærmarkitektur: login, registrering og startside
Når du integrerer godkendelse i en React Native-app, er en meget almindelig struktur at have tre hovedskærme: Login, registrering y HjemDerudover kan du centralisere navigationslogikken i en enkelt rodkomponent, typisk App.js.
I React Native med React Navigation er det typisk at oprette en mappe src/screens med undermapper pr. skærm (LoginScreen, RegistrationScreen, HomeScreen) og en indeksfil, der eksporterer hver af dem. Derefter, i App.jsDu opretter en staknavigator, der viser den ene eller den anden skærm afhængigt af, om der er en godkendt bruger eller ej.
Ideen er at gemme komponentens tilstand. App un bruger (eller null) og et flag af lastningMens godkendelsesstatussen kontrolleres, kan du vise en tom skærm eller en indlæser. Når du ved, om brugeren er logget ind, bestemmer du, hvilke ruter der skal vises: hvis der er en bruger, skal du vise startskærmen; hvis ikke, skal du vise login- og registreringsskærmene.
Visuelt set er login- og registreringsskærmene simple formularer med felter som e-mail, adgangskode og, i tilfælde af registrering, fuldt navn eller bekræftelse af adgangskode. For at forbedre mobiloplevelsen er alt normalt indkapslet i en KeyboardAwareScrollView , så tastaturet ikke dækker inputfelterne. Startskærmen kan derimod starte som en minimal visning (simpel tekst) og senere udvikle sig til den del af appen, hvor du læser og skriver data fra Firestore.
Design og administration af formularer med hooks i React
I en React-webapplikation med TypeScript er en ren måde at håndtere godkendelsesformularer på at indkapsle logikken i en brugerdefineret krogFor eksempel kan du oprette useForm.tsx i en mappe src/hooks, der modtager en generisk starttilstand (et objekt med formens egenskaber) og returnerer både værdierne og en funktion til at håndtere ændringerne.
Den krog kan bruges useState internt for at gemme formularen og eksponere en funktion handleChange der modtager inputhændelsen, læser attributten navn af elementet og opdater den tilsvarende egenskab i tilstanden. På denne måde får du de korrekte navne i inputtene (f.eks. name="email" y name="pass") er nøglen til at få alt til at fungere.
I login-komponenten ville du for eksempel kalde useForm({ email: '', pass: '' }) Og du ville få e-mailen, adgangskoden, formularobjektet og handleChange-funktionen. Hvert input ville have sin egen værdi y vi ændrer os knyttet til disse værdier og hookens funktion. Når du indsender formularen, ville du have en handleSubmit hvad gør e.preventDefault() og kalder derefter godkendelseslogikken med Firebase.
Det samme gælder for registreringsformularen; du kan endda udtrække en genbrugelig formularkomponent, da det ofte kun er knapteksten og det callback, der udføres ved afsendelse, der ændres, mens den grundlæggende struktur forbliver den samme.
Konfigurer godkendelse i Firebase
For at aktivere React til at godkende med Firebase, skal du aktivere godkendelsesudbydere i Firebase-konsollen. I afsnittet Godkendelse skal du gå til fanen Loginmetoder og aktivere e-mail/adgangskode og, hvis det ønskes, Google- godkendelse.
For e-mail-/adgangskodeudbyderen skal du blot aktivere den og gemme. For Google skal du, udover at aktivere den, vælge den e-mailadresse, der skal bruges som standard. Fra da af vil dit projekt være klar til at acceptere logins ved hjælp af begge metoder.
I fanen Brugere i samme afsnit kan du se, hvordan nye konti, der oprettes via din applikation, registreres, enten med e-mail og adgangskode eller via Google. Det er et godt sted at kontrollere, at felt-til-felt-integrationen fungerer korrekt.
Godkendelsesfunktioner med Firebase i React
I en webapp, der bruger React og TypeScript, anbefales det at gruppere al godkendelseslogik i en services-fil, for eksempel src/firebase/services.ts . Der kan du have specifikke funktioner for hver handling: login med Google, login med legitimationsoplysninger, registrering, logout og en godkendelsesstatusovervågning.
For at bruge Google-udbyderen er det første trin at oprette en instans af GoogleAuthProvider (eller tilsvarende udbyder afhængigt af dit tilfælde), og definer derefter en asynkron funktion, der kalder signInWithPopup(FirebaseAuth, provider)Hvis opkaldet lykkes, modtager du et objekt med den godkendte bruger, hvorfra du kan udtrække uid, displaynavn, fotoURL og andre felter. Ofte behøver du kun at arbejde med UID'et og returnere det for at etablere den globale session.
For godkendelse ved hjælp af e-mail og adgangskode har du to nøglefunktioner: opretBrugerMedE-mailOgAdgangskode y Log ind med e-mail og adgangskodeBegge venter på muligheden for at... FirebaseAuthE-mailadresse og adgangskode er påkrævet. Den første opretter nye brugere, den anden verificerer deres eksistens og autentificerer dem. Internt håndterer Firebase validering af e-mailformat, adgangskodelængde og andre faktorer og returnerer tydelige fejl, som du kan opfange i en blok. prøv / fange og vis med en simpel alert eller med dit eget notifikationssystem.
For at logge ud skal du blot bruge signOut(FirebaseAuth) , som du også kan indkapsle i en funktion i din tjeneste for at holde din kodes API renere og mere konsistent.
Observer sessionsændringer med onAuthStateChanged
Et meget almindeligt problem, når man starter med godkendelse, er, at selvom loginet fungerer, ser det ud til, at sessionen er gået tabt, når man genindlæser sin React-appside eller lukker og genåbner mobilappen. Firebase har dog som standard en permanent godkendelsestilstand: man læser den simpelthen ikke korrekt.
Løsningen er at bruge onAuthStateChanged- funktionen fra Firebase Auth SDK. Denne funktion modtager godkendelsesinstansen og et callback, der udføres hver gang tilstanden ændres: når brugeren logger ind, når de logger ud, eller når appen initialiseres, og Firebase henter de gemte legitimationsoplysninger.
I en React-app er det normale at oprette en funktion, for eksempel observeAuthState, der modtager en tilstandssætter (såsom setSession) og indvendigt opkald onAuthStateChanged(FirebaseAuth, user => { ... })I det tilbagekald, hvis brugeren er null eller udefineretDu indstiller den globale session som ikke-godkendt; hvis der er en bruger, gemmer du deres brugernavn. uid og marker status som godkendt.
Denne observatør udløses typisk i en useEffect på appens højeste niveau (f.eks. i en kontekst), så den kun kører én gang, når appen startes. Dette sikrer, at selvom brugeren genindlæser browseren, og Firebase husker sessionen, opdateres din globale tilstand automatisk og sendes direkte til den private del af appen uden at bede om legitimationsoplysninger igen.
Global godkendelseskontekst i React
For at undgå at props skal sendes fra én komponent til en anden, er en meget bekvem strategi i React at oprette en dedikeret Context API til godkendelse . På denne måde kan enhver del af appen bestemme, om brugeren er godkendt, deres UID, og hvilke funktioner der er tilgængelige for dem (login, logout osv.) uden prop drilling.
Start med at oprette en mappe src/context og inde i en fil, for eksempel authContext.tsxDer definerer du en grænseflade, der beskriver, hvad din kontekst vil eksponere: status af sessionen (for eksempel 'tjekker', 'godkendt', 'ikke-godkendt'), den bruger ID (eller null hvis der ikke er nogen bruger) og funktionerne til at logge ind eller logge ud.
Definer derefter en starttilstand med status i 'tjekker' og bruger-ID er null, og opret kontekst med createContextByg derefter en komponent Aut.udbyder der modtager børn, brug useState at administrere sessionen og kalde din funktion observeAuthState en useEffekt ved montering.
Inden for denne udbyder er det nyttigt at have hjælpefunktioner: én til at logge ud , der kalder din logoutFirebase-tjeneste og efterlader tilstanden som ikke-godkendt, en anden til at tvinge tilstanden til at 'tjekke', når du starter et godkendelsesflow, og en anden til at validere resultatet af et login/registrering (hvis du modtager en uid, skal du markere den som godkendt; hvis ikke, skal du kalde logout-funktionen for at rydde eventuelle sessionsrester).
Med det kan du implementere tre offentlige handlinger i den sammenhæng: håndtagLoginMedGoogle, håndtagLoginMedLegitimationsoplysninger y håndtagRegisterWithCredentialsHver enkelt vil starte "tjekket", aktivere den tilsvarende servicefunktion og delegere den endelige beslutning til den fælles validering, du har oprettet. Til sidst, AuthContext.Provider Det vil eksponere både tilstanden (status, bruger-ID) og disse funktioner, og du vil pakke din app ind i Aut.udbyder i rodfilen (for eksempel i src/main.tsx).
Brug af kontekst i login-, registrerings- og startkomponenter
Når du har din godkendelseskontekst klar, er det meget nemt at bruge den i dine komponenter. I komponenten Login.tsxDet betyder noget useContext, få adgang til Godkendelseskontekst og udtrækker f.eks. funktionerne håndtagLoginMedLegitimationsoplysninger y håndtagLoginMedGoogleI indsendelsen af loginformularen skal du kalde den første og sende e-mailadressen og adgangskoden fra din hook. useFormmens den eksklusive "Log ind med Google"-knap lancerer sin anden version ved arrangementet onClick.
For Register.tsx- komponenten skal du gøre noget meget lignende, men kun bruge handleRegisterWithCredentials . Formularen vil anmode om de samme felter (e-mail og adgangskode), eller et par flere, hvis du ønsker det, og ved indsendelse vil kontekstlogikken være ansvarlig for at oprette brugeren og opdatere den globale status.
I hovedkomponenten App.tsx bruger du også konteksten til at læse status og userId . Mens status er 'tjekker', kan du vise en lille indlæsningsmeddelelse eller et overgangsskærmbillede. Når status ændres, og brugeren er godkendt og har et gyldigt userId, viser du en HomePage- komponent, der kun viser indhold for brugere, der er logget ind (f.eks. deres userId og en logout-knap, der kalder handleLogOut ). Hvis statussen angiver, at brugeren ikke er godkendt, gengiver du en AuthPage- komponent, der indeholder dine Login- og Registrer-formularer.
Registrering og login med Firebase Auth i React Native
I React Native er det konceptuelle mønster det samme, selvom den tekniske struktur adskiller sig fra webstrukturen. På registreringsskærmen (RegistrationScreen) vil du have en lokal status for fulde navn, e-mail, adgangskode y bekræft adgangskodeNår du klikker på knappen "Opret konto", kontrollerer du, at adgangskoderne stemmer overens, og hvis alt ser rigtigt ud, ringer du firebase.auth().createUserWithEmailAndPassword(email, password).
Når Firebase opretter kontoen, kan du gemme yderligere brugeroplysninger i Firestore, i en samling usersved at indstille dokument-ID'et til det UID, der returneres af Firebase. Dette giver dig en central placering til at gemme dataene. fuldt navn, profilbillede eller andre personlige oplysninger som ikke passer ind i standardgodkendelsestabellen. Hvis hele strengen fungerer, navigerer du til startskærmen ved at sende brugerobjektet som en parameter.
På loginskærmen (LoginScreen) importerer du også Firebase og bruger firebase.auth().signInWithEmailAndPassword(email, password)Når du modtager svaret med brugeren, kan du læse deres udvidede data fra Firestore ved hjælp af UID'et, og hvis dokumentet findes, kan du navigere til hjemmesiden med den pågældende bruger i navigationslinjen. Hvis forespørgslen ikke returnerer noget, fordi brugeren er blevet slettet fra Firestore, underretter du brugeren og forhindrer yderligere behandling.
Sessionspersistens i React Native med onAuthStateChanged
Ligesom på nettet er det i React Native meget irriterende for brugeren at skulle logge ind hver gang de åbner appen. Firebase Auth husker også loginet og giver dig mulighed for at hente den aktuelle bruger ved hjælp af det samme login. vedGodkendelsestilstandÆndretI dette miljø er logikken normalt placeret i komponenten App eller i en kontekst svarende til internettets.
Du bruger en useEffekt som kun kører én gang ved montering af komponenten, og inden for hvilken du kalder firebase.auth().onAuthStateChangedHvis du modtager en bruger i tilbagekaldet, søger du efter deres tilsvarende dokument i samlingen. users fra Firestore, og når du modtager den, opdaterer du status bruger og fjern markeringen i indlæsningsflaget. Hvis der ikke er nogen godkendt bruger, skal du blot sætte indlæsning til falsk og lade bruger være til nul, hvilket vil få navigationstræet til at vise de offentlige skærme.
Dette mønster sikrer, at hvis brugeren åbnede appen for et stykke tid siden og efterlod den i baggrunden, eller hvis de lukker og genåbner den, vil den fortsat vises direkte på startskærmen, så længe deres sessionstoken forbliver gyldig, hvilket forbedrer brugeroplevelsen betydeligt, uden at du behøver at administrere tokens manuelt.
Læsning og skrivning af data til Firestore fra React Native
Når godkendelsen er ordnet, er det tid til at gøre noget nyttigt med databasen. Et meget typisk eksempel er at oprette en startskærm, der giver brugeren mulighed for at tilføje tekstelementer til en samling og vise dem i realtid . Forestil dig, at disse elementer er opgaver, noter eller hurtige opslag, og du ønsker, at brugeren kun skal se sine egne.
På startskærmen angiver du en tilstand for den aktuelle tekst (entityText) og en anden for listen over enheder (entitiesDu opretter også en reference til Firestore-samlingen, for eksempel entityRef = firebase.firestore().collection('entities'), og du gemmer den godkendte brugers ID (for eksempel. userID = props.extraData.id).
Inden for en useEffektDu opretter en lytter i realtid med entityRef.where('authorID', '==', userID).orderBy('createdAt', 'desc').onSnapshot(...)Dette tilbagekald udløses, når noget ændres i de dokumenter, der opfylder denne betingelse. Du gennemgår dokumenterne i snapshottet, opbygger et array med indholdet af hver enhed, inkluderer dokument-ID'et og opdaterer tilstanden. enheder med det nye array. Takket være det vil den FlatList, du bruger til at vise enhederne, blive gengivet med de seneste data.
For at tilføje nye elementer opretter du en funktion onAddButtonPress hvilket bekræfter, at entityText ikke tom, generer et servertidsstempel med firebase.firestore.FieldValue.serverTimestamp() og ring entityRef.add({ text: entityText, authorID: userID, createdAt: timestamp })Hvis handlingen lykkes, kan du rydde tekstfeltet og lukke tastaturet; Firestore vil sørge for at starte et nyt snapshot, der får det nye element til at vises på listen.
Når du bruger kombinerede filtre og sortering, kan Firestore kræve, at du opretter en sammensat indeksHvis det sker, vil du se en meddelelse i logfilerne med et direkte link til Firebase-konsollen, hvor du kan oprette det pågældende indeks med et enkelt klik. Når det er oprettet, vil forespørgsler, der blander where y orderBy De vil fungere uden problemer.
Forbind React Web med Firebase Realtime Database
Ud over Firestore skal du muligvis arbejde med Firebase Realtime Database fra en webapp bygget med React. Den generelle proces er: du initialiserer Firebase med din projektkonfiguration, importerer biblioteket med Firebase/database og du opretter referencer til de noder, der interesserer dig, såsom object/nameDet er meget nyttigt i scenarier, hvor Du ønsker at se ændringerne afspejles øjeblikkeligt i brugerfladen..
Forestil dig, at du opretter en node i Firebase-konsollen object med en ejendom name hvis værdi er "Carlos". I din React-app definerer du en lokal tilstand name med en startværdi, for eksempel "Pepe", og du gengiver en <h1>{this.state.name}</h1> (hvis du bruger klassekomponenter) eller tilsvarende med hooks.
I livscyklusmetoden componentDidMount (eller i en useEffekt med tom afhængighed af funktionelle komponenter), opretter du en reference med firebase.database().ref().child('object').child('name') og du tilføjer en lytter af typen on('value', snapshot => { ... })Hver gang værdihændelsen udløses, modtager du et øjebliksbillede af nodens aktuelle værdi; du udfører en sætState med snapshot.val() React håndterer gengivelsen af teksten. Du ændrer navnet i Firebase-konsollen og ser det med det samme i din browser.
For at dette kan fungere uden godkendelse, skal du justere sikkerhedsreglerne i panelet Realtidsdatabase for at tillade offentlig læse- og skriveadgang under udvikling (for eksempel ved at indstille `læs` og `skriv` til `true`). Det er dog afgørende at begrænse disse regler i produktion, typisk ved at kræve brugergodkendelse eller anvende betingelser baseret på stien eller UID'et for at forhindre, at din database er åben for offentligheden.
Afsluttende overvejelser
Med dette grundlæggende mønster kan du bygge utallige use cases: tilstedeværelsesindikatorer, delte tællere, dashboards i realtid eller små demo-apps, hvor interaktivitet mellem kunder skal være øjeblikkelig.
Som du kan se, giver kombinationen af React (både på web og mobil) med Firebase dig mulighed for hurtigt at bygge projekter med realtidsgodkendelse, databaser og logik, og udnytte realtidshooks, kontekster og lyttere til at synkronisere den visuelle tilstand med det, der sker i den Google-administrerede backend. Denne kombination af hurtig udvikling og skalerbarhed betyder, at det for mange projekter ikke giver mening at genopfinde hele serverlaget, når du kan fokusere på brugeroplevelsen og lade Firebase håndtere resten.