So verbinden Sie Ihre React-App mit Firebase

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.

Laut der Stack Overflow-Umfrage von 2022 verwenden 21,14 Prozent der Entwickler Firebase, was es zur viertbeliebtesten Cloud-Plattform macht. Es handelt sich um eine sich entwickelnde Technologie zur nahtlosen Integration des Backends.

Mit Firebase können Sie eine Full-Stack-Anwendung entwickeln, ohne eine einzige Zeile Back-End-Code schreiben zu müssen. Erfahren Sie noch heute, wie Sie Ihre React.js-Anwendung mit Firebase verbinden und unterwegs entwickeln können.

Installieren Sie das Firebase-Paket

Nach Erstellung Ihrer React-App, wechseln Sie in das Stammverzeichnis Ihres Projekts und installieren Sie das Firebase-Paket, indem Sie Folgendes ausführen:

npm Installieren Feuerbasis

Fügen Sie Ihre React-App zu einem Firebase-Projekt hinzu

Der nächste Schritt besteht darin, ein Firebase-Projekt zu erstellen und es mit Ihrer React-App zu verknüpfen. Gehen Sie zum Firebase-Konsole:

1. Klicken Projekt hinzufügen um ein neues Firebase-Projekt zu starten.
2. Geben Sie einen Projektnamen ein und klicken Sie dann auf Weitermachen.
3. Klicken Weitermachen auf der nächsten Seite.
4. Wählen Sie Ihr Firebase-Konto aus der Dropdown-Liste aus oder klicken Sie darauf Ein neues Konto erstellen falls du noch keine hast.
5. Abschließend klicken Projekt erstellen.
6. Klicken Weitermachen sobald der Vorgang abgeschlossen ist.
7. Klicken Sie als Nächstes auf das Web-Symbol () oben links auf der folgenden Seite, um Firebase für das Web einzurichten.
8. Geben Sie einen Spitznamen für Ihre App in das bereitgestellte Feld ein. Dann klick App registrieren.
9. Kopieren Sie den generierten Code und bewahren Sie ihn für den folgenden Schritt auf (der im folgenden Abschnitt erläutert wird).
10. Klicken Fahren Sie mit der Konsole fort.
11. Auf der folgenden Seite gibt es viele Möglichkeiten. Scrollen Sie nach unten und wählen Sie aus Cloud-Firestore da Sie in diesem Fall nur eine Datenbank einrichten müssen.
12. Klicken Sie anschließend auf Datenbank erstellen.
13. Klicken Nächste. Wählen Sie Ihren bevorzugten Firestore-Standort aus der Dropdown-Liste aus.
14. Dann klick Ermöglichen um eine Firestore-Datenbank zu erstellen.

Initialisieren Sie Firebase in Ihrer React-App

Erstellen Sie einen neuen Ordner in Ihrem Projekt Quelle Verzeichnis. Sie können dies firebase_setup nennen. Als nächstes erstellen Sie eine firebase.js Datei in diesem Ordner. Fügen Sie dann den zuvor generierten Code in diese Datei ein.

Im Moment können Sie das Konfigurationsobjekt (firebaseConfig) in a speichern .env Datei. Aber erwägen Sie die Verwendung einer sichereren Möglichkeit, React-Geheimnisse zu maskieren in Produktion. Daten, die Sie in a speichern .env Datei kann leicht in Ihrem App-Build lecken.

Um beispielsweise den geheimen Firebase-Schlüssel Ihrer App in die .env Datei:

REACT_APP_apiKey = IhrFirebaseAccessKey

So können Sie den generierten Code wie folgt verfeinern:

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)

Testen Sie Ihre Firebase-Verbindung

Sie können die Verbindung testen, indem Sie Dummy-Daten an Firestore senden. Beginnen Sie mit der Erstellung einer Griffe Ordner in Ihrem Projekt Quelle Verzeichnis. Erstellen Sie in dieser Datei einen Submit-Handler. Das kannst du nennen handlesubmit.js, zum Beispiel:

importieren { addDoc, Sammlung } aus "@firebase/firestore"
importieren { Feuerraum } aus "../firebase_setup/firebase"
konst handleSubmit = (testdaten) => {
konst ref = Sammlung (Firestore, "test_data") // Firebase erstellt dies automatisch
lassen Daten = {
 Testdaten: Testdaten
 }
versuchen {
 addDoc (Referenz, Daten)
 } fangen(irren) {
Konsole.log (fehler)
 }
}
ExportStandard handleSubmit

Dann drinnen App.js:

importieren './App.css';
importieren handleSubmit aus './handles/handlesubmit';
importieren { useRef } aus 'reagieren';
FunktionApp() {
konst dataRef = useRef()
konst Submithandler = (e) => {
e.Standard verhindern()
handleSubmit(DatenRef.aktuell.Wert)
 dataRef.aktueller.Wert = ""
 }
zurückkehren (
<div Klassenname="App">
<form onSubmit={submithandler}>
<Eingabetyp= "Text" ref={dataRef} />
<Schaltflächentyp = "einreichen">Speichern</button>
</form>
</div>
 );
}
ExportStandard Anwendung;

Führen Sie Ihre React-App aus und versuchen Sie, Daten über das Formular zu übermitteln. Aktualisieren Sie die Firebase-Datenbankkonsole, um die übermittelten Informationen in Ihrer Sammlung anzuzeigen. Wenn die Grundlagen vorhanden sind, können Sie viele andere erkunden Dinge, die Firebase tun kann um zu sehen, wie man es am besten verwendet.

Bauen Sie unterwegs mit Firebase und React

Firebase ist eine vielseitige Backend-as-a-Service-Lösung, mit der Sie Ihre App effektiv skalieren können. Sobald Sie Ihre React-App verbunden haben, können Sie ihre vielen Funktionen nutzen, um Ihre Website nach Ihren Wünschen zu erstellen.

Das Firebase-Authentifizierungs-Toolkit ist beispielsweise eine der Funktionen, die Sie vielleicht erkunden möchten.