Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion.

Reactin ja Firebasen yhdistelmällä voit tuottaa erittäin herkkiä sovelluksia. Jos olet jo tutustunut Reactiin, Firebasen integroinnin oppiminen on erinomainen seuraava askel.

Ymmärtääksesi Firebasen tiedonkäsittelyn perusteet, sinun tulee oppia yhdistämään Firestore-tietokanta Reactiin CRUD-sovelluksen rakentamiseksi. Tämän tiedon avulla voit alkaa luoda skaalautuvia täyden pinon sovelluksia, joissa on vain vähän tai ei ollenkaan taustakoodia.

Yhdistä React-sovelluksesi Firebase Firestoreen

Jos et ole vielä tehnyt niin, siirry Firebase-konsoliin ja yhdistä Firestore React-projektiisi.

Prosessi on helppo, jos olet jo tehnyt niin loi React-sovelluksesi.

Tee seuraavaksi uusi firebase_setup hakemistoon projektisi sisällä src kansio. Luo firebase.js tiedosto tämän kansion sisällä. Liitä Firebase-projektia luotaessa saamasi määrityskoodi uuteen tiedostoon:

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)

The palovarasto muuttuja sisältää Firebase Firestore -ympäristösi. Käytät tätä kaikkialla sovelluksessa tehdessäsi API-pyyntöjä.

Vaikka tämä koodi käyttää .env-menetelmää määritystietojen peittämiseen, on olemassa parempiakin tapoja tallentaa salaisuuksia Reactissa.

Asenna nyt Firebase ja uuid kirjastot React-sovelluksessasi. Vaikka uuid on valinnainen, voit käyttää sitä yksilöllisenä tunnisteena jokaiselle Firestore-tietokantaan lähetetylle asiakirjalle.

npm Asentaa Firebase uuid

Tässä on osoitus siitä, mitä aiot rakentaa Reactin ja Firestoren avulla:

Kirjoita tiedot Firestore-tietokantaan

Voit käyttää setDoc tai addDoc tapa lisätä asiakirjoja Firebaseen. The addDoc menetelmän etuna on, että se käskee Firebasea luomaan yksilöllisen tunnuksen kullekin tietueelle.

Aloita tuomalla seuraavat riippuvuudet App.js-tiedostoon:

tuonti './App.css';
tuonti { useEffect, useState } alkaen "reagoi";
tuonti { addDoc, collection, setDoc, deleteDoc, doc, query, onSnapshot } alkaen "firebase/firestore";
tuonti { palokauppa } alkaen './firebase_setup/firebase';
tuonti { v4 kuten uuidv4 } alkaen 'uuid';

Ennen kuin jatkat, katso DOM-rakennetta ja tämän opetusohjelman käyttämiä tiloja:

toimintoSovellus() {
konst [info, setInfo] = useState([])
konst [isUpdate, setisUpdate] = useState(väärä)
 const [docId, setdocId] = useState("")
 const [detail, setDetail] = useState("")
konst [tunnukset, setIds] = useState([])
palata (
<div className="Sovellus">
<muodossa>
<syöttötyyppi= "teksti" value={detail} onChange={handledatachange} />
 {
 isPäivitä? (
<>
<button onClick={handlesubmitchange} type = "Lähetä">Päivittää</button>
<painike onClick={() => { setisUpdate (false); setDetail("")}}>
 X
</button>
</>
 ): (<button onClick={submithandler} type="Lähetä">Tallentaa</button>)
 }
</form>


{info.map((data, indeksi)=>
<div key={ids[index]} className='tietosäiliö' id='tietosäiliö'>
<p luokanNimi='tiedot' id='tiedot' data-id ={ids[index]} key={ids[index]}>{data}</s>
<painike className='poistopainike' id='poista-painike' onClick={handledelete}>
Poistaa
</button>


<painike className='päivitys-painike' id='päivitys-painike' onClick={handleupdate}>
 Muokata
</button>
</div>
 )}
</div>
 );
}
viedäoletuksena Sovellus;

Luo seuraavaksi lähetyskäsittelijä tietojen kirjoittamiseksi Firestore-tietokantaan. Tämä on onSubmitissa tapahtuma. Joten käytät sitä Lähetä-painikkeessa.

Luo lisäksi muutoskäsittelijä. Tämä tapahtuma kuuntelee lomakekentän muutoksia ja välittää syötteen taulukkoon ( yksityiskohta matriisi tässä tapauksessa). Tämä menee tietokantaan.

konst handdatachange = (e) => {
setDetail(e.kohde.arvo)
 };
konst Submissionhandler = (e) => {
e.preventDefault()
 const ref = kokoelma (palovaraus, "testi_tiedot")


antaa data = {
 uuid: uuidv4(),
 testitiedot: yksityiskohta
 }


yrittää {
 addDoc (viite, data)
 } ottaa kiinni(err) {
konsoli.log (err)
 }
setDetail("")
 }

Vaikka Firebase luo automaattisesti asiakirjatunnukset (ellet estä sitä), UUID-kenttä toimii myös jokaisen asiakirjan yksilöllisenä tunnisteena.

Lue tiedot Firestore-tietokannasta

Hae tiedot Firestore-tietokannasta sisällä useEffect koukku Firestore-kyselymenetelmällä:

 useEffect(() => {
konst getData = asynk () => {
konst data = odottaa kysely (kokoelma (firestore, "test_data"));
onSnapshot (data, (querySnapshot) => {
konst databaseInfo = [];
konst dataIds = []


querySnapshot.jokaiselle((doc) => {
tietokantaInfo.työntää(doc.data().testData);
dataIds.työntää(doc.id)
 });


setIds (dataIds)
 setInfo (tietokantatieto)
 });
 }
getData()
 }, [])

Yllä oleva koodi käyttää Firebase-kyselyä saadakseen tilannekuvan tiedoista, jotka on lähetetty Firestoreen käyttämällä onSnapshot toiminto.

Tilannekuvan avulla sovelluksesi voi kuunnella taustajärjestelmän muutoksia. Se päivittää asiakkaan automaattisesti aina, kun joku kirjoittaa tietokantaan.

The setInfo tila nappaa kunkin asiakirjan tiedot. Kartoitat tämän ( tiedot array) renderöiessään DOM: iin.

The setIds tila seuraa kaikkia asiakirjatunnuksia (läpäisty muodossa Ids joukko). Voit käyttää kutakin tunnusta suorittaaksesi poisto- ja päivityskyselyt jokaisessa asiakirjassa. Voit sitten välittää jokaisen asiakirjan tunnuksen DOM-attribuuttina kartoittaessasi asiakirjan läpi tiedot joukko.

Tässä on DOM: n tilan käyttö (kuten edellisessä koodinpätkässä):

Päivitä olemassa olevat tiedot Firestoressa

Käytä setDoc tapa päivittää asiakirja tai asiakirjan kenttä.

Määritä päivitystoiminnolle kaksi käsittelijää. Yksi käsittelee muokatun tiedon lähetyspainiketta (käsittele muutoksen lähettämistä), kun taas toinen on painikkeelle, joka kirjoittaa tiedot uudelleen syöttökenttään muokkausta varten (käsittele päivitystä):

konst handupdate = (e) => {
 setisUpdate(totta)
setDetail(e.kohde.parentNode.lapset[0].textContent)
setdocId(e.kohde.parentNode.lapset[0].getAttribute(&lainaus;data-id&lainaus;))
};
konst käsittelesubmitchange = asynk (e) => {
e.preventDefault()
 const docRef = doc (palopalautus, 'testi_tiedot', docId);


konst päivitystiedot = odottaa {
 testitiedot: yksityiskohta
 };


odottaasetDoc(docRef, päivitetyt tiedot, { yhdistää:true})
 .hen (console.log("Tietojen muuttaminen onnistui"))
setisUpdate(väärä)
 setDetail("") 
}

Kuten edellisessä koodinpätkässä näkyy, tässä on DOM-renderöinti luonti- ja päivitystoiminnoille:

The käsittele päivitystä funktio kohdistaa jokaiseen asiakirjan tunnukseen DOM: ssa käyttämällä solmupolkuaan. Se käyttää tätä kyselyyn jokaisesta asiakirjasta tietokannasta tehdäkseen muutoksia. Muokkaa-painike käyttää tätä toimintoa.

Niin isUpdate (seuraa setisUpdate osavaltio) palauttaa totta kun käyttäjä napsauttaa Muokkaa-painiketta. Tämä toiminto tuo esiin Päivitä-painikkeen, joka lähettää muokatut tiedot, kun käyttäjä napsauttaa niitä. Ylimääräinen X -painike sulkee muokkaustoiminnon, kun sitä napsautetaan – asetuksella isUpdate to väärä.

Jos isUpdate On väärä, DOM säilyttää alkuperäisen Tallenna-painikkeen.

Poista tiedot Firestoresta

Voit poistaa olemassa olevat tiedot Firestoresta käyttämällä deleteDoc menetelmä. Kuten Päivitä-toiminnossa, nouta jokainen asiakirja käyttämällä sen yksilöllistä tunnusta kohdistamalla sen DOM-attribuutti solmupolun avulla:

konst handdelete = asynk (e) => {
 const docRef = doc (palopalautus, 'testi_tiedot', e.target.parentNode.children[0].getAttribute("data-id"));
odottaa deleteDoc (docRef)
 .then(() => {
konsoli.Hirsi(`${e.target.parentNode.children[0].textContent} on poistettu onnistuneesti.`)
 })
 .ottaa kiinni(virhe => {
konsoli.log (virhe);
 })
}

Siirrä yllä oleva toiminto Poista-painikkeeseen. Se poistaa tiedot tietokannasta ja DOM: sta, kun käyttäjä napsauttaa niitä.

Yhdistä Firebase parhaan käyttöliittymäkehyksesi kanssa

Firebase auttaa sinua kirjoittamaan vähemmän koodia, kun teet tiedusteluja suoraan asiakaspuolelta. Reactin lisäksi se tukee muita JavaScript-kehyksiä, mukaan lukien Angular.js, Vue.js ja monet muut.

Nyt kun olet nähnyt, kuinka se toimii Reactin kanssa, saatat haluta myös opetella yhdistämään se Angular.js: n kanssa.