A React alkalmazás összekapcsolása a Firebase rendszerrel

Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk.

A 2022-es Stack Overflow felmérés szerint a fejlesztők 21,14 százaléka használja a Firebase-t, ezzel a negyedik legnépszerűbb felhőplatform. Ez egy fejlődő technológia a háttérrendszer zökkenőmentes integrálásához.

A Firebase segítségével teljes veremű alkalmazást fejleszthet anélkül, hogy egyetlen sornyi háttérkódot írna. Ismerje meg, hogyan csatlakoztathatja React.js alkalmazását a Firebase-hez még ma, és hogyan építhet útközben.

Telepítse a Firebase csomagot

Után a React alkalmazás létrehozása, módosítsa a könyvtárat a projekt gyökérmappájába, és telepítse a Firebase csomagot a következő futtatásával:

npm telepítés tűzbázis

Adja hozzá React alkalmazását egy Firebase-projekthez

A következő lépés egy Firebase-projekt létrehozása, és összekapcsolása a React alkalmazással. Menj a Firebase konzol:

1. Kattintson Projekt hozzáadása új Firebase projekt elindításához.
2. Adja meg a projekt nevét, majd kattintson a gombra Folytatni.
3. Kattintson Folytatni a következő oldalon.
4. Válassza ki Firebase-fiókját a legördülő menüből, vagy kattintson a gombra Új felhasználó létrehozása ha még nincs.
5. Végül kattintson Projekt létrehozása.
6. Kattintson Folytatni ha a folyamat befejeződik.
7. Ezután kattintson a Web ikonra () a következő oldal bal felső sarkában a Firebase webhez beállításához.
8. Adja meg az alkalmazás becenevét a megadott mezőben. Ezután kattintson Regisztrálja az alkalmazást.
9. Másolja ki a generált kódot, és őrizze meg a következő lépéshez (a következő szakaszban lesz szó).
10. Kattintson Tovább a konzolra.
11. A következő oldalon számos lehetőség található. Görgessen le, és válassza ki Cloud Firestore mivel ebben az esetben csak adatbázist kell felállítani.
12. Ezután kattintson Adatbázis létrehozása.
13. Kattintson Következő. Válassza ki a kívánt Firestore helyet a legördülő menüből.
14. Ezután kattintson Engedélyezze Firestore adatbázis létrehozásához.

Inicializálja a Firebase-t a React alkalmazásban

Hozzon létre egy új mappát a projekten belül src Könyvtár. Ezt hívhatja a firebase_setup. Ezután hozzon létre a firebase.js fájlt a mappában. Ezután illessze be a korábban generált kódot ebbe a fájlba.

Egyelőre a konfigurációs objektumot (firebaseConfig) tárolhatja a .env fájlt. De fontolja meg egy biztonságosabb eszköz használatát módja annak, hogy maszkolja React titkait termelésben. Az Ön által tárolt adatok a .env fájl könnyen kiszivároghat az alkalmazás buildjébe.

Például az alkalmazás Firebase titkos kulcsának megadásához a .env fájl:

REACT_APP_apiKey = yourFirebaseAccessKey

Így a következőképpen finomhangolhatja a generált kódot:

import { inicializálása App } tól től "firebase/app";
import { getFirestore } tól től "@firebase/firestore"
const firebaseConfig = {
apiKey: folyamat.env.REACT_APP_apiKey,
authDomain: folyamat.env.REACT_APP_authDomain,
projektId: folyamat.env.REACT_APP_projectId,
tárolás Vödör: folyamat.env.REACT_APP_storageBucket,
messagingSenderId: folyamat.env.REACT_APP_messagingSenderId,
appId: folyamat.env.REACT_APP_appId,
mérésId: folyamat.env.REACT_APP_measurementId
};
const app = inicializálásaApp (firebaseConfig);
exportconst firestore = getFirestore (alkalmazás)

Tesztelje Firebase-kapcsolatát

A kapcsolat teszteléséhez áladatokat küld el a Firestore-ba. Kezdje azzal, hogy létrehoz egy fogantyúk mappába a projektben src Könyvtár. Hozzon létre egy beküldéskezelőt ebben a fájlban. Ezt hívhatod handlesubmit.js, például:

import { addDoc, gyűjtemény } tól től "@firebase/firestore"
import { tűzraktár } tól től "../firebase_setup/firebase"
const handleSubmit = (tesztadatok) => {
const ref = gyűjtemény (tűzhely, "test_data") // A Firebase ezt automatikusan létrehozza
hagyja adat = {
 testData: tesztadatok
 }
próbáld ki {
 addDoc (hivatkozás, adatok)
 } fogás(hiba) {
konzol.log (hiba)
 }
}
exportalapértelmezett handleSubmit

Aztán bent App.js:

import './App.css';
import handleSubmit tól től './handles/handlesubmit';
import { useRef } tól től 'reagál';
funkcióApp() {
const dataRef = useRef()
const Submithandler = (e) => {
e.preventDefault()
handleSubmit(dataRef.jelenlegi.érték)
 dataRef.current.value = ""
 }
Visszatérés (
<div className="App">
<form onSubmit={submithandler}>
<bemenet típusa= "szöveg" ref={dataRef} />
<gomb típusa = "Beküldés">Megment</button>
</form>
</div>
 );
}
exportalapértelmezett App;

Futtassa a React alkalmazást, és próbáljon meg adatokat beküldeni az űrlapon keresztül. Frissítse a Firebase adatbázis-konzolt a gyűjteményében elküldött információk megtekintéséhez. Az alapismeretek birtokában sok mást is felfedezhet amit a Firebase képes megtenni hogy lássa, hogyan lehet a legjobban használni.

Építsen útközben a Firebase segítségével, és reagáljon

A Firebase egy sokoldalú háttérszolgáltatás, amely lehetővé teszi az alkalmazás hatékony méretezését. Miután csatlakoztatta a React alkalmazást, kihasználhatja annak számos funkcióját, hogy ízlése szerint építse fel webhelyét.

Például a Firebase hitelesítési eszköztár az egyik olyan funkció, amelyet érdemes lehet felfedezni.