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.
Genom att använda kombinationen av React och Firebase kan du producera superresponsiva applikationer. Om du redan är bekant med React är det ett utmärkt nästa steg att lära sig hur man integrerar Firebase.
För att förstå grunderna i Firebases datahantering bör du lära dig hur du kopplar ihop dess Firestore-databas med React för att bygga en CRUD-app. Med hjälp av den kunskapen kan du börja skapa skalbara fullstack-applikationer med lite eller noll backend-kod.
Anslut din React-app till Firebase Firestore
Om du inte redan har gjort det, gå till Firebase-konsolen och koppla Firestore till ditt React-projekt.
Processen är enkel om du redan har gjort det skapade din React-app.
Gör sedan en ny firebase_setup katalogen i ditt projekt src mapp. Skapa en firebase.js filen i den här mappen. Klistra in konfigurationskoden du får när du skapar ett Firebase-projekt i den nya filen:
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)
De eldstad variabeln innehåller din Firebase Firestore-miljö. Du kommer att använda detta i hela appen när du gör API-förfrågningar.
Även om den här koden använder .env-metoden för att maskera konfigurationsinformationen, finns det bättre sätt att lagra hemligheter i React.
Installera nu eldbas och uuid bibliotek i din React-app. Även om uuid är valfritt, kan du använda det som en unik identifierare för varje dokument som skickas till Firestore-databasen.
npm Installera eldbas uuid
Här är en demonstration av vad du ska bygga med React och Firestore:
Skriv data till Firestore-databasen
Du kan använda setDoc eller addDoc metod för att lägga till dokument i Firebase. De addDoc Metoden har fördelen att den instruerar Firebase att generera ett unikt ID för varje post.
För att börja, importera följande beroenden till App.js:
importera './App.css';
importera { useEffect, useState } från 'reagera';
importera { addDoc, collection, setDoc, deleteDoc, doc, query, onSnapshot } från "firebase/firestore";
importera { firestore } från './firebase_setup/firebase';
importera { v4 som uuidv4 } från 'uuid';
Innan du fortsätter, titta på DOM-strukturen och de tillstånd som denna handledning använder:
fungeraApp() {
konst [info, setInfo] = useState([])
konst [isUpdate, setisUpdate] = useState(falsk)
const [docId, setdocId] = useState("")
const [detail, setDetail] = useState("")
konst [ids, setIds] = useState([])lämna tillbaka (
<div className="App">
<form>
<ingångstyp= "text" value={detail} onChange={handledatachange} />
{
är uppdatering? (
<>
<button onClick={handlesubmitchange} typ = "Skicka in">Uppdatering</button>
<knappen onClick={() => { setisUpdate (falskt); setDetail("")}}>
X
</button>
</>
): (<button onClick={submithandler} typ="Skicka in">Spara</button>)
}
</form>{info.map((data, index)=>
<div nyckel={ids[index]} klassnamn='data-behållare' id='data-behållare'>
<p klassnamn='data' id='data' data-id ={ids[index]} nyckel={ids[index]}>{data}</s>
<knappen klassnamn='radera-knapp' id='radera-knapp' onClick={handledelete}>
Radera
</button><knappen klassnamn='uppdateringsknappen' id='uppdateringsknappen' onClick={handleupdate}>
Redigera
</button>
</div>
)}
</div>
);
}
exporterastandard App;
Skapa sedan en inlämningshanterare för att skriva data till Firestore-databasen. Detta är en onSubmit händelse. Så du kommer att använda den i skicka-knappen.
Skapa dessutom en ändringshanterare. Denna händelse lyssnar på ändringar i formulärfältet och skickar indata till en array ( detalj array i det här fallet). Detta går in i databasen.
konst handledatachange = (e) => {
setDetail(e.mål.värde)
};konst submithandler = (e) => {
e.preventDefault()
const ref = samling (firestore, "testdata")låta data = {
uuid: uuidv4(),
testData: detalj
}Prova {
addDoc (ref, data)
} fånga(fel) {
trösta.log (fel)
}
setDetail("")
}
Medan Firebase automatiskt genererar dokument-ID: n (om du inte förhindrar det), fungerar UUID-fältet också som en unik identifierare för varje dokument.
Läs data från Firestore-databasen
Hämta data från Firestore-databasen i useEffect haka med Firestore-frågemetoden:
useEffect(() => {
konst getData = asynkron () => {
konst data = vänta fråga (insamling (firestore, "test_data"));onSnapshot (data, (querySnapshot) => {
konst databaseInfo = [];
konst dataIds = []querySnapshot.för varje((doc) => {
databasInfo.skjuta på(doc.data().testdata);
dataIds.skjuta på(doc.id)
});setIds (dataIds)
setInfo (databaseInfo)
});
}
hämta data()
}, [])
Ovanstående kod använder Firebase-frågan för att få en ögonblicksbild av data som skickats till Firestore med hjälp av på Snapshot fungera.
En ögonblicksbild låter din app lyssna på ändringar i backend. Den uppdaterar klienten automatiskt varje gång någon skriver till databasen.
De setInfo staten tar tag i data i varje dokument. Du kommer att kartlägga detta (den info array) medan du renderar till DOM.
De setIds staten spårar alla dokument-ID: n (som godkänts som Ids array). Du kan använda varje ID för att köra raderings- och uppdateringsfrågorna på varje dokument. Du kan sedan skicka varje dokument-ID som ett DOM-attribut medan du mappar genom info array.
Här är tillståndsanvändningen inom DOM (som visas i föregående kodavsnitt):
Uppdatera befintliga data i Firestore
Använd setDoc metod för att uppdatera ett dokument eller ett fält i ett dokument.
Definiera två hanterare för uppdateringsåtgärden. Man hanterar skicka-knappen för den redigerade datan (hantera submitchange), medan den andra är för knappen som skriver om data till inmatningsfältet för redigering (hantera uppdatering):
konst handleupdate = (e) => {
setisUpdate(Sann)
setDetail(e.mål.parentNode.barn[0].textContent)
setdocId(e.mål.parentNode.barn[0].getAttribute("data-id"))
};konst handlesubmitchange = asynkron (e) => {
e.preventDefault()
const docRef = doc (firestore, 'testdata', docId);konst uppdatera data = vänta {
testData: detalj
};väntasetDoc(docRef, uppdatera data, { sammanfoga:Sann })
.then (console.log("Data har ändrats"))
setisUpdate(falsk)
setDetail("")
}
Som visas i föregående kodavsnitt, här är DOM-renderingen för skapa och uppdatera åtgärder:
De hantera uppdatering funktion riktar in sig på varje dokument-ID i DOM med hjälp av dess nodsökväg. Den använder detta för att fråga varje dokument från databasen för att det ska göra ändringar. Redigera-knappen använder denna funktion.
Så isUpdate (spåras av setisUpdate stat) returnerar Sann när en användare klickar på knappen Redigera. Den här åtgärden tar upp knappen Uppdatera, som skickar den redigerade informationen när en användare klickar på den. Det extra X knappen stänger redigeringsåtgärden när den klickas – genom inställning isUpdate till falsk.
Om isUpdate är falskDOM behåller den ursprungliga Spara-knappen istället.
Ta bort data från Firestore
Du kan ta bort befintlig data från Firestore med hjälp av radera Dok metod. Som du gjorde för åtgärden Uppdatera, hämta varje dokument med dess unika ID genom att rikta in dess DOM-attribut med hjälp av nodsökvägen:
konst handledelete = asynkron (e) => {
const docRef = doc (firestore, 'testdata', e.target.parentNode.children[0].getAttribute("data-id"));
vänta deleteDoc (docRef)
.then(() => {
trösta.logga(`${e.target.parentNode.children[0].textContent} har raderats framgångsrikt.`)
})
.fånga(fel => {
trösta.log (fel);
})
}
Skicka ovanstående funktion till knappen Ta bort. Den tar bort data från databasen och DOM när en användare klickar på den.
Para ihop Firebase med ditt bästa frontend-ramverk
Firebase hjälper dig att skriva mindre kod medan du frågar data direkt från klientsidan. Förutom React stöder den andra JavaScript-ramverk, inklusive Angular.js, Vue.js och många andra.
Nu när du har sett hur det fungerar med React kanske du också vill lära dig att para ihop det med Angular.js.