Käytä Firebasea taustatietosi tallennustilaan ja kehitä yksinkertaisia sovelluksia helposti.
Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion.
Vuoden 2022 Stack Overflow -tutkimuksen mukaan 21,14 prosenttia kehittäjistä käyttää Firebasea, mikä tekee siitä neljänneksi suosituin pilvialustan. Se on kehittyvä tekniikka taustajärjestelmän integroimiseksi saumattomasti.
Firebasen avulla voit kehittää täyden pinon sovelluksen kirjoittamatta riviäkään taustakoodia. Opi yhdistämään React.js-sovelluksesi Firebaseen tänään ja kehittämään sitä liikkeellä ollessasi.
Asenna Firebase-paketti
Jälkeen luomalla React-sovelluksesi, vaihda hakemisto projektisi juurikansioon ja asenna Firebase-paketti suorittamalla:
npm Asentaa Firebase
Lisää React-sovelluksesi Firebase-projektiin
Seuraava vaihe on Firebase-projektin luominen ja linkittäminen React-sovellukseesi. Siirry kohtaan Firebase-konsoli:
- Klikkaus Lisää projekti aloittaaksesi uuden Firebase-projektin.
- Anna projektin nimi ja napsauta sitten Jatkaa.
- Klikkaus Jatkaa seuraavalla sivulla.
- Valitse Firebase-tilisi avattavasta valikosta tai klikkaa Luo uusi tili jos sinulla ei vielä ole sellaista.
- Napsauta lopuksi Luo projekti.
- Klikkaus Jatkaa kun prosessi on valmis.
- Napsauta seuraavaksi Web-kuvaketta ().
- Kirjoita sovelluksellesi lempinimi annettuun kenttään. Napsauta sitten Rekisteröi sovellus.
- Kopioi luotu koodi ja säilytä se seuraavaa vaihetta varten (käsitellään seuraavassa osiossa).
- Klikkaus Jatka konsoliin.
- Seuraavalla sivulla on monia vaihtoehtoja. Vieritä alas ja valitse Cloud Firestore koska sinun tarvitsee vain perustaa tietokanta tässä tapauksessa.
- Napsauta seuraavaksi Luo tietokanta.
- Klikkaus Seuraava. Valitse haluamasi Firestore-sijainti pudotusvalikosta.
- Napsauta sitten ota käyttöön Firestore-tietokannan luomiseen.
Alusta Firebase React-sovelluksessasi
Luo uusi kansio projektiisi src hakemistosta. Voit kutsua tätä firebase_setup. Luo seuraavaksi a firebase.js tiedosto kyseisessä kansiossa. Liitä sitten aiemmin luotu koodi tähän tiedostoon.
Toistaiseksi voit tallentaa määritysobjektin (firebaseConfig) sisälle a .env tiedosto. Mutta harkitse turvallisemman vaihtoehdon käyttöä tapa peittää React-salaisuudet tuotannossa. Tiedot, jotka tallennat a .env tiedosto voi helposti vuotaa sovelluksesi koontiversioon.
Jos käytät .env-vaihtoehtoa, lisää "REACT_APP" jokaisen muuttujan nimeen .env. Muuten sovelluksesi ei lue merkkijonoja. Lisäksi käynnistä React-palvelin uudelleen aina, kun muutat tietoja .env tiedosto.
Jos haluat esimerkiksi kirjoittaa sovelluksesi Firebasen salaisen avaimen .env tiedosto:
REACT_APP_apiKey = yourFirebaseAccessKey
Voit siis hienosäätää luotua koodia seuraavasti:
tuonti { alustaaApp } alkaen "firebase/app";
tuonti { getFirestore } alkaen "@firebase/firestore"
konst firebaseConfig = {
apiKey: käsitellä asiaa.env.REACT_APP_apiKey,
authDomain: käsitellä asiaa.env.REACT_APP_authDomain,
projektitunnus: käsitellä asiaa.env.REACT_APP_projectId,
varastokauha: käsitellä asiaa.env.REACT_APP_storageBucket,
messagingSenderId: käsitellä asiaa.env.REACT_APP_messagingSenderId,
appId: käsitellä asiaa.env.REACT_APP_appId,
mittaustunnus: käsitellä asiaa.env.REACT_APP_measurementId
};
konst app = alustaaApp (firebaseConfig);
viedäkonst firestore = getFirestore (sovellus)Testaa Firebase-yhteytesi
Voit testata yhteyttä lähettämällä valetiedot Firestoreen. Aloita luomalla a kahvat kansio projektisi sisällä src hakemistosta. Luo lähetyskäsittelijä tämän tiedoston sisällä. Voit kutsua tätä handlesubmit.js, esimerkiksi:
tuonti { addDoc, kokoelma } alkaen "@firebase/firestore"
tuonti { palokauppa } alkaen "../firebase_setup/firebase"konst handleSubmit = (testitiedot) => {
konst ref = kokoelma (firestore, "test_data") // Firebase luo tämän automaattisestiantaa data = {
testData: testidata
}yrittää {
addDoc (viite, data)
} ottaa kiinni(err) {
konsoli.log (err)
}
}
viedäoletuksena käsitteleLähetä
Sitten sisälle App.js:
tuonti './App.css';
tuonti käsitteleLähetä alkaen './handles/handlesubmit';
tuonti { useRef } alkaen "reagoi";toimintoSovellus() {
konst dataRef = useRef()konst Submissionhandler = (e) => {
e.preventDefault()
käsitteleLähetä(dataRef.virta.arvo)
dataRef.current.value = ""
}palata (
<div className="Sovellus">
<form onSubmit={submithandler}>
<syöttötyyppi= "teksti" ref={dataRef} />
<painikkeen tyyppi = "Lähetä">Tallentaa</button>
</form>
</div>
);
}
viedäoletuksena Sovellus;
Suorita React-sovellus ja yritä lähettää tietoja lomakkeen kautta. Päivitä Firebase-tietokantakonsoli nähdäksesi kokoelmassasi lähetetyt tiedot. Kun perusasiat ovat kunnossa, voit tutkia monia muita asioita, joita Firebase voi tehdä nähdäksesi kuinka sitä parhaiten käytetään.
Rakenna tien päällä Firebasella ja reagoi
Firebase on monipuolinen palveluna toimiva taustaratkaisu, jonka avulla voit skaalata sovelluksesi tehokkaasti. Kun yhdistät React-sovelluksesi, voit hyödyntää sen monia ominaisuuksia rakentaaksesi verkkosivustosi mieleiseksesi.
Esimerkiksi Firebase-todennustyökalupakki on yksi niistä ominaisuuksista, joita saatat haluta tutkia.
