Einführung in Firebase und React

Schauen wir uns an, wie wir etwas mit Firebase und React erstellen können. Wir werden etwas namens Fun Food Friends bauen, eine Webanwendung zum Planen Ihres nächsten Potluck, die sich hoffentlich eher wie etwas „aus der realen Welt“ anfühlt, in dem Sinne, dass Sie sich vorstellen können, diese Technologien in Ihren eigenen Produktionsprojekten zu verwenden. Die Hauptidee dieser App ist, dass Sie und Ihre Freunde sich anmelden und Informationen darüber sehen und posten können, was Sie zum Potluck mitbringen möchten.

Wenn wir fertig sind, wird es so aussehen

Dieser Artikel setzt voraus, dass Sie bereits über grundlegende Kenntnisse der Funktionsweise von React verfügen und vielleicht ein paar kleine Apps mit React erstellt haben. Wenn nicht, empfehle ich Ihnen, sich zuerst eine Serie wie Wes Bos' React for Beginners anzusehen, bevor Sie fortfahren.

Was ist Firebase?

Googles Firebase ist ein Cloud-basierter Datenbank-Hosting-Service, der Ihnen eine Datenbank einrichtet und hostet, sowie Tools zur Interaktion damit anbietet. Sie können ihn verwenden, um Daten in Echtzeit zu speichern und abzurufen. Das ist nicht alles, was Firebase kann; es kann mehr, wie Benutzerauthentifizierung und das Speichern von Dateien, aber wir konzentrieren uns hauptsächlich auf die Datenspeicherung.

Die Datenspeicherungsfähigkeit von Firebase macht es zu einer perfekten Ergänzung für React. Ein persistentes Echtzeit-Backend, in das sich Ihre Anwendung einklinken kann!

Wie speichert Firebase Daten?

Firebase speichert Daten als ein riesiges Objekt mit Schlüssel-Wert-Paaren. Im Gegensatz zu JSON- oder JavaScript-Objekten gibt es in Firebase keine Arrays.

Eine Firebase-Datenbank könnte etwa so aussehen

{
      "groceries": {
        "-KjQTqG3R2dPT8s2jylW": "tomato",
        "-KjQTrds1feHT3GH_29o": "pasta",
        "-KjQTsmfBR8zN1SwPPT8": "milk",
        "-KjQTtnzt_jJZPoCHWUM": "sugar"
      },
      "users": {
        "name": {
          "-KjQTyIfKFEVMYJRZ09X": "simon",
          "-KjQU-Xuy5s7I-On9rYP": "ryan",
          "-KjQU0MYVeKRsLuIQCYX": "sylvia"
        }
      }
}

Für weitere Informationen über die Feinheiten der Datenstrukturierung in Firebase können Sie die großartige Firebase-Dokumentation lesen.

Bereit zu starten? Legen wir los!

Erste Schritte: Einrichten unserer App

Wir beginnen mit dem unglaublich praktischen `create-react-app`-Paket, um schnell ein neues React-Projekt einzurichten, ohne uns um Build-Konfigurationen kümmern zu müssen. Öffnen Sie Ihre Kommandozeile und geben Sie Folgendes ein

npm install -g create-react-app
    
create-react-app fun-food-friends
cd fun-food-friends
yarn add firebase --dev
yarn start

Dies startet Ihre App im Browser und startet einen Watch-Task in Ihrem Terminal, damit wir mit der Arbeit am Projekt beginnen können. Wir installieren hier auch das `firebase`-Paket, da wir es für den nächsten Schritt benötigen werden.

Erstellen unserer Firebase-Datenbank

Nun, da unsere App eingerichtet ist, müssen wir ein Konto und eine Datenbank bei Firebase erstellen, damit wir unsere Anwendung damit verknüpfen können.

Gehen Sie zu Firebase's Website und klicken Sie auf Los geht's.

Dies führt Sie zu einer Seite, auf der Sie aufgefordert werden, sich mit Ihrem Google-Konto zu authentifizieren. Wählen Sie das Konto aus, mit dem dieses Projekt verknüpft sein soll, und drücken Sie OK.

Dies sollte Sie zur Firebase-Konsole führen, die etwa so aussieht

Erstellen wir nun die Datenbank unseres Projekts. Klicken Sie auf Projekt hinzufügen. Nennen wir sie „fun-food-friends“ und drücken Sie OK.

Dies führt Sie zum Dashboard Ihrer App, das so aussieht

Da wir eine Web-App erstellen werden, wählen Sie Firebase zu Ihrer Web-App hinzufügen. Dies löst ein Popup mit Code aus, das etwa so aussieht

<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
     apiKey: "AIzaSyDblTESEB1SbAVkpy2q39DI2OHphL2-Jxw",
    authDomain: "fun-food-friends-eeec7.firebaseapp.com",
    databaseURL: "https://fun-food-friends-eeec7.firebaseio.com",
    projectId: "fun-food-friends-eeec7",
    storageBucket: "fun-food-friends-eeec7.appspot.com",
    messagingSenderId: "144750278413"
  };
  firebase.initializeApp(config);
</script>

Da wir Firebase über ES6-Module in unser Projekt importieren werden, benötigen wir diese Script-Tags nicht. Dieses config-Objekt ist jedoch wichtig: Es ist die Art und Weise, wie wir unsere React-Anwendung mit unserer Firebase-Datenbank authentifizieren.

Verknüpfen unserer App mit Firebase

Kopieren Sie dieses gesamte Konfigurationsobjekt und kehren Sie zu Ihrem React-Projekt zurück. Finden Sie Ihren `src`-Ordner und erstellen Sie eine Datei namens `firebase.js`. Importieren Sie darin Firebase, unsere Konfiguration und initialisieren Sie unsere App

// src/firebase.js
import firebase from 'firebase'
const config = {
    apiKey: "AIzaSyDblTESEB1SbAVkpy2q39DI2OHphL2-Jxw",
    authDomain: "fun-food-friends-eeec7.firebaseapp.com",
    databaseURL: "https://fun-food-friends-eeec7.firebaseio.com",
    projectId: "fun-food-friends-eeec7",
    storageBucket: "fun-food-friends-eeec7.appspot.com",
    messagingSenderId: "144750278413"
};
firebase.initializeApp(config);
export default firebase;

Eine letzte Sache, die wir tun müssen, bevor wir mit dem Entwurf unserer App beginnen können. Wir müssen die Authentifizierungsanforderungen unserer App vorübergehend deaktivieren, damit wir Elemente hinzufügen und entfernen können, ohne einen Benutzerauthentifizierungsablauf zu benötigen.

Im Firebase-Dashboard sehen Sie auf der linken Seite einen Datenbank-Tab. Klicken Sie darauf. Dann sehen Sie auf der rechten Seite unter der Unterüberschrift Echtzeitdatenbank einen Tab Regeln. Dies bewirkt, dass ein Objekt erscheint, das etwa so aussieht

{
    "rules": {
      ".read": "auth != null",
      ".write": "auth != null"
    }
}

Wir müssen .read und .write beide auf true setzen, sonst lässt Firebase uns später nicht zu, wenn wir versuchen, Daten aus unserer Anwendung in unsere Datenbank einzufügen. Wenn Sie fertig sind, sollte es etwa so aussehen

Vergessen Sie nicht, auf die Schaltfläche Veröffentlichen zu klicken.

Und das war's schon mit der Verknüpfung unserer Datenbank! Jedes Mal, wenn wir eine Komponente unserer Anwendung benötigen, um sich mit unserer Firebase-Datenbank zu verbinden, müssen wir einfach unser Firebase-Modul importieren und wir haben einen direkten Verweis darauf.

Erstellen des groben Skeletts unserer App

Erstellen wir ein grobes HTML-Skelett für unsere Anwendung. Wir erstellen ein einfaches Formular mit zwei Eingabefeldern

1. Ein Feld, in dem der Benutzer seinen Namen eingeben kann
2. Ein Feld, in dem der Benutzer eingeben kann, welches Essen er zum Potluck mitbringt.

Da unsere App recht einfach ist, behalten wir alles in einer Hauptkomponente, `App.js`. Öffnen Sie `src/App.js`, entfernen Sie die `App`-Komponente und ersetzen Sie sie durch dieses einfache Skelett

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className='app'>
        <header>
            <div className='wrapper'>
              <h1>Fun Food Friends</h1>
              
            </div>
        </header>
        <div className='container'>
          <section className='add-item'>
              <form>
                <input type="text" name="username" placeholder="What's your name?" />
                <input type="text" name="currentItem" placeholder="What are you bringing?" />
                <button>Add Item</button>
              </form>
          </section>
          <section className='display-item'>
            <div className='wrapper'>
              <ul>
              </ul>
            </div>
          </section>
        </div>
      </div>
    );
  }
}
export default App;

CSS holen

Ich habe ein wenig CSS vorbereitet, das Sie in die Datei `App.css` einfügen können, damit unsere App nicht völlig langweilig aussieht. Wenn Sie es haben möchten, gehen Sie einfach hierhin und kopieren Sie den rohen Inhalt, den Sie dort finden, in Ihre Datei `src/App.css`!

Wir müssen auch einen Link zu Google Fonts und Font Awesome einbetten. Öffnen Sie also `public/index.html` und fügen Sie die folgenden Zeilen unter dem Favicon hinzu

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

<!-- add the lines below -->

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  

An diesem Punkt sollte Ihre App so aussehen

Verbinden unseres Formulars mit dem Komponentenzustand

Bevor wir Daten in unsere Firebase-Datenbank einfügen können, müssen wir unsere Eingabefelder mit dem Zustand unserer Komponente verbinden, damit React sie verfolgen kann.

Zuerst schaffen wir etwas Platz im Zustand unserer Komponente – einen Platz, um den Benutzer unserer App (username) und den Artikel, den er mitbringen möchte (currentItem), zu verfolgen. Dies tun wir, indem wir einen constructor()-Hook für unsere App erstellen und dort einen Standardwert für den Zustand unserer Eingabefelder festlegen

class App extends Component {
  constructor() {
    super();
    this.state = {
      currentItem: '',
      username: ''
    }
  }
  // ....

Wir werden onChange-Ereignis-Handler zu unseren Eingabefeldern hinzufügen und ihnen auch einen von unserem Zustand abgeleiteten Wert geben (dies nennt man ein „kontrolliertes Eingabefeld“), wie folgt

<section className="add-item">
  <form>
    <input type="text" name="username" placeholder="What's your name?" onChange={this.handleChange} value={this.state.username} />
    <input type="text" name="currentItem" placeholder="What are you bringing?" onChange={this.handleChange} value={this.state.currentItem} />
    <button>Add Item</button>
  </form>
</section>

Und schließlich erstellen wir eine Allzweckmethode handleChange, die das Ereignis von unseren Eingabefeldern empfängt und den entsprechenden Zustand dieses Eingabefeldes aktualisiert

handleChange(e) {
  this.setState({
    [e.target.name]: e.target.value
  });
}

Wenn Sie mit der Verwendung von Klammern zur dynamischen Bestimmung des Schlüsselnamens in einem Objektliteral nicht vertraut sind, lesen Sie die MDN-Dokumentation zu berechneten Eigenschaften.

Da wir ES6-Klassen verwenden und Zugriff auf this in unserer handleChange-Methode benötigen, müssen wir sie auch in unserem constructor()-Komponente zurückbinden, wie folgt

constructor() {
  super();
  this.state = {
    username: '',
    currentItem: ''
  }
  this.handleChange = this.handleChange.bind(this);
}

Wenn Sie nun die React DevTools verwenden, um den Zustand Ihrer App-Komponente zu inspizieren, sehen Sie, dass beide Eingabefelder nun erfolgreich verbunden sind und in Ihrem Komponentenzustand verfolgt werden

Hinzufügen eines neuen Potluck-Elements zu Ihrer Datenbank

Nachdem wir nun unsere Eingabefelder verfolgen, machen wir es möglich, dass wir ein neues Element zu unserer Datenbank hinzufügen können, damit Firebase es verfolgen kann.

Zuerst müssen wir uns mit Firebase verbinden. Dazu importieren wir unser zuvor erstelltes firebase-Modul. Wir löschen auch den Import von logo.svg, da er nur ein unnötiger Teil des Create-React-App-Boilerplates ist und Warnungen verursacht, wenn wir ihn nicht entfernen

import React, { Component } from 'react';
import logo from './logo.svg'; // <--- remove this line
import './App.css';
import firebase from './firebase.js'; // <--- add this line

Sobald das erledigt ist, müssen wir sicherstellen, dass unsere „Element hinzufügen“-Schaltfläche Firebase mitteilt, was wir zu unserer Datenbank hinzufügen möchten und wohin wir es legen möchten.

Zuerst fügen wir einen Submit-Ereignis-Listener für das Formular hinzu und lassen ihn eine handleSubmit-Methode aufrufen, die wir gleich schreiben werden

<form onSubmit={this.handleSubmit}>
  <input type="text" name="username" placeholder="What's your name?" onChange={this.handleChange} value={this.state.username} />
  <input type="text" name="currentItem" placeholder="What are you bringing ?" onChange={this.handleChange} value={this.state.currentItem} />
  <button>Add Item</button>
</form>

Vergessen Sie nicht, ihn im Konstruktor zu binden!

constructor() {
  super();
  this.state = {
    currentItem: '',
    username: ''
  }
  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this); // <-- add this line
}

Und nun fügen Sie die handleSubmit-Methode zu Ihrer Komponente hinzu

handleSubmit(e) {
  e.preventDefault();
  const itemsRef = firebase.database().ref('items');
  const item = {
    title: this.state.currentItem,
    user: this.state.username
  }
  itemsRef.push(item);
  this.setState({
    currentItem: '',
    username: ''
  });
}

Lassen Sie uns aufschlüsseln, was hier passiert

• e.preventDefault() – wir müssen das Standardverhalten des Formulars verhindern, das, wenn wir es nicht tun, dazu führt, dass die Seite neu geladen wird, wenn Sie auf die Schaltfläche zum Absenden klicken.
• const itemsRef = firebase.database().ref('items'); – wir müssen einen Platz in unserer Firebase-Datenbank schaffen, an dem wir alle Elemente speichern möchten, die Leute zum Potluck mitbringen. Wir tun dies, indem wir die Methode ref aufrufen und den Speicherort übergeben, an dem sie gespeichert werden sollen (items).
• const item = { /* .. */ } Hier greifen wir auf das Element zu, das der Benutzer eingegeben hat (sowie seinen Benutzernamen) aus dem Zustand, und verpacken es in ein Objekt, damit wir es an unsere Firebase-Datenbank senden können.
• itemsRef.push(item) Ähnlich wie die Array.push-Methode sendet dies eine Kopie unseres Objekts, damit es in Firebase gespeichert werden kann.
• Schließlich this.setState({ currentItem: '', username: '' }); dient nur dazu, die Eingabefelder zu leeren, damit ein weiteres Element hinzugefügt werden kann.

Versuchen Sie nun, ein neues Element hinzuzufügen und auf Senden zu klicken! Wenn Sie keine Fehler in Ihrer Konsole haben, sollten Sie zum Firebase-Dashboard gehen können, wo Sie in Ihrem Datenbank-Tab etwas wie dieses sehen werden

Wenn Sie auf das kleine + neben items klicken, können Sie hineinschauen, wie folgt

Dieser seltsam aussehende -Kk8lHSMqC5oP6Qai0Vx-Schlüssel, den Sie sehen, ist ein programmgesteuert generierter Schlüssel, der von Firebase erstellt wurde, als wir die push-Methode aufgerufen haben, aber darin finden Sie das Element, das Sie zum Potluck hinzugefügt haben.

Sie werden feststellen, dass alle unsere Einträge als Objekte mit Eigenschaften gespeichert sind, die die oben genannten generierten Namen haben – eine weitere schnelle Erinnerung daran, dass es in Firebase keine Arrays gibt!

Versuchen Sie, weitere Elemente hinzuzufügen und sehen Sie, was passiert.

Gut gemacht! Wir sind fast am Ziel, aber wir haben noch einen Schritt: unsere Potluck-Elemente auf der Seite anzuzeigen.

Abrufen unserer Potluck-Elemente aus der Datenbank

Genau wie in einer herkömmlichen React-App müssen wir einen Weg finden, alle Potluck-Gerichte zu verfolgen, damit wir anzeigen können, was die Leute zum Mitbringen planen.

Ohne eine Datenbank stellt dies ein Problem dar, da bei jeder Aktualisierung der Seite alle neuen Gerichte, die dem Potluck hinzugefügt wurden, verloren gehen würden. Aber mit Firebase ist dies ein Kinderspiel zu beheben!

Zuerst erstellen wir eine Variable namens items im Standardzustand. Diese wird schließlich alle Potluck-Elemente enthalten, die derzeit in unserer Firebase-Datenbank verfolgt werden.

constructor() {
  super();
  this.state = {
    currentItem: '',
    username: '',
    items: []
  }
  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}

Als Nächstes müssen wir diese Elemente tatsächlich aus unserer Firebase-Datenbank abrufen, damit wir sie in unseren Zustand speichern können.

Die Firebase-API bietet uns eine unglaublich einfache Möglichkeit, nicht nur diese Art von Informationen aus unserer Datenbank abzurufen, sondern uns auch darüber zu informieren, wenn neue Werte zu unserer Datenbank hinzugefügt werden. Dies geschieht mithilfe des benutzerdefinierten Ereignis-Listeners value.

Es sieht so aus

itemsRef.on('value', (snapshot) => {
  console.log(snapshot.val());
});

Der Callback hier, den wir snapshot genannt haben, bietet Ihnen einen Überblick über die items-Referenz in Ihrer Datenbank. Von hier aus können Sie einfach eine Liste aller Eigenschaften innerhalb dieser items-Referenz abrufen, indem Sie die Methode .val() verwenden, die Sie auf dem Snapshot aufrufen können.

Dieser Wert wird automatisch bei zwei Gelegenheiten ausgelöst

1. Jedes Mal, wenn ein neues Element zu unserer items-Referenz in unserer Datenbank hinzugefügt oder entfernt wird
2. Das erste Mal, wenn der Ereignis-Listener angehängt wird

Dies macht ihn besonders nützlich, um zunächst eine Liste aller Elemente in unserer Datenbank abzurufen und dann zu verfolgen, wann neue Elemente hinzugefügt und entfernt werden.

Wir hängen diesen Ereignis-Listener in unserem componentDidMount an, damit wir mit der Verfolgung unserer Potluck-Elemente beginnen, sobald unsere Komponente auf der Seite geladen wird

componentDidMount() {
  const itemsRef = firebase.database().ref('items');
  itemsRef.on('value', (snapshot) => {
    let items = snapshot.val();
    let newState = [];
    for (let item in items) {
      newState.push({
        id: item,
        title: items[item].title,
        user: items[item].user
      });
    }
    this.setState({
      items: newState
    });
  });
}

Hier instanziieren wir ein neues Array und füllen es mit den Ergebnissen, die von unserem value-Listener zurückkommen. Wir durchlaufen mit for…in jeden Schlüssel und fügen das Ergebnis in ein Objekt in unserem newState-Array ein. Schließlich, sobald alle Schlüssel durchlaufen wurden (und somit alle Elemente aus unserer Datenbank abgerufen wurden), aktualisieren wir den Zustand mit dieser Liste von Elementen aus unserer Datenbank.

Inspizieren Sie Ihre App mit den React Dev Tools – Sie werden feststellen, dass Sie nun eine items-Eigenschaft in Ihrem Zustand haben, mit allen Elementen, die die Leute für Ihr Potluck eingereicht haben!

Anzeigen von Potluck-Elementen auf der Seite

Nun wollen wir diese Potluck-Elemente tatsächlich auf der Seite anzeigen lassen. Das ist relativ einfach, da wir nun eine Liste aller Elemente haben, die aus Firebase abgerufen und in unserem Zustand gespeichert werden. Wir durchlaufen sie einfach und geben die Ergebnisse auf der Seite aus, wie folgt

<section className='display-item'>
  <div className="wrapper">
    <ul>
      {this.state.items.map((item) => {
        return (
          <li key={item.id}>
            <h3>{item.title}</h3>
            <p>brought by: {item.user}</p>
          </li>
        )
      })}
    </ul>
  </div>
</section>

Versuchen Sie, ein neues Element über Ihr Formular hinzuzufügen. Sie werden feststellen, dass sofort ein neuer Listenpunkt auf der Seite erscheint!

Es ist keine Magie, Firebase's value-Ereignis wird ausgelöst, wenn Sie das neue Element in Ihre Datenbank pushen, und sendet einen neuen snapshot mit einer Liste aller aktuell in Ihrer Datenbank befindlichen Elemente zurück, was Ihre Komponente schließlich über ein setState aktualisiert, was ein erneutes Rendern auslöst und das neue Element auf der Seite anzeigt.

Aber wir schweifen ab. Es gibt noch einen Schritt! Wir müssen es so einrichten, dass wir ein Element von der Seite entfernen können.

Elemente von der Seite entfernen

Dafür müssen wir eine neue Methode in unserer Komponente erstellen: removeItem. Diese Methode muss den eindeutigen Schlüssel erhalten, der als Identifikator für jedes der Elemente in unserer Firebase-Datenbank dient.

Es ist sehr einfach und sieht so aus

removeItem(itemId) {
  const itemRef = firebase.database().ref(`/items/${itemId}`);
  itemRef.remove();
}

Hier rufen wir nicht alle Elemente ab, wie wir es zuvor beim Hinzufügen eines neuen Elements getan haben, sondern suchen stattdessen ein bestimmtes Element anhand seines Schlüssels (dieser seltsame –Kk8lHSMqC5oP6Qai0Vx-Schlüssel von zuvor). Wir können dann die remove-Methode von firebase.database() aufrufen, die es von der Seite entfernt.

Schließlich müssen wir eine Schaltfläche zu unserer Benutzeroberfläche hinzufügen mit einem onClick, das unsere removeItem-Methode aufruft und ihr den Schlüssel des Elements übergibt, wie folgt

{this.state.items.map((item) => {
    return (
      <li key={item.id}>
        <h3>{item.title}</h3>
        <p>brought by: {item.user}</p>
        <button onClick={() => this.removeItem(item.id)}>Remove Item</button>
      </li>
    )
  })
}

Und das war's schon! Genau wie unsere addItem-Methode aktualisieren sich unsere Benutzeroberfläche und unser Komponentenzustand automatisch, wenn ein Element aus der Datenbank entfernt wird.

So sollte unsere abgeschlossene `App.js` aussehen

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import firebase from './firebase.js';

class App extends Component {
  constructor() {
    super();
    this.state = {
      currentItem: '',
      username: '',
      items: []
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }
  handleSubmit(e) {
    e.preventDefault();
    const itemsRef = firebase.database().ref('items');
    const item = {
      title: this.state.currentItem,
      user: this.state.username
    }
    itemsRef.push(item);
    this.setState({
      currentItem: '',
      username: ''
    });
  }
  componentDidMount() {
    const itemsRef = firebase.database().ref('items');
    itemsRef.on('value', (snapshot) => {
      let items = snapshot.val();
      let newState = [];
      for (let item in items) {
        newState.push({
          id: item,
          title: items[item].title,
          user: items[item].user
        });
      }
      this.setState({
        items: newState
      });
    });
  }
  removeItem(itemId) {
    const itemRef = firebase.database().ref(`/items/${itemId}`);
    itemRef.remove();
  }
  render() {
    return (
      <div className='app'>
        <header>
            <div className="wrapper">
              <h1>Fun Food Friends</h1>
                             
            </div>
        </header>
        <div className='container'>
          <section className='add-item'>
                <form onSubmit={this.handleSubmit}>
                  <input type="text" name="username" placeholder="What's your name?" onChange={this.handleChange} value={this.state.username} />
                  <input type="text" name="currentItem" placeholder="What are you bringing?" onChange={this.handleChange} value={this.state.currentItem} />
                  <button>Add Item</button>
                </form>
          </section>
          <section className='display-item'>
              <div className="wrapper">
                <ul>
                  {this.state.items.map((item) => {
                    return (
                      <li key={item.id}>
                        <h3>{item.title}</h3>
                        <p>brought by: {item.user}
                          <button onClick={() => this.removeItem(item.id)}>Remove Item</button>
                        </p>
                      </li>
                    )
                  })}
                </ul>
              </div>
          </section>
        </div>
      </div>
    );
  }
}
export default App;

Fazit

Jetzt können Sie wirklich sehen, wie gut Firebase und React zusammenarbeiten. Firebase's Fähigkeit, Daten im laufenden Betrieb zu persistieren, gepaart mit dem Komponentenlebenszyklus von React, ermöglicht eine unglaublich einfache und leistungsstarke Möglichkeit, schnell einfache Anwendungen zu erstellen.

Dieser Artikel kratzt nur an der Oberfläche dessen, was die Firebase-API uns bieten kann. Zum Beispiel wäre es mit nur wenigen zusätzlichen Schritten (und vielleicht behandeln wir das in einem zukünftigen Artikel) unglaublich einfach, diese Anwendung zu erweitern, damit sich Benutzer anmelden und abmelden können, ein Anzeigebild neben dem von ihnen mitgebrachten Element haben können und nur ihre eigenen Elemente entfernen können.

Viel Spaß beim Firebasing!