Kuidas ühendada oma Reacti rakendus Firebase'iga

Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu.

2022. aasta Stack Overflow uuringu kohaselt kasutab Firebase'i 21,14 protsenti arendajatest, mis teeb sellest populaarsuselt neljanda pilveplatvormi. See on arenev tehnoloogia taustaprogrammi sujuvaks integreerimiseks.

Firebase'iga saate arendada täispinu rakendust, kirjutamata ühtegi rida taustakoodi. Siit saate teada, kuidas oma React.js rakendus Firebase'iga juba täna ühendada ja liikvel olles edasi arendada.

Installige Firebase'i pakett

Pärast oma Reacti rakenduse loomine, muutke kataloog oma projekti juurkaustaks ja installige Firebase'i pakett, käivitades:

npm installida Firebase

Lisage oma Reacti rakendus Firebase'i projekti

Järgmine samm on Firebase'i projekti loomine ja selle linkimine oma Reacti rakendusega. Mine lehele Firebase'i konsool:

1. Klõpsake Lisa projekt uue Firebase'i projekti alustamiseks.
2. Sisestage projekti nimi ja klõpsake nuppu Jätka.
3. Klõpsake Jätka järgmisel lehel.
4. Valige rippmenüüst oma Firebase'i konto või klõpsake sellel Looge uus konto kui sul seda veel pole.
5. Lõpuks klõpsake Loo projekt.
6. Klõpsake Jätka kui protsess on lõppenud.
7. Järgmisena klõpsake veebiikooni () järgmise lehe vasakus ülanurgas, et seadistada Firebase veebi jaoks.
8. Sisestage ettenähtud väljale oma rakenduse hüüdnimi. Seejärel klõpsake Registreeri rakendus.
9. Kopeerige loodud kood ja säilitage see järgmise sammu jaoks (seda käsitletakse järgmises jaotises).
10. Klõpsake Jätkake konsooli.
11. Järgmisel lehel on palju valikuid. Kerige alla ja valige Cloud Firestore kuna sel juhul tuleb luua ainult andmebaas.
12. Järgmisena klõpsake Loo andmebaas.
13. Klõpsake Edasi. Valige rippmenüüst eelistatud Firestore'i asukoht.
14. Seejärel klõpsake Luba Firestore'i andmebaasi loomiseks.

Initsialiseerige Firebase oma Reacti rakenduses

Looge oma projekti sees uus kaust src kataloog. Saate seda kutsuda firebase_setup. Järgmisena looge a firebase.js faili selles kaustas. Seejärel kleepige sellesse faili varem loodud kood.

Praegu saate konfiguratsiooniobjekti (firebaseConfig) salvestada sisestusse a .env faili. Kuid kaaluge turvalisema vahendi kasutamist viis maskeerida Reaktsiooni saladusi tootmises. Andmed, mida salvestate a .env fail võib teie rakenduse järgus kergesti lekkida.

Näiteks selleks, et sisestada oma rakenduse Firebase'i salavõti .env fail:

REACT_APP_apiKey = teieFirebaseAccessKey

Seega saate loodud koodi peenhäälestada järgmiselt.

importida { InitsialiseeriApp } alates "firebase/app";
importida { getFirestore } alates "@firebase/firestore"
konst firebaseConfig = {
apiKey: protsessi.env.REACT_APP_apiKey,
authDomain: protsessi.env.REACT_APP_authDomain,
projekti ID: protsessi.env.REACT_APP_projectId,
ladustamisämber: protsessi.env.REACT_APP_storageBucket,
messaging SenderId: protsessi.env.REACT_APP_messagingSenderId,
appId: protsessi.env.REACT_APP_appId,
mõõtmiseId: protsessi.env.REACT_APP_measurementId
};
konst rakendus = InitsialiseeriApp (firebaseConfig);
eksportidakonst firestore = getFirestore (rakendus)

Testige oma Firebase'i ühendust

Ühendust saate testida, esitades Firestore'i näivad andmed. Alustage a käepidemed kausta oma projekti sees src kataloog. Looge selle faili sees esitamise töötleja. Saate seda helistada handlesubmit.js, näiteks:

importida { addDoc, kollektsioon } alates "@firebase/firestore"
importida { tulepood } alates "../firebase_setup/firebase"
konst handleSubmit = (testandmed) => {
konst ref = kogumine (tuletaaste, "test_andmed") // Firebase loob selle automaatselt
lase andmed = {
 testData: testandmed
 }
proovi {
 addDoc (viide, andmed)
 } püüda(err) {
konsool.log (viga)
 }
}
eksportidavaikimisi käepide Esita

Siis sees App.js:

importida './App.css';
importida käepide Esita alates './handles/handlesubmit';
importida { useRef } alates 'reageerida';
funktsiooniRakendus() {
konst dataRef = useRef()
konst submithandler = (e) => {
e.preventDefault()
käepide Esita(dataRef.praegune.väärtus)
 dataRef.current.value = ""
 }
tagasi (
<div klassiNimi="Rakendus">
<vorm onSubmit={submithandler}>
<sisendi tüüp= "tekst" ref={dataRef} />
<nupu tüüp = "Esita">Salvesta</button>
</form>
</div>
 );
}
eksportidavaikimisi Rakendus;

Käivitage rakendus React ja proovige vormi kaudu andmeid esitada. Oma kogus esitatud teabe nägemiseks värskendage Firebase'i andmebaasikonsooli. Kui põhitõed on paigas, saate uurida paljusid teisi mida Firebase teha saab et näha, kuidas seda kõige paremini kasutada.

Looge Firebase'iga liikvel olles ja reageerige

Firebase on mitmekülgne teenusena kasutatav taustalahendus, mis võimaldab teil oma rakendust tõhusalt skaleerida. Kui olete oma Reacti rakenduse ühendanud, saate kasutada selle paljusid funktsioone, et luua oma veebisait oma maitse järgi.

Näiteks Firebase'i autentimise tööriistakomplekt on üks funktsioone, mida võiksite uurida.