Kaip prijungti „React“ programą prie „Firebase“.

Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius.

2022 m. „Stack Overflow“ tyrimo duomenimis, 21,14 procento kūrėjų naudoja „Firebase“, todėl ji yra ketvirta pagal populiarumą debesų platforma. Tai besivystanti technologija, skirta sklandžiai integruoti užpakalinę dalį.

Naudodami „Firebase“ galite sukurti visos dėklo programą neįrašę nė vienos užpakalinio kodo eilutės. Sužinokite, kaip šiandien susieti React.js programą su „Firebase“ ir kurti kelyje.

Įdiekite „Firebase“ paketą

Po to kurdami savo „React“ programą, pakeiskite katalogą į projekto šakninį aplanką ir įdiekite „Firebase“ paketą paleisdami:

npm diegti ugnies bazė

Pridėkite „React“ programą prie „Firebase“ projekto

Kitas veiksmas – sukurti „Firebase“ projektą ir susieti jį su „React“ programa. Eikite į „Firebase“ konsolė:

1. Spustelėkite Pridėti projektą pradėti naują „Firebase“ projektą.
2. Įveskite projekto pavadinimą, tada spustelėkite Tęsti.
3. Spustelėkite Tęsti kitame puslapyje.
4. Išskleidžiamajame meniu pasirinkite „Firebase“ paskyrą arba spustelėkite Sukurti naują paskyrą jei dar neturite.
5. Galiausiai spustelėkite Sukurti projektą.
6. Spustelėkite Tęsti kai tik procesas bus baigtas.
7. Tada spustelėkite žiniatinklio piktogramą () kito puslapio viršuje, kairėje, kad nustatytumėte „Firebase“ žiniatinkliui.
8. Pateiktame lauke įveskite programos slapyvardį. Tada spustelėkite Registruokis programėlę.
9. Nukopijuokite sugeneruotą kodą ir išsaugokite jį kitam veiksmui (aptarta kitame skyriuje).
10. Spustelėkite Toliau eikite į konsolę.
11. Kitame puslapyje yra daug parinkčių. Slinkite žemyn ir pasirinkite Cloud Firestore nes tokiu atveju reikia tik sukurti duomenų bazę.
12. Toliau spustelėkite Sukurti duomenų bazę.
13. Spustelėkite Kitas. Išskleidžiamajame meniu pasirinkite pageidaujamą „Firestore“ vietą.
14. Tada spustelėkite Įgalinti sukurti Firestore duomenų bazę.

Inicijuokite „Firebase“ savo „React“ programoje

Sukurkite naują aplanką savo projekte src katalogas. Galite tai iškviesti firebase_setup. Tada sukurkite a firebase.js failą tame aplanke. Tada į šį failą įklijuokite anksčiau sugeneruotą kodą.

Kol kas konfigūracijos objektą (firebaseConfig) galite saugoti a .env failą. Tačiau apsvarstykite galimybę naudoti saugesnį būdas maskuoti React paslaptis gamyboje. Duomenys, kuriuos saugote a .env failas gali lengvai nutekėti jūsų programos versijoje.

Pavyzdžiui, norėdami įvesti programos „Firebase“ slaptąjį raktą .env failas:

REACT_APP_apiKey = yourFirebaseAccessKey

Taigi, galite tiksliai sureguliuoti sugeneruotą kodą taip:

importuoti { inicializuoti programą } iš „firebase/app“;
importuoti { getFirestore } iš „@firebase/firestore“
konst firebaseConfig = {
apiKey: procesas.env.REACT_APP_apiKey,
authDomain: procesas.env.REACT_APP_authDomain,
projekto ID: procesas.env.REACT_APP_projectId,
saugojimo kibiras: procesas.env.REACT_APP_storageBucket,
pranešimų siuntėjo ID: procesas.env.REACT_APP_messagingSenderId,
appId: procesas.env.REACT_APP_appId,
matavimo ID: procesas.env.REACT_APP_measurementId
};
konst app = inicializuotiApp (firebaseConfig);
eksportuotikonst firestore = getFirestore (programa)

Išbandykite „Firebase“ ryšį

Galite išbandyti ryšį pateikę netikrus duomenis į „Firestore“. Pradėkite kurdami a rankenos aplanką savo projekto viduje src katalogas. Šiame faile sukurkite pateikimo tvarkyklę. Galite tai skambinti handlesubmit.js, pavyzdžiui:

importuoti { addDoc, kolekcija } iš „@firebase/firestore“
importuoti { ugnies parduotuvė } iš "../firebase_setup/firebase"
konst handleSubmit = (testo duomenys) => {
konst ref = rinkimas (firestore, "test_data") // „Firebase“ tai sukuria automatiškai
leisti duomenys = {
 testData: testdata
 }
bandyti {
 addDoc (nuoroda, duomenys)
 } sugauti(err) {
konsolė.log (klaida)
 }
}
eksportuotinumatytas rankenaPateikti

Tada viduje App.js:

importuoti './App.css';
importuoti rankenaPateikti iš './handles/handlesubmit';
importuoti { useRef } iš „reaguoti“;
funkcijaProgramėlė() {
konst dataRef = useRef()
konst submithandler = (e) => {
e.preventDefault()
rankenaPateikti(dataRef.dabartinė.vertė)
 dataRef.current.value = ""
 }
grąžinti (
<div className="Programėlė">
<forma onSubmit={submithandler}>
<įvesties tipas = "tekstą" ref={dataRef} />
<mygtuko tipas = "Pateikti">Sutaupyti</button>
</form>
</div>
 );
}
eksportuotinumatytas Programėlė;

Paleiskite „React“ programą ir pabandykite pateikti duomenis naudodami formą. Atnaujinkite „Firebase“ duomenų bazės pultą, kad pamatytumėte pateiktą informaciją kolekcijoje. Turėdami pagrindinius dalykus, galite ištirti daugybę kitų ką gali padaryti „Firebase“. kad pamatytumėte, kaip geriausia jį panaudoti.

Kurkite kelyje naudodami „Firebase“ ir reaguokite

„Firebase“ yra universalus „backend“ kaip paslaugos sprendimas, leidžiantis efektyviai padidinti programos mastelį. Prijungę „React“ programą galėsite pasinaudoti daugybe jos funkcijų, kad sukurtumėte savo svetainę pagal savo skonį.

Pavyzdžiui, „Firebase“ autentifikavimo įrankių rinkinys yra viena iš funkcijų, kurias galbūt norėsite ištirti.