Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision.
Mit der Kombination aus React und Firebase können Sie reaktionsschnelle Anwendungen erstellen. Wenn Sie bereits mit React vertraut sind, ist das Erlernen der Integration von Firebase ein ausgezeichneter nächster Schritt.
Um die Grundlagen der Datenverarbeitung von Firebase zu verstehen, sollten Sie lernen, wie Sie die Firestore-Datenbank mit React koppeln, um eine CRUD-App zu erstellen. Mit diesem Wissen können Sie beginnen, skalierbare Full-Stack-Anwendungen mit wenig oder gar keinem Backend-Code zu erstellen.
Verbinden Sie Ihre React-App mit Firebase Firestore
Wenn Sie dies noch nicht getan haben, gehen Sie zur Firebase-Konsole und Verbinden Sie Firestore mit Ihrem React-Projekt.
Der Prozess ist einfach, wenn Sie es bereits getan haben deine React-App erstellt.
Als nächstes machen Sie eine neue firebase_setup Verzeichnis in Ihrem Projekt
Quelle Ordner. Ein... kreieren firebase.js Datei in diesem Ordner. Fügen Sie den Konfigurationscode, den Sie beim Erstellen eines Firebase-Projekts erhalten, in die neue Datei ein:importieren { App initialisieren } aus "Firebase/App";
importieren {getFirestore} aus "@firebase/firestore"konst firebaseConfig = {
API-Schlüssel: Verfahren.env.REACT_APP_apiKey,
authDomain: Verfahren.env.REACT_APP_authDomain,
Projekt-ID: Verfahren.env.REACT_APP_projectId,
SpeicherEimer: Verfahren.env.REACT_APP_storageBucket,
MessagingSenderId: Verfahren.env.REACT_APP_messagingSenderId,
appId: Verfahren.env.REACT_APP_appId,
Mess-ID: Verfahren.env.REACT_APP_measmentId
};
konst app = initializeApp (firebaseConfig);
Exportkonst firestore = getFirestore (App)
Der Feuerwehr Variable enthält Ihre Firebase Firestore-Umgebung. Sie verwenden dies in der gesamten App, während Sie API-Anfragen stellen.
Obwohl dieser Code die .env-Methode verwendet, um die Konfigurationsinformationen zu maskieren, gibt es bessere Möglichkeiten, Geheimnisse in React zu speichern.
Installieren Sie nun die Feuerbasis Und uuid Bibliotheken in deiner React-App. Obwohl uuid optional ist, können Sie es als eindeutigen Bezeichner für jedes Dokument verwenden, das in der Firestore-Datenbank gepostet wird.
npm Installieren Feuerbasis uuid
Hier ist eine Demonstration dessen, was Sie mit React und Firestore erstellen werden:
Daten in die Firestore-Datenbank schreiben
Du kannst den... benutzen setDoc oder addDoc Methode zum Hinzufügen von Dokumenten zu Firebase. Der addDoc -Methode hat den Vorteil, dass sie Firebase anweist, für jeden Datensatz eine eindeutige ID zu generieren.
Importieren Sie zunächst die folgenden Abhängigkeiten in App.js:
importieren './App.css';
importieren { useEffect, useState } aus 'reagieren';
importieren { addDoc, Sammlung, setDoc, deleteDoc, Dokument, Abfrage, onSnapshot } aus "Feuerbasis/Feuerlager";
importieren { Feuerraum } aus './firebase_setup/firebase';
importieren { v4 als uuidv4 } aus 'uuid';
Bevor Sie fortfahren, sehen Sie sich die DOM-Struktur und die Zustände an, die dieses Tutorial verwendet:
FunktionApp() {
konst [info, setInfo] = useState([])
konst [isUpdate, setisUpdate] = useState(FALSCH)
const [docId, setdocId] = useState("")
const [detail, setDetail] = useState("")
konst [ids, setIds] = useState([])zurückkehren (
<div Klassenname="App">
<form>
<Eingabetyp= "Text" value={detail} onChange={handledatachange} />
{
istUpdate? (
<>
<Schaltfläche onClick={handlesubmitchange} type = "einreichen">Aktualisieren</button>
<Schaltfläche onClick={() => { setisUpdate (falsch); setDetail("")}}>
X
</button>
</>
): (<Schaltfläche onClick={submithandler} type="einreichen">Speichern</button>)
}
</form>{info.map((Daten, Index)=>
<div key={ids[index]} className='Datencontainer' id='Datencontainer'>
<p Klassenname='Daten' id='Daten' Daten-ID ={IDs[Index]} Schlüssel={IDs[Index]}>{Daten}</P>
<Schaltfläche Klassenname='Löschen-Taste' id='Löschen-Button' onClick={handledelete}>
Löschen
</button><Schaltfläche Klassenname='Update-Button' id='Update-Button' onClick={handleupdate}>
Bearbeiten
</button>
</div>
)}
</div>
);
}
ExportStandard Anwendung;
Erstellen Sie als Nächstes einen Übermittlungshandler, um Daten in die Firestore-Datenbank zu schreiben. Das ist ein onSubmit Fall. Sie verwenden es also im Submit-Button.
Erstellen Sie außerdem einen Änderungshandler. Dieses Ereignis hört auf Änderungen im Formularfeld und übergibt die Eingabe an ein Array (die Detail Array in diesem Fall). Das geht in die Datenbank.
konst handledatachange = (e) => {
setDetail(e.Ziel.Wert)
};konst Submithandler = (e) => {
e.Standard verhindern()
const ref = Sammlung (Firestore, "Testdaten")lassen Daten = {
uuid: uuidv4(),
Testdaten: Detail
}versuchen {
addDoc (Referenz, Daten)
} fangen(irren) {
Konsole.log (fehler)
}
setDetail("")
}
Während Firebase Dokument-IDs automatisch generiert (sofern Sie dies nicht verhindern), dient das UUID-Feld auch als eindeutige Kennung für jedes Dokument.
Lesen Sie Daten aus der Firestore-Datenbank
Rufen Sie Daten aus der Firestore-Datenbank innerhalb der useEffect Hook mit der Firestore-Abfragemethode:
useEffect(() => {
konst getData = asynchron () => {
konst Daten = erwarten Abfrage (Sammlung (Firestore, "test_data"));onSnapshot (Daten, (AbfrageSnapshot) => {
konst DatenbankInfo = [];
konst dataIds = []querySnapshot.für jede((doc) => {
DatenbankInfo.drücken(Dok.Daten().Testdaten);
Daten-IDs.drücken(Dok.Ausweis)
});setIds (dataIds)
setInfo (DatenbankInfo)
});
}
Daten bekommen()
}, [])
Der obige Code verwendet die Firebase-Abfrage, um einen Snapshot der an Firestore übermittelten Daten zu erhalten onSnapshot Funktion.
Ein Snapshot ermöglicht es Ihrer App, auf Änderungen im Back-End zu hören. Es aktualisiert den Client jedes Mal automatisch, wenn jemand in die Datenbank schreibt.
Der setInfo state erfasst die Daten in jedem Dokument. Sie kartieren durch diese (die die Info array) beim Rendern in das DOM.
Der setIds state verfolgt alle Dokument-IDs (übergeben als IDs Reihe). Sie können jede ID verwenden, um die Lösch- und Aktualisierungsabfragen für jedes Dokument auszuführen. Sie können dann jede Dokument-ID als DOM-Attribut übergeben, während Sie die zuordnen die Info Reihe.
Hier ist die Zustandsverwendung innerhalb des DOM (wie im vorherigen Code-Snippet gezeigt):
Aktualisieren Sie vorhandene Daten in Firestore
Verwenden Sie die setDoc Methode zum Aktualisieren eines Dokuments oder eines Felds in einem Dokument.
Definieren Sie zwei Handler für die Aktualisierungsaktion. Einer behandelt die Schaltfläche zum Senden der bearbeiteten Daten (handlesubmitchange), während der andere für die Schaltfläche ist, die die Daten zur Bearbeitung in das Eingabefeld umschreibt (handleupdate):
konst handleupdate = (e) => {
setisUpdate(WAHR)
setDetail(e.Ziel.Elternknoten.Kinder[0].Textinhalt)
setdocId(e.Ziel.Elternknoten.Kinder[0].getAttribute(&Zitat;Daten-ID&Zitat;))
};konst handlesubmitchange = asynchron (e) => {
e.Standard verhindern()
const docRef = doc (Firestore, 'Testdaten', docId);konst aktualisierte Daten = erwarten {
Testdaten: Detail
};erwartensetDoc(docRef, Daten aktualisieren, { verschmelzen:WAHR })
.then (console.log("Daten erfolgreich geändert"))
setisUpdate(FALSCH)
setDetail("")
}
Wie im vorherigen Code-Snippet gezeigt, ist hier das DOM-Rendering für die Erstellungs- und Aktualisierungsaktionen:
Der handleupdate Die Funktion zielt auf jede Dokument-ID im DOM unter Verwendung ihres Knotenpfads ab. Es verwendet dies, um jedes Dokument aus der Datenbank abzufragen, damit es Änderungen vornimmt. Die Schaltfläche Bearbeiten verwendet diese Funktion.
So istUpdate (Verfolgt von der setisUpdate Zustand) zurück WAHR wenn ein Benutzer auf die Schaltfläche Bearbeiten klickt. Diese Aktion ruft die Schaltfläche „Aktualisieren“ auf, die die bearbeiteten Daten übermittelt, wenn ein Benutzer darauf klickt. Das Extra X Schaltfläche schließt die Bearbeitungsaktion, wenn sie angeklickt wird – nach Einstellung istUpdate Zu FALSCH.
Wenn istUpdate Ist FALSCH, behält das DOM stattdessen die anfängliche Schaltfläche Speichern bei.
Löschen Sie Daten aus Firestore
Sie können vorhandene Daten aus Firestore löschen, indem Sie die verwenden löschenDoc Methode. Rufen Sie wie bei der Update-Aktion jedes Dokument mit seiner eindeutigen ID ab, indem Sie sein DOM-Attribut über den Knotenpfad ansprechen:
konst handleelete = asynchron (e) => {
const docRef = doc (Firestore, 'Testdaten', e.target.parentNode.children[0].getAttribute("Daten-ID"));
erwarten deleteDoc (docRef)
.then(() => {
Konsole.Protokoll(`${e.target.parentNode.children[0].Textinhalt} wurde erfolgreich gelöscht.`)
})
.fangen(Fehler => {
Konsole.log (Fehler);
})
}
Übergeben Sie die obige Funktion an die Schaltfläche Löschen. Es entfernt die Daten aus der Datenbank und dem DOM, wenn ein Benutzer darauf klickt.
Koppeln Sie Firebase mit Ihrem besten Frontend-Framework
Firebase hilft Ihnen, weniger Code zu schreiben, während Sie Daten direkt von der Clientseite abfragen. Neben React unterstützt es andere JavaScript-Frameworks, darunter Angular.js, Vue.js und viele andere.
Nachdem Sie nun gesehen haben, wie es mit React funktioniert, möchten Sie vielleicht auch lernen, es mit Angular.js zu koppeln.
