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.

Izmantojot React un Firebase kombināciju, varat izveidot īpaši atsaucīgas lietojumprogrammas. Ja jau esat iepazinies ar React, Firebase integrēšana ir lielisks nākamais solis.

Lai izprastu Firebase datu apstrādes pamatus, jums vajadzētu uzzināt, kā savienot Firestore datu bāzi ar React, lai izveidotu CRUD lietotni. Izmantojot šīs zināšanas, varat sākt veidot mērogojamas pilnas stekas lietojumprogrammas ar nelielu aizmugurkodu vai bez tā.

Savienojiet savu React lietotni ar Firebase Firestore

Ja vēl neesat to izdarījis, atveriet Firebase konsoli un savienojiet Firestore ar savu React projektu.

Process ir vienkāršs, ja jau esat to izdarījis izveidoja savu React lietotni.

Tālāk izveidojiet jaunu firebase_setup direktorijā jūsu projektā src mapi. Izveidot a firebase.js failu šajā mapē. Jaunajā failā ielīmējiet konfigurācijas kodu, ko iegūsit, veidojot Firebase projektu.

imports





instagram viewer

 {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)

The ugunskura veikals mainīgais satur jūsu Firebase Firestore vidi. Jūs to izmantosit visā lietotnē, veicot API pieprasījumus.

Lai gan šajā kodā konfigurācijas informācijas maskēšanai tiek izmantota .env metode, ir arī labāki veidi, kā glabāt noslēpumus React.

Tagad instalējiet Firebase un uuid bibliotēkas savā React lietotnē. Lai gan uuid nav obligāts, varat to izmantot kā unikālu identifikatoru katram dokumentam, kas publicēts Firestore datubāzē.

npm uzstādīt Firebase uuid

Šeit ir parādīts, ko jūs gatavojaties izveidot, izmantojot React un Firestore:

Ierakstiet datus Firestore datu bāzē

Jūs varat izmantot setDoc vai addDoc metode dokumentu pievienošanai Firebase. The addDoc Metodes priekšrocība ir tā, ka tā uzdod Firebase ģenerēt unikālu ID katram ierakstam.

Lai sāktu, importējiet tālāk norādītās atkarības programmā App.js.

imports './App.css';
imports { useEffect, useState } no "reaģēt";
imports { addDoc, collection, setDoc, deleteDoc, doc, query, onSnapshot } no "firebase/firestore";
imports { firestore } no './firebase_setup/firebase';
imports { v4 kā uuidv4 } no 'uuid';

Pirms turpināt, apskatiet DOM struktūru un stāvokļus, kas tiek izmantoti šajā apmācībā:

funkcijuApp() {
konst [info, setInfo] = useState([])
konst [isUpdate, setisUpdate] = useState(viltus)
 const [docId, setdocId] = useState("")
 const [detaļa, setDetail] = useState("")
konst [ids, setIds] = useState([])
atgriezties (
<div klasesNosaukums="App">
<formā>
<ievades veids= "tekstu" value={detail} onChange={handledatachange} />
 {
 isupdate? (
<>
<poga onClick={handlesubmitchange} type = "Iesniegt">Atjaunināt</button>
<poga onClick={() => { setisUpdate (false); setDetail("")}}>
 X
</button>
</>
 ): (<poga onClick={submithandler} type="Iesniegt">Saglabāt</button>)
 }
</form>


{info.map((dati, indekss)=>
<div atslēga={ids[index]} className='datu konteiners' id='datu konteiners'>
<p klasesNosaukums='datus' id='datus' data-id ={ids[indekss]} key={ids[index]}>{data}</lpp>
<poga klasesNosaukums='dzēšanas poga' id='dzēšanas poga' onClick={handledelete}>
Dzēst
</button>


<poga klasesNosaukums='atjaunināšanas poga' id='atjaunināšanas poga' onClick={handleupdate}>
 Rediģēt
</button>
</div>
 )}
</div>
 );
}
eksportētnoklusējuma Lietotne;

Pēc tam izveidojiet iesniegšanas apstrādātāju, lai ierakstītu datus Firestore datu bāzē. Tas ir an onSubmit notikumu. Tātad jūs to izmantosit iesniegšanas pogā.

Turklāt izveidojiet izmaiņu apstrādātāju. Šis notikums noklausās izmaiņas veidlapas laukā un nodod ievadi masīvā ( detaļa masīvs šajā gadījumā). Tas nonāk datu bāzē.

konst handdatachange = (e) => {
iestatītDetaļas(e.target.vērtība)
 };
konst submithandler = (e) => {
e.preventDefault()
 const ref = kolekcija (ugunsdzēsības krātuve, "testa_dati")


ļaut dati = {
 uuid: uuidv4(),
 testData: detalizēta informācija
 }


mēģināt {
 addDoc (atsauce, dati)
 } noķert(kļūda) {
konsole.log (kļūda)
 }
setDetail("")
 }

Lai gan Firebase automātiski ģenerē dokumentu ID (ja vien jūs to neliedzat), UUID lauks kalpo arī kā unikāls katra dokumenta identifikators.

Lasiet datus no Firestore datu bāzes

Iegūstiet datus no Firestore datu bāzes useEffect āķis, izmantojot Firestore vaicājuma metodi:

 useEffect(() => {
konst getData = asinhrons () => {
konst dati = gaidīt vaicājums (kolekcija (firestore, "test_data"));
onSnapshot (dati, (querySnapshot) => {
konst databaseInfo = [];
konst dataIds = []


queryMomentuzņēmums.katram((doc) => {
DatabaseInfo.spiediet(doc.dati().testData);
dataIds.spiediet(doc.id)
 });


setIds (dataIds)
 setInfo (datubāzes informācija)
 });
 }
getData()
 }, [])

Iepriekš minētais kods izmanto Firebase vaicājumu, lai iegūtu momentuzņēmumu par datiem, kas iesniegti pakalpojumā Firestore, izmantojot onSnapshot funkciju.

Momentuzņēmums ļauj jūsu lietotnei klausīties aizmugursistēmas izmaiņas. Tas automātiski atjaunina klientu katru reizi, kad kāds raksta datu bāzē.

The setInfo valsts satver datus katrā dokumentā. Jūs izpētīsit šo ( info masīvs), renderējot DOM.

The setIds stāvoklis izseko visus dokumentu ID (nodots kā Ids masīvs). Varat izmantot katru ID, lai katrā dokumentā palaistu dzēšanas un atjaunināšanas vaicājumus. Pēc tam katru dokumenta ID varat nodot kā DOM atribūtu, kartējot caur info masīvs.

Lūk, DOM statusa lietojums (kā parādīts iepriekšējā koda fragmentā):

Atjauniniet esošos datus pakalpojumā Firestore

Izmantojiet setDoc metode dokumenta vai dokumenta lauka atjaunināšanai.

Atjaunināšanas darbībai definējiet divus apdarinātājus. Viens apstrādā rediģēto datu iesniegšanas pogu (rokturismaiņu iesniegšana), bet otra ir pogai, kas pārraksta datus ievades laukā rediģēšanai (apstrādājiet atjauninājumu):

konst handupdate = (e) => {
 setisUpdate(taisnība)
iestatītDetaļas(e.target.parentNode.bērni[0].textContent)
setdocId(e.target.parentNode.bērni[0].getAttribute(&citāts;datu ID&citāts;))
};
konst rokturisubmitchange = asinhrons (e) => {
e.preventDefault()
 const docRef = doc (firestore, 'testa_dati', docId);


konst updatedata = gaidīt {
 testData: detalizēta informācija
 };


gaidītsetDoc(docRef, atjaunināt datus, { sapludināt:true })
 .hen (console.log("Dati veiksmīgi mainīti"))
setisUpdate(viltus)
 setDetail("") 
}

Kā parādīts iepriekšējā koda fragmentā, izveidošanas un atjaunināšanas darbību DOM renderēšana:

The apstrādājiet atjauninājumu funkcija atlasa katru dokumenta ID DOM, izmantojot tā mezgla ceļu. Tas izmanto to, lai vaicātu katru dokumentu no datu bāzes, lai tas veiktu izmaiņas. Poga Rediģēt izmanto šo funkciju.

Tātad ir Update (izsekoja setisUpdate valsts) atgriežas taisnība kad lietotājs noklikšķina uz pogas Rediģēt. Veicot šo darbību, tiek parādīta poga Atjaunināt, kas iesniedz rediģētos datus, kad lietotājs uz tās noklikšķina. Papildu X poga aizver rediģēšanas darbību, kad tiek noklikšķināta, izmantojot iestatījumu ir Update uz viltus.

Ja ir Update ir viltus, DOM tā vietā saglabā sākotnējo pogu Saglabāt.

Dzēsiet datus no Firestore

Varat dzēst esošos datus no Firestore, izmantojot dzēstDoc metodi. Tāpat kā atjaunināšanas darbībā, izgūstiet katru dokumentu, izmantojot tā unikālo ID, atlasot tā DOM atribūtu, izmantojot mezgla ceļu:

konst handdelete = asinhrons (e) => {
 const docRef = doc (firestore, 'testa_dati', e.target.parentNode.children[0].getAttribute("datu ID"));
gaidīt deleteDoc (docRef)
 .tad(() => {
konsole.log(`${e.target.parentNode.childs[0].textContent} ir veiksmīgi izdzēsts.'')
 })
 .noķert(kļūda => {
konsole.log (kļūda);
 })
}

Nododiet iepriekš minēto funkciju pogai Dzēst. Tas noņem datus no datu bāzes un DOM, kad lietotājs uz tiem noklikšķina.

Savienojiet Firebase ar savu labāko frontend ietvaru

Firebase palīdz rakstīt mazāk koda, veicot datu vaicājumus tieši no klienta puses. Papildus React tas atbalsta arī citus JavaScript ietvarus, tostarp Angular.js, Vue.js un daudzas citas.

Tagad, kad esat redzējis, kā tas darbojas ar React, iespējams, vēlēsities arī iemācīties savienot to pārī ar Angular.js.