Kā savienot savu React lietotni ar Firebase

Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju.

Saskaņā ar 2022. gada Stack Overflow aptauju 21,14 procenti izstrādātāju izmanto Firebase, padarot to par ceturto populārāko mākoņu platformu. Tā ir jauna tehnoloģija aizmugursistēmas nevainojamai integrēšanai.

Izmantojot Firebase, varat izstrādāt pilnas skursteņa lietojumprogrammu, neierakstot nevienu aizmugurkoda rindiņu. Uzziniet, kā jau šodien savienot savu React.js lietojumprogrammu ar Firebase un izveidot, atrodoties ceļā.

Instalējiet Firebase pakotni

Pēc izveidojot savu React lietotni, mainiet direktoriju uz sava projekta saknes mapi un instalējiet Firebase pakotni, izpildot:

npm uzstādīt Firebase

Pievienojiet savu React lietotni Firebase projektam

Nākamais solis ir izveidot Firebase projektu un saistīt to ar savu React lietotni. Dodieties uz Firebase konsole:

1. Klikšķis Pievienot projektu lai sāktu jaunu Firebase projektu.
2. Ievadiet projekta nosaukumu un pēc tam noklikšķiniet uz Turpināt.
3. Klikšķis Turpināt nākamajā lapā.
4. Nolaižamajā izvēlnē atlasiet savu Firebase kontu vai noklikšķiniet uz Izveidot jaunu kontu ja jums tāda vēl nav.
5. Visbeidzot noklikšķiniet uz Izveidot projektu.
6. Klikšķis Turpināt kad process ir pabeigts.
7. Pēc tam noklikšķiniet uz Web ikonas () nākamās lapas augšdaļā pa kreisi, lai iestatītu Firebase tīmeklim.
8. Norādītajā laukā ievadiet savas lietotnes segvārdu. Pēc tam noklikšķiniet Reģistrēt lietotni.
9. Nokopējiet ģenerēto kodu un saglabājiet to nākamajai darbībai (apspriests nākamajā sadaļā).
10. Klikšķis Turpiniet uz konsoli.
11. Nākamajā lapā ir daudz iespēju. Ritiniet uz leju un atlasiet Cloud Firestore jo šajā gadījumā jums ir jāiestata tikai datu bāze.
12. Tālāk noklikšķiniet uz Izveidot datu bāzi.
13. Klikšķis Nākamais. Nolaižamajā izvēlnē atlasiet vēlamo Firestore atrašanās vietu.
14. Pēc tam noklikšķiniet Iespējot lai izveidotu Firestore datu bāzi.

Inicializējiet Firebase savā React lietotnē

Izveidojiet jaunu mapi savā projektā src direktoriju. Varat to izsaukt Firebase_setup. Pēc tam izveidojiet a firebase.js failu šajā mapē. Pēc tam ielīmējiet šajā failā iepriekš ģenerēto kodu.

Pagaidām konfigurācijas objektu (firebaseConfig) varat saglabāt iekšā a .env failu. Bet apsveriet iespēju izmantot drošāku veids, kā maskēt React noslēpumus ražošanā. Dati, ko glabājat a .env fails var viegli noplūst jūsu lietotnes versijā.

Piemēram, lai ievadītu savas lietotnes Firebase slepeno atslēgu .env fails:

REACT_APP_apiKey = yourFirebaseAccessKey

Tādējādi jūs varat precīzi noregulēt ģenerēto kodu šādi:

imports {inicializeApp} no "firebase/app";
imports { getFirestore } no "@firebase/firestore"
konst firebaseConfig = {
apiKey: process.env.REACT_APP_apiKey,
authDomain: process.env.REACT_APP_authDomain,
projekta ID: process.env.REACT_APP_projectId,
glabāšanas kauss: process.env.REACT_APP_storageBucket,
ziņojumapmaiņas SenderId: process.env.REACT_APP_messagingSenderId,
appId: process.env.REACT_APP_appId,
mērījuma ID: process.env.REACT_APP_measurementId
};
konst app = inicializētApp (firebaseConfig);
eksportētkonst firestore = getFirestore (lietotne)

Pārbaudiet savu Firebase savienojumu

Savienojumu var pārbaudīt, Firestore iesniedzot fiktīvus datus. Sāciet, izveidojot a rokturi mapi jūsu projekta iekšpusē src direktoriju. Šajā failā izveidojiet iesniegšanas apdarinātāju. Jūs varat to saukt handlesubmit.js, piemēram:

imports { addDoc, kolekcija } no "@firebase/firestore"
imports { firestore } no "../firebase_setup/firebase"
konst handleSubmit = (testdata) => {
konst ref = kolekcija (firestore, "test_data") // Firebase to izveido automātiski
ļaut dati = {
 testData: testdata
 }
mēģināt {
 addDoc (atsauce, dati)
 } noķert(kļūda) {
konsole.log (kļūda)
 }
}
eksportētnoklusējuma rokturisIesniegt

Tad iekšā App.js:

imports './App.css';
imports rokturisIesniegt no './handles/handlesubmit';
imports { useRef } no "reaģēt";
funkcijuApp() {
konst dataRef = useRef()
konst submithandler = (e) => {
e.preventDefault()
rokturisIesniegt(dataRef.strāva.vērtība)
 dataRef.current.value = ""
 }
atgriezties (
<div klasesNosaukums="App">
<forma onSubmit={submithandler}>
<ievades veids= "tekstu" ref={dataRef} />
<pogas veids = "Iesniegt">Saglabāt</button>
</form>
</div>
 );
}
eksportētnoklusējuma Lietotne;

Palaidiet savu React lietotni un mēģiniet iesniegt datus, izmantojot veidlapu. Atsvaidziniet Firebase datu bāzes konsoli, lai skatītu iesniegto informāciju savā kolekcijā. Izmantojot pamatus, varat izpētīt daudzus citus lietas, ko Firebase var darīt lai redzētu, kā to vislabāk izmantot.

Veidojiet, atrodoties ceļā, izmantojot Firebase, un reaģējiet

Firebase ir daudzpusīgs aizmugursistēmas kā pakalpojuma risinājums, kas ļauj efektīvi mērogot savu lietotni. Kad esat pievienojis React lietotni, varat izmantot tās daudzās funkcijas, lai izveidotu savu vietni atbilstoši savām vēlmēm.

Piemēram, Firebase autentifikācijas rīkkopa ir viena no funkcijām, ko, iespējams, vēlēsities izpētīt.