React + Firebase

Dette eksempel viser hvordan man kan integrere Firebase Firestore i en react app. Det tager udgangspunkt i samme simple eksempel, som blev brugt i hotdog demoen. Dog vil vi her nøjes med at læse data fra Firestore.

Eksemplet bygger videre på den app der blev oprettet i React intro, og udvidet i Components + Data.

Installation af Firebase

For at kunne benytte funktionaliteter fra firebase i vores react app, er det nødvendigt at installere firebase SDK. Dette kan klares med følgende kommando, som henter pakken fra npm og tilføjer den til package.json, så vi har styr på projektets afhængigheder.

npm install firebase --save

Konfiguration af Firebase

Til dette eksempel er det ikke nødvendigt at oprette en ny firebase app, da den bruge samme Firestore database som denne demonstrationen fra tidligere. Det er dog stadig nødvendigt at konfigurere firebase SDK til at kommunikere med den ønskede backend.

For at kunne benytte firebase på en nem måde i flere forskellige komponenter laves opsætning af og initialisering af firebase SDK i filen src/lib/Firebase.js, som så kan importeres af de komponenter der skal bruge firebase.

import firebase from "firebase/app";
import "firebase/firestore";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_FIREBASE_APP_NAME.firebaseapp.com",
  databaseURL: "https://YOUR_FIREBASE_APP_NAME.firebaseio.com",
  projectId: "YOUR_FIREBASE_APP_NAME",
  storageBucket: "YOUR_FIREBASE_APP_NAME.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

export default firebase;

De konkrete settings, der skal bruges i dit projekt, finder du i firebase konsollen ved at gå ind i den app du vil bruge som backend. Åben derefter “Settings” og “General”. Måske skal der oprettes et web endpoint, hvis du ikke allerede har gjort det. For yderligere forklaringer kan denne intro sikkert bruges.

Læs fra Firestore

Nu er fundament på plads, så det er tid til at lave en react komponent, der henter data fra Firestore. Det gøres i filen src/components/Hotdog.js, og koden er som vist herunder.

import React, { useEffect, useState } from "react";

// import the firebase configuration settings
import firebase from "../lib/Firebase";

// initialize firestore
const firestore = firebase.firestore();

const docRef = firestore.doc("samples/sandwichData");

function Hotdog() {

  const thingToDoWhithDocumentData = doc => {
    if (doc && doc.exists) {
      const myData = doc.data();
      setHotdogStatus(myData.hotdogStatus);
    }
  };

  const getRealtimeUpdates = () => {
    docRef.onSnapshot(thingToDoWhithDocumentData);
  };

  const [hotdogStatus, setHotdogStatus] = useState("");

  useEffect(() => {
    // subscribe to realtime updates when component loads or updates
    getRealtimeUpdates();
  });

  return (
    <div className="hotdog-status">
      <b>Breaking News</b>
      <h1>Hotdog status: <span>{hotdogStatus}</span></h1>
    </div>
  );
}

export default Hotdog;

Derefter mangler vi blot at indsætte Hotdog i App komponenten, så src/App.js nu ser således ud:

import React from 'react';
import './App.css';

import Clock from './components/Clock'
import Highscore from './components/Highscore';
import Hotdog from './components/Hotdog';

function App() {
  return (
    <div className="App">
      <Clock />
      <Hotdog />
      <Highscore />
    </div>
  );
}

export default App;

Vi tilføjer en smule css i src/App.css for at fremhæve den vigtige information om hotdogs.

.App {
  padding: 1em;
}

table {
  border-collapse: collapse;
  width: 30em;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {
  background-color: #f5f5f5;
}

.hotdog-status {
  display: inline-block;
  margin-top: 1em;
  padding: 1em;
  background-color: yellow;
  border-radius: .5em;
  -webkit-box-shadow: 8px 13px 16px 0px rgba(0, 0, 0, 0.85);
  -moz-box-shadow: 8px 13px 16px 0px rgba(0, 0, 0, 0.85);
  box-shadow: 8px 13px 16px 0px rgba(0, 0, 0, 0.85);
}

App Demo med Hotdog Status

Den kørende app burde nu ligne noget i stil med det der er vist på figuren herunder.

Screenshot af den kørende react app.

Materiale