Ako pripojiť aplikáciu React k Firebase

Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu.

Podľa prieskumu Stack Overflow z roku 2022 používa Firebase 21,14 percent vývojárov, čo z neho robí štvrtú najpopulárnejšiu cloudovú platformu. Je to vyvíjajúca sa technológia na bezproblémovú integráciu backendu.

S Firebase môžete vyvinúť kompletnú aplikáciu bez písania jediného riadku backendového kódu. Zistite, ako prepojiť svoju aplikáciu React.js s Firebase ešte dnes a stavať na cestách.

Nainštalujte balík Firebase

Po vytvorenie aplikácie React, zmeňte adresár na koreňový priečinok projektu a nainštalujte balík Firebase spustením:

npm Inštalácia firebase

Pridajte svoju aplikáciu React do projektu Firebase

Ďalším krokom je vytvorenie projektu Firebase a jeho prepojenie s aplikáciou React. Choďte na konzola Firebase:

1. Kliknite Pridať projekt začať nový projekt Firebase.
2. Zadajte názov projektu a potom kliknite ďalej.
3. Kliknite ďalej na ďalšej strane.
4. Vyberte svoj účet Firebase z rozbaľovacej ponuky alebo kliknite naň Vytvorte si nový účet ak ho ešte nemáte.
5. Nakoniec kliknite Vytvoriť projekt.
6. Kliknite ďalej po dokončení procesu.
7. Ďalej kliknite na ikonu Web () v ľavom hornom rohu nasledujúcej stránky a nastavte Firebase pre web.
8. Do poskytnutého poľa zadajte prezývku svojej aplikácie. Potom kliknite Zaregistrujte aplikáciu.
9. Skopírujte vygenerovaný kód a ponechajte si ho pre nasledujúci krok (o ktorom sa bude hovoriť v nasledujúcej časti).
10. Kliknite Pokračujte ku konzole.
11. Na nasledujúcej stránke je veľa možností. Prejdite nadol a vyberte Cloud Firestore pretože v tomto prípade potrebujete iba nastaviť databázu.
12. Ďalej kliknite Vytvorte databázu.
13. Kliknite Ďalšie. Z rozbaľovacej ponuky vyberte preferované umiestnenie Firestore.
14. Potom kliknite Povoliť na vytvorenie databázy Firestore.

Inicializujte Firebase vo svojej aplikácii React

Vytvorte nový priečinok vo svojom projekte src adresár. Môžete to nazvať firebase_setup. Ďalej vytvorte a firebase.js súbor v tomto priečinku. Potom vložte kód vygenerovaný skôr do tohto súboru.

Zatiaľ môžete uložiť konfiguračný objekt (firebaseConfig) do a .env súbor. Zvážte však použitie bezpečnejšieho spôsob, ako maskovať tajomstvá React vo výrobe. Údaje, ktoré ukladáte do a .env súbor môže ľahko uniknúť v zostave vašej aplikácie.

Ak chcete napríklad zadať tajný kľúč Firebase svojej aplikácie do .env súbor:

REACT_APP_apiKey = yourFirebaseAccessKey

Takto vygenerovaný kód môžete doladiť takto:

importovať { initializeApp } od "firebase/aplikácia";
importovať { getFirestore } od "@firebase/firestore"
konšt firebaseConfig = {
apiKey: proces.env.REACT_APP_apiKey,
authDomain: proces.env.REACT_APP_authDomain,
projectId: proces.env.REACT_APP_projectId,
skladovacie vedro: proces.env.REACT_APP_storageBucket,
messagingSenderId: proces.env.REACT_APP_messagingSenderId,
appId: proces.env.REACT_APP_appId,
meranieId: proces.env.REACT_APP_measurementId
};
konšt app = initializeApp (firebaseConfig);
exportkonšt firestore = getFirestore (aplikácia)

Otestujte svoje pripojenie Firebase

Pripojenie môžete otestovať odoslaním fiktívnych údajov do Firestore. Začnite vytvorením a rukoväte priečinok vo vnútri vášho projektu src adresár. V tomto súbore vytvorte obsluhu odosielania. Môžete to nazvať handlesubmit.js, napríklad:

importovať { addDoc, zbierka } od "@firebase/firestore"
importovať { ohnisko } od "../firebase_setup/firebase"
konšt handleSubmit = (testdata) => {
konšt ref = zbierka (firestore, "test_data") // Firebase to vytvorí automaticky
nech údaje = {
 testData: testovacie údaje
 }
skúste {
 addDoc (odkaz, údaje)
 } chytiť(chyba) {
konzoly.log (chyba)
 }
}
exportpredvolená rukoväťOdoslať

Potom dovnútra App.js:

importovať './App.css';
importovať rukoväťOdoslať od './handles/handlesubmit';
importovať { useRef } od 'reagovať';
funkciuApp() {
konšt dataRef = useRef()
konšt submithandler = (e) => {
e.preventPredvolené()
rukoväťOdoslať(dataRef.aktuálny.hodnota)
 dataRef.current.value = ""
 }
vrátiť (
<div názov triedy="App">
<form onSubmit={submithandler}>
<typ vstupu = "text" ref={dataRef} />
<typ tlačidla = "Predložiť">Uložiť</button>
</form>
</div>
 );
}
exportpredvolená App;

Spustite aplikáciu React a skúste odoslať údaje prostredníctvom formulára. Obnovte databázovú konzolu Firebase, aby ste videli odoslané informácie vo svojej kolekcii. So základmi na mieste môžete preskúmať mnoho ďalších čo Firebase dokáže aby ste videli, ako ho najlepšie využiť.

Stavajte na cestách s Firebase a React

Firebase je všestranné riešenie typu backend-as-a-service, ktoré vám umožňuje efektívne škálovať vašu aplikáciu. Po pripojení aplikácie React môžete využiť množstvo jej funkcií na vytvorenie svojej webovej stránky podľa svojich predstáv.

Jednou z funkcií, ktoré by ste mohli chcieť preskúmať, je napríklad súprava nástrojov na overenie Firebase.