Jak připojit aplikaci React k Firebase

Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti.

Podle průzkumu Stack Overflow z roku 2022 používá Firebase 21,14 procenta vývojářů, což z něj činí čtvrtou nejoblíbenější cloudovou platformu. Je to vyvíjející se technologie pro bezproblémovou integraci backendu.

S Firebase můžete vyvinout full-stack aplikaci bez psaní jediného řádku backendového kódu. Zjistěte, jak propojit svou aplikaci React.js s Firebase ještě dnes a stavět na cestách.

Nainstalujte balíček Firebase

Po vytvoření aplikace React, změňte adresář na kořenovou složku projektu a nainstalujte balíček Firebase spuštěním:

npm Nainstalujte firebase

Přidejte svou aplikaci React do projektu Firebase

Dalším krokem je vytvoření projektu Firebase a jeho propojení s vaší aplikací React. Přejít na konzole Firebase:

1. Klikněte Přidat projekt začít nový projekt Firebase.
2. Zadejte název projektu a poté klikněte Pokračovat.
3. Klikněte Pokračovat na další stránce.
4. Vyberte svůj účet Firebase z rozbalovací nabídky nebo klikněte na Vytvořit nový účet pokud ho ještě nemáte.
5. Nakonec klikněte Vytvořit projekt.
6. Klikněte Pokračovat jakmile je proces dokončen.
7. Dále klikněte na ikonu Web () v levém horním rohu následující stránky a nastavte Firebase pro web.
8. Do poskytnutého pole zadejte přezdívku pro vaši aplikaci. Pak klikněte Registrovat aplikaci.
9. Zkopírujte vygenerovaný kód a uschovejte jej pro následující krok (popsaný v následující části).
10. Klikněte Pokračujte do konzole.
11. Na následující stránce je mnoho možností. Přejděte dolů a vyberte Cloud Firestore protože v tomto případě potřebujete pouze nastavit databázi.
12. Dále klikněte Vytvořit databázi.
13. Klikněte další. Z rozbalovací nabídky vyberte preferované umístění Firestore.
14. Pak klikněte Umožnit k vytvoření databáze Firestore.

Inicializujte Firebase ve své aplikaci React

Vytvořte novou složku v projektu src adresář. Můžete to nazvat firebase_setup. Dále vytvořte a firebase.js soubor v této složce. Poté do tohoto souboru vložte kód vygenerovaný dříve.

Prozatím můžete uložit konfigurační objekt (firebaseConfig) uvnitř a .env soubor. Zvažte však použití bezpečnějšího způsob, jak maskovat tajemství React ve výrobě. Data, která ukládáte do a .env soubor může snadno uniknout v sestavení vaší aplikace.

Chcete-li například zadat tajný klíč Firebase své aplikace do .env soubor:

REACT_APP_apiKey = yourFirebaseAccessKey

Vygenerovaný kód tedy můžete doladit následovně:

import { initializeApp } z "firebase/app";
import { getFirestore } z "@firebase/firestore"
konst firebaseConfig = {
apiKey: proces.env.REACT_APP_apiKey,
authDomain: proces.env.REACT_APP_authDomain,
projectId: proces.env.REACT_APP_projectId,
úložný kbelík: proces.env.REACT_APP_storageBucket,
messagingSenderId: proces.env.REACT_APP_messagingSenderId,
appId: proces.env.REACT_APP_appId,
ID měření: proces.env.REACT_APP_measurementId
};
konst app = initializeApp (firebaseConfig);
vývozníkonst firestore = getFirestore (aplikace)

Otestujte své připojení k Firebase

Připojení můžete otestovat odesláním fiktivních dat do Firestore. Začněte vytvořením a kliky složka uvnitř vašeho projektu src adresář. V tomto souboru vytvořte obslužnou rutinu odeslání. Můžete to nazvat handlesubmit.js, například:

import { addDoc, kolekce } z "@firebase/firestore"
import { ohniště } z "../firebase_setup/firebase"
konst handleSubmit = (testdata) => {
konst ref = kolekce (firestore, "test_data") // Firebase to vytvoří automaticky
nechat data = {
 testData: testdata
 }
Snaž se {
 addDoc (ref, data)
 } chytit(chyba) {
řídicí panel.log (chyba)
 }
}
vývoznívýchozí handleSubmit

Pak dovnitř App.js:

import './App.css';
import handleSubmit z './handles/handlesubmit';
import { useRef } z 'reagovat';
funkceAplikace() {
konst dataRef = useRef()
konst Sendhandler = (e) => {
E.preventDefault()
handleSubmit(dataRef.aktuální.hodnota)
 dataRef.current.value = ""
 }
vrátit se (
<div název_třídy="Aplikace">
<form onSubmit={submithandler}>
<typ vstupu= "text" ref={dataRef} />
<typ tlačítka = "Předložit">Uložit</button>
</form>
</div>
 );
}
vývoznívýchozí Aplikace;

Spusťte aplikaci React a zkuste odeslat data prostřednictvím formuláře. Chcete-li zobrazit odeslané informace ve vaší sbírce, aktualizujte konzolu databáze Firebase. Se základy na místě můžete prozkoumat mnoho dalších co Firebase umí abyste viděli, jak jej nejlépe používat.

Stavte na cestách s Firebase a React

Firebase je všestranné řešení typu backend-as-a-service, které vám umožňuje efektivně škálovat vaši aplikaci. Jakmile připojíte svou aplikaci React, můžete využít jejích mnoha funkcí a vytvořit si web podle svých představ.

Jednou z funkcí, které byste mohli chtít prozkoumat, je například sada nástrojů pro ověřování Firebase.