Hogyan készítsünk CRUD alkalmazást a Firebase és React segítségével

Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk.

A React és a Firebase kombinációjával szuper érzékeny alkalmazásokat készíthet. Ha már ismeri a Reactot, a Firebase integrálásának megtanulása kiváló következő lépés.

A Firebase adatkezelésének alapjainak megértéséhez meg kell tanulnia, hogyan párosítsa Firestore-adatbázisát a React-tal a CRUD-alkalmazás létrehozásához. Ennek a tudásnak a felhasználásával megkezdheti a méretezhető, teljes veremű alkalmazások létrehozását kis vagy nulla háttérkóddal.

Csatlakoztassa React alkalmazását a Firebase Firestore-hoz

Ha még nem tette meg, nyissa meg a Firebase konzolt, és csatlakoztassa a Firestore-t a React projekthez.

A folyamat egyszerű, ha már megtette létrehozta a React alkalmazást.

Ezután készítsen egy újat firebase_setup könyvtárat a projekten belül src mappát. Hozzon létre egy firebase.js fájl ebben a mappában. Illessze be a Firebase-projekt létrehozásakor kapott konfigurációs kódot az új fájlba:

import { inicializálása App } tól től "firebase/app";
import {getFirestore} tól től "@firebase/firestore"
const firebaseConfig = {
apiKey: folyamat.env.REACT_APP_apiKey,
authDomain: folyamat.env.REACT_APP_authDomain,
projektId: folyamat.env.REACT_APP_projectId,
tárolás Vödör: folyamat.env.REACT_APP_storageBucket,
messagingSenderId: folyamat.env.REACT_APP_messagingSenderId,
appId: folyamat.env.REACT_APP_appId,
mérésId: folyamat.env.REACT_APP_measurementId
};
const app = inicializálásaApp (firebaseConfig);
exportconst firestore = getFirestore (alkalmazás)

A tűzraktár változó tartalmazza a Firebase Firestore-környezetet. Ezt az alkalmazásban fogja használni, amikor API-kérelmeket küld.

Bár ez a kód az .env módszert használja a konfigurációs információk elfedésére, vannak jobbak is titkok tárolásának módjai a Reactban.

Most telepítse a tűzbázis és uuid könyvtárakat a React alkalmazásban. Míg az uuid nem kötelező, használhatja egyedi azonosítóként minden egyes, a Firestore adatbázisba feltöltött dokumentumhoz.

npm telepítés tűzbázis uuid

Íme egy bemutató, hogy mit készül építeni a React és a Firestore segítségével:

Írjon adatokat a Firestore adatbázisba

Használhatja a setDoc vagy addDoc módszerrel adhat hozzá dokumentumokat a Firebase-hez. A addDoc módszer előnye, hogy utasítja a Firebase-t, hogy minden rekordhoz egyedi azonosítót állítson elő.

A kezdéshez importálja a következő függőségeket az App.js-ba:

import './App.css';
import { useEffect, useState } tól től 'reagál';
import { addDoc, collection, setDoc, deleteDoc, doc, query, onSnapshot } tól től "firebase/firestore";
import { tűzraktár } tól től './firebase_setup/firebase';
import { v4 mint uuidv4 } tól től 'uuid'; 

Mielőtt folytatná, nézze meg a DOM-struktúrát és az oktatóanyag által használt állapotokat:

funkcióApp() {
const [info, setInfo] = useState([])
const [isUpdate, setisUpdate] = useState(hamis)
 const [docId, setdocId] = useState("")
 const [részlet, setDetail] = useState("")
const [ids, setIds] = useState([])
Visszatérés (
<div className="App">
<forma>
<bemenet típusa= "szöveg" value={detail} onChange={handledatachange} />
 {
 is Update? (
<>
<button onClick={handlesubmitchange} type = "Beküldés">Frissítés</button>
<gomb onClick={() => { setisUpdate (false); setDetail("")}}>
 x
</button>
</>
 ): (<button onClick={submithandler} type="Beküldés">Megment</button>)
 }
</form>
{info.map((adatok, index)=>
<div kulcs={ids[index]} className='adattároló' id='adattároló'>
<p osztálynév='adat' id='adat' data-id ={ids[index]} key={ids[index]}>{adat}</p>
<gomb className='törlés gomb' id='törlés gomb' onClick={handledelete}>
Töröl
</button>
<gomb className='frissítés gomb' id='frissítés gomb' onClick={handleupdate}>
 Szerkesztés
</button>
</div>
 )}
</div>
 );
}
exportalapértelmezett App;

Ezután hozzon létre egy benyújtási kezelőt az adatok Firestore adatbázisba való írásához. Ez egy onSubmit esemény. Tehát a küldés gombban fogod használni.

Ezenkívül hozzon létre egy változáskezelőt. Ez az esemény figyeli az űrlapmező változásait, és átadja a bemenetet egy tömbbe (a Részlet tömb ebben az esetben). Ez bekerül az adatbázisba.

const handdatachange = (e) => {
setDetail(e.cél.érték)
 };
const Submithandler = (e) => {
e.preventDefault()
 const ref = gyűjtés (tűzhely, "teszt adat")
hagyja adat = {
 uuid: uuidv4(),
 testData: részlet
 }
próbáld ki {
 addDoc (hivatkozás, adatok)
 } fogás(hiba) {
konzol.log (hiba)
 }
setDetail("")
 }

Míg a Firebase automatikusan létrehozza a dokumentumazonosítókat (hacsak nem akadályozza meg), az UUID mező minden egyes dokumentum egyedi azonosítójaként is szolgál.

Adatok olvasása a Firestore adatbázisból

Adatok lekérése a Firestore adatbázisból a useEffect hook a Firestore lekérdezési módszerrel:

 useEffect(() => {
const getData = async () => {
const adatok = várja lekérdezés (gyűjtemény (tűzhely, "teszt_adatok"));
onSnapshot (adat, (querySnapshot) => {
const databaseInfo = [];
const dataIds = []
querySnapshot.az egyes((doc) => {
adatbázisInfo.nyom(doc.adat().teszt adat);
dataIds.nyom(doc.id)
 });
setIds (dataIds)
 setInfo (adatbázisInfo)
 });
 }
getData()
 }, [])

A fenti kód a Firebase lekérdezést használja, hogy pillanatképet kapjon a Firestore-nak elküldött adatokról a onSnapshot funkció.

A pillanatkép lehetővé teszi az alkalmazás számára, hogy figyelje a háttérben történt változásokat. Automatikusan frissíti a klienst, valahányszor valaki ír az adatbázisba.

A setInfo állapot megragadja az adatokat az egyes dokumentumokban. Ezt feltérképezheti (a info tömb) a DOM-nak való renderelés közben.

A setIds állapot nyomon követi az összes dokumentumazonosítót (a Ids sor). Az egyes azonosítók segítségével futtathatja a Törlés és Frissítés lekérdezéseket az egyes dokumentumokon. Ezután minden dokumentumazonosítót átadhat DOM-attribútumként, miközben leképezi a dokumentumot info sor.

Íme a DOM-on belüli állapothasználat (az előző kódrészletben látható módon):

Frissítse a meglévő adatokat a Firestore-ban

Használja a setDoc módszer egy dokumentum vagy a dokumentumban lévő mező frissítésére.

Határozzon meg két kezelőt a frissítési művelethez. Az egyik kezeli a beküldés gombot a szerkesztett adatokhoz (kezeli a módosítás benyújtását), míg a másik a gombé, amely átírja az adatokat a beviteli mezőbe szerkesztés céljából (kezelje a frissítést):

const handupdate = (e) => {
 setisUpdate(igaz)
setDetail(e.cél.parentNode.gyermekek[0].textContent)
setdocId(e.cél.parentNode.gyermekek[0].getAttribute(&idézet;data-id&idézet;))
};
const handsubmitchange = async (e) => {
e.preventDefault()
 const docRef = doc (tűzhely, 'teszt adat', docId);
const updatedata = várja {
 testData: részlet
 };
várjasetDoc(docRef, frissített adatok, { összeolvad:igaz })
 .then (console.log("Az adatok sikeresen módosítva"))
setisUpdate(hamis)
 setDetail("") 
}

Ahogy az előző kódrészletben is látható, itt van a DOM-megjelenítés a létrehozási és frissítési műveletekhez:

A kezelje a frissítést függvény minden dokumentumazonosítót megcéloz a DOM-ban a csomópont elérési útja segítségével. Ennek segítségével lekérdezi az adatbázisból az egyes dokumentumokat, hogy módosításokat hajtson végre. A Szerkesztés gomb ezt a funkciót használja.

Így isFrissítés (nyomon követte a setisUpdate állapot) visszatér igaz amikor a felhasználó a Szerkesztés gombra kattint. Ez a művelet előhozza a Frissítés gombot, amely elküldi a szerkesztett adatokat, amikor a felhasználó rákattint. Az extra x gombra kattintva bezárja a szerkesztési műveletet – a beállítással isFrissítés nak nek hamis.

Ha isFrissítés van hamis, a DOM megtartja a kezdeti Mentés gombot.

Törölje az adatokat a Firestore-ból

A Firestore-ból a meglévő adatokat törölheti a deleteDoc módszer. Ahogyan a Frissítés műveletnél tette, kérjen le minden dokumentumot az egyedi azonosítójával úgy, hogy megcélozza a DOM attribútumait a csomópont elérési útjával:

const handledelete = async (e) => {
 const docRef = doc (tűzhely, 'teszt adat', e.target.parentNode.children[0].getAttribute("data-id"));
várja deleteDoc (docRef)
 .then(() => {
konzol.log(`${e.target.parentNode.children[0].textContent} sikeresen törölve.")
 })
 .fogás(hiba => {
konzol.log (hiba);
 })
}

Adja át a fenti funkciót a Törlés gombra. Ha a felhasználó rákattint, eltávolítja az adatokat az adatbázisból és a DOM-ból.

Párosítsa a Firebase-t a legjobb előtér-keretrendszerével

A Firebase segítségével kevesebb kódot írhat, miközben közvetlenül az ügyféloldalról kérdez le adatokat. A React mellett más JavaScript-keretrendszereket is támogat, beleértve az Angular.js-t, a Vue.js-t és sok mást.

Most, hogy látta, hogyan működik a React, érdemes megtanulnia párosítani az Angular.js-szel.