Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską.
Korzystając z połączenia React i Firebase, możesz tworzyć super responsywne aplikacje. Jeśli jesteś już zaznajomiony z Reactem, nauczenie się integracji Firebase to doskonały kolejny krok.
Aby zrozumieć podstawy obsługi danych w Firebase, powinieneś dowiedzieć się, jak sparować bazę danych Firestore z React, aby zbudować aplikację CRUD. Korzystając z tej wiedzy, możesz zacząć tworzyć skalowalne aplikacje z pełnym stosem z niewielkim lub zerowym kodem zaplecza.
Połącz swoją aplikację React z Firebase Firestore
Jeśli jeszcze tego nie zrobiłeś, przejdź do konsoli Firebase i połącz Firestore ze swoim projektem React.
Proces jest łatwy, jeśli już to zrobiłeś stworzyłeś swoją aplikację React.
Następnie zrób nowy firebase_setup katalog wewnątrz twojego projektu źródło teczka. Stwórz firebase.js plik w tym folderze. Wklej kod konfiguracyjny, który otrzymasz podczas tworzenia projektu Firebase, w nowym pliku:
import {inicjalizujaplikację} z „baza ogniowa/aplikacja”;
import {getFirestore} z "@firebase/firestore"konst FirebaseConfig = {
Klucz API: proces.env.REACT_APP_apiKey,
authDomain: proces.env.REACT_APP_authDomain,
identyfikator projektu: proces.env.REACT_APP_identyfikator projektu,
magazynowanieWiadro: proces.env.REACT_APP_storageBucket,
przesyłanie wiadomościSenderId: proces.env.REACT_APP_messagingIdentyfikator nadawcy,
identyfikator aplikacji: proces.env.REACT_APP_identyfikator aplikacji,
identyfikator pomiaru: proces.env.REACT_APP_identyfikator pomiaru
};
konst aplikacja = zainicjuj aplikację (firebaseConfig);
eksportkonst firestore = getFirestore (aplikacja)
The remiza zmienna przechowuje twoje środowisko Firebase Firestore. Będziesz go używać w całej aplikacji podczas wysyłania żądań API.
Chociaż ten kod używa metody .env do maskowania informacji o konfiguracji, istnieją lepsze metody sposoby przechowywania sekretów w React.
Teraz zainstaluj baza ogniowa I uuid biblioteki w Twojej aplikacji React. Chociaż identyfikator uuid jest opcjonalny, możesz go użyć jako unikalnego identyfikatora dla każdego dokumentu opublikowanego w bazie danych Firestore.
np zainstalować baza ogniowa uuid
Oto demonstracja tego, co zamierzasz zbudować za pomocą React i Firestore:
Zapisz dane w bazie danych Firestore
Możesz użyć ustawDoc Lub dodajDoc metoda dodawania dokumentów do Firebase. The dodajDoc Metoda ma tę zaletę, że instruuje Firebase, aby wygenerowała unikalny identyfikator dla każdego rekordu.
Aby rozpocząć, zaimportuj następujące zależności do App.js:
import './App.css';
import { efekt użycia, stan użycia } z 'reagować';
import { addDoc, kolekcja, setDoc, deleteDoc, doc, zapytanie, onSnapshot} z „baza ogniowa/magazyn ogniowy”;
import { remiza} z './firebase_setup/firebase';
import { v4 Jak uuidv4 } z 'identyfikator użytkownika';
Zanim przejdziesz dalej, przyjrzyj się strukturze DOM i stanom używanym w tym samouczku:
funkcjonowaćAplikacja() {
konst [info, setInfo] = useState([])
konst [isUpdate, setisUpdate] = useState(FAŁSZ)
const [IdentyfikatorDokumentu, UstawIdDokumentu] = StanUżyj("")
const [szczegół, zestawSzczegół] = useState("")
konst [ids, setIds] = useState([])powrót (
<div nazwa klasy ="Aplikacja">
<formularz>
<typ wejścia= "tekst" value={detail} onChange={handledatachange} />
{
isUpdate? (
<>
<button onClick={handlesubmitchange} typ = "składać">Aktualizacja</button>
<przycisk onClick={() => { setisUpdate (fałsz); zestawSzczegóły("")}}>
X
</button>
</>
): (<button onClick={submithandler} type="składać">Ratować</button>)
}
</form>{info.map((dane, indeks)=>
<klucz div={identyfikatory[indeks]} nazwa_klasy='kontener danych' identyfikator='kontener danych'>
<p nazwa klasy ='dane' identyfikator='dane' identyfikator-danych ={identyfikatory[indeks]} klucz={identyfikatory[indeks]}>{dane}</P>
<nazwa klasy przycisku ='przycisk usuwania' identyfikator='przycisk-usuń' onClick={usuwane uchwyty}>
Usuwać
</button><nazwa klasy przycisku ='przycisk aktualizacji' identyfikator='przycisk aktualizacji' onClick={aktualizacja uchwytu}>
Edytować
</button>
</div>
)}
</div>
);
}
eksportdomyślny Aplikacja;
Następnie utwórz moduł obsługi przesyłania, aby zapisywać dane w bazie danych Firestore. To jest w dniu Prześlij wydarzenie. Więc użyjesz go w przycisku przesyłania.
Dodatkowo utwórz program obsługi zmian. To zdarzenie nasłuchuje zmian w polu formularza i przekazuje dane wejściowe do tablicy ( Szczegół tablica w tym przypadku). To trafia do bazy danych.
konst obsługiwana zmiana danych = (e) => {
zestawSzczegóły(mi.cel.wartość)
};konst program obsługi przesyłania = (e) => {
mi.preventDefault()
const ref = kolekcja (magazyn ognia, "dane testowe")pozwalać dane = {
uuid: uuidv4(),
dane testowe: szczegóły
}próbować {
addDoc (odnośnik, dane)
} złapać(błąd) {
konsola.log (błąd)
}
zestawSzczegóły("")
}
Podczas gdy Firebase automatycznie generuje identyfikatory dokumentów (chyba że temu zapobiegniesz), pole UUID służy również jako unikalny identyfikator dla każdego dokumentu.
Odczyt danych z bazy danych Firestore
Pobierz dane z bazy danych Firestore w ramach UżyjEfekt hook przy użyciu metody zapytania Firestore:
użyjEfektu(() => {
konst pobierz dane = asynchroniczny () => {
konst dane = czekać na zapytanie (kolekcja (firestore, "test_data"));onSnapshot (dane, (zapytanieSnapshot) => {
konst Informacje o bazie danych = [];
konst identyfikatory danych = []zapytanieMigawka.dla każdego((doc) => {
Informacje o bazie danych.naciskać(doktor.dane().dane testowe);
identyfikatory danych.naciskać(doktor.ID)
});setIds (identyfikatory danych)
setInfo (informacje o bazie danych)
});
}
otrzymać dane()
}, [])
Powyższy kod używa zapytania Firebase, aby uzyskać migawkę danych przesłanych do Firestore za pomocą onSnapshot funkcjonować.
Migawka umożliwia Twojej aplikacji nasłuchiwanie zmian w zapleczu. Aktualizuje klienta automatycznie za każdym razem, gdy ktoś zapisuje do bazy danych.
The ustaw informacje state pobiera dane z każdego dokumentu. Zmapujesz to (tzw informacje array) podczas renderowania do DOM.
The ustawić identyfikatory state śledzi wszystkie identyfikatory dokumentów (przekazywane jako Identyfikatory szyk). Możesz użyć każdego identyfikatora, aby uruchomić zapytania Usuń i Aktualizuj dla każdego dokumentu. Następnie możesz przekazać każdy identyfikator dokumentu jako atrybut DOM podczas mapowania przez informacje szyk.
Oto użycie stanu w DOM (jak pokazano w poprzednim fragmencie kodu):
Zaktualizuj istniejące dane w Firestore
Użyj ustawDoc metoda aktualizacji dokumentu lub pola w dokumencie.
Zdefiniuj dwa programy obsługi dla akcji aktualizacji. Jeden obsługuje przycisk przesyłania dla edytowanych danych (uchwytprześlijzmianę), a drugi przycisk, który przepisuje dane do pola wprowadzania w celu edycji (aktualizacja uchwytu):
konst uchwyt aktualizacji = (e) => {
setisUpdate(PRAWDA)
zestawSzczegóły(mi.cel.rodzicWęzeł.dzieci[0].textContent)
setdocId(mi.cel.rodzicWęzeł.dzieci[0].getAttribute(&cyt;identyfikator danych&cyt;))
};konst zmiana uchwytu wysyłania = asynchroniczny (e) => {
mi.preventDefault()
const docRef = doc (firestore, 'dane testowe', identyfikator dokumentu);konst zaktualizowane dane = czekać na {
dane testowe: szczegóły
};czekać naustawDoc(docRef, Uaktualnij dane, { łączyć:PRAWDA })
.następnie (console.log("Dane zostały pomyślnie zmienione"))
setisUpdate(FAŁSZ)
zestawSzczegóły("")
}
Jak pokazano w poprzednim fragmencie kodu, oto renderowanie modelu DOM dla akcji tworzenia i aktualizacji:
The aktualizacja uchwytu funkcja celuje w każdy identyfikator dokumentu w DOM, używając jego ścieżki do węzła. Wykorzystuje to do wysyłania zapytań do każdego dokumentu z bazy danych w celu wprowadzenia zmian. Przycisk Edytuj używa tej funkcji.
Więc isUpdate (śledzone przez setisUpdate stan) powraca PRAWDA gdy użytkownik kliknie przycisk Edytuj. Ta czynność powoduje wyświetlenie przycisku Aktualizuj, który przesyła edytowane dane po kliknięciu go przez użytkownika. Statysta X przycisk zamyka akcję edycji po kliknięciu — przez ustawienie isUpdate Do FAŁSZ.
Jeśli isUpdate Jest FAŁSZ, zamiast tego DOM zachowuje początkowy przycisk Zapisz.
Usuń dane z Firestore
Możesz usunąć istniejące dane z Firestore za pomocą usuńDoc metoda. Podobnie jak w przypadku akcji Aktualizuj, pobierz każdy dokument, używając jego unikalnego identyfikatora, kierując jego atrybut DOM za pomocą ścieżki węzła:
konst obsługiwane usuwanie = asynchroniczny (e) => {
const docRef = doc (firestore, 'dane testowe', e.target.parentNode.children[0].getAttribute("identyfikator danych"));
czekać na usuńDoc (docRef)
.to(() => {
konsola.dziennik(`${e.target.parentNode.children[0].textContent} został pomyślnie usunięty.`)
})
.złapać(błąd => {
konsola.log (błąd);
})
}
Przekaż powyższą funkcję do przycisku Usuń. Usuwa dane z bazy danych i DOM, gdy użytkownik je kliknie.
Połącz Firebase z najlepszym frameworkiem frontendowym
Firebase pomaga pisać mniej kodu podczas wysyłania zapytań do danych bezpośrednio po stronie klienta. Oprócz React obsługuje inne frameworki JavaScript, w tym Angular.js, Vue.js i wiele innych.
Teraz, gdy już wiesz, jak to działa z Reactem, możesz chcieć nauczyć się łączyć go z Angular.js.
