I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione.
Utilizzando la combinazione di React e Firebase, puoi produrre applicazioni super reattive. Se hai già familiarità con React, imparare a integrare Firebase è un ottimo passo successivo.
Per comprendere le basi della gestione dei dati di Firebase, dovresti imparare come accoppiare il suo database Firestore con React per creare un'app CRUD. Usando questa conoscenza puoi iniziare a creare applicazioni full-stack scalabili con poco o nessun codice di backend.
Connetti la tua app React a Firebase Firestore
Se non l'hai già fatto, vai alla console di Firebase e collega Firestore al tuo progetto React.
Il processo è facile se l'hai già fatto creato la tua app React.
Quindi, creane uno nuovo firebase_setup directory all'interno del tuo progetto src cartella. Creare un firebase.js file all'interno di questa cartella. Incolla il codice di configurazione che otterrai durante la creazione di un progetto Firebase all'interno del nuovo file:
importare { inizializzaApp } da "firebase/app";
importare {getFirestore} da "@firebase/firestore"cost firebaseConfig = {
apiKey: processi.env.REACT_APP_apiKey,
authDomain: processi.env.REACT_APP_authDomain,
ID progetto: processi.env.REACT_APP_projectId,
storageBucket: processi.env.REACT_APP_storageBucket,
messaggisticaSenderId: processi.env.REACT_APP_messagingSenderId,
appId: processi.env.REACT_APP_IDapp,
ID misurazione: processi.env.REACT_APP_measurementId
};
cost app = initializeApp (firebaseConfig);
esportarecost firestore = getFirestore (app)
IL fuoco variabile contiene il tuo ambiente Firebase Firestore. Lo utilizzerai in tutta l'app durante le richieste API.
Sebbene questo codice utilizzi il metodo .env per mascherare le informazioni di configurazione, ce ne sono di migliori modi per archiviare i segreti in React.
Ora, installa il base di fuoco E uuid librerie nella tua app React. Sebbene uuid sia facoltativo, puoi utilizzarlo come identificatore univoco per ogni documento pubblicato nel database Firestore.
npm installare base di fuoco uuid
Ecco una dimostrazione di ciò che stai per costruire con React e Firestore:
Scrivi dati nel database Firestore
Puoi usare il setDoc O addDoc metodo per aggiungere documenti a Firebase. IL addDoc Il metodo ha il vantaggio di indicare a Firebase di generare un ID univoco per ogni record.
Per iniziare, importa le seguenti dipendenze in App.js:
importare './App.css';
importare {usaEffetto, usaStato} da 'reagire';
importare { addDoc, collection, setDoc, deleteDoc, doc, query, onSnapshot } da "Firebase/Firestore";
importare { firestore } da './firebase_setup/firebase';
importare {v4 COME uuidv4 } da 'uuid';
Prima di procedere, osserva la struttura del DOM e gli stati utilizzati da questo tutorial:
funzioneApp() {
cost [info, setInfo] = useState([])
cost [isUpdate, setisUpdate] = useState(falso)
const [docId, setdocId] = useState("")
const [dettaglio, setDettaglio] = useState("")
cost [ids, setIds] = useState([])ritorno (
<nomeclasse div="App">
<modulo>
<tipo di input= "testo" value={detail} onChange={handledatachange} />
{
èAggiornamento? (
<>
<button onClick={handlesubmitchange} type = "invia">Aggiornamento</button>
<pulsante al clic={() => { setisUpdate (falso); setDettaglio("")}}>
X
</button>
</>
): (<button onClick={submithandler} type="invia">Salva</button>)
}
</form>{info.map((dati, indice)=>
<div key={ids[index]} className='contenitore di dati' id='contenitore di dati'>
<p nomeclasse='dati' id='dati' data-id ={ids[indice]} key={ids[indice]}>{dati}</P>
<pulsante className='pulsante cancella' id='pulsante di cancellazione' onClick={handledelete}>
Eliminare
</button><pulsante className='pulsante di aggiornamento' id='pulsante di aggiornamento' onClick={handleupdate}>
Modificare
</button>
</div>
)}
</div>
);
}
esportarepredefinito Applicazione;
Successivamente, crea un gestore di invio per scrivere i dati nel database Firestore. Questo è un onSubmit evento. Quindi lo userai nel pulsante di invio.
Inoltre, crea un gestore delle modifiche. Questo evento ascolta le modifiche nel campo del modulo e passa l'input in un array (the dettaglio matrice in questo caso). Questo va nel database.
cost modificadatigestiti = (e) => {
setDettaglio(e.bersaglio.valore)
};cost submithandler = (e) => {
e.preventPredefinito()
const ref = collezione (firestore, "dati di test")permettere dati = {
uuid: uuidv4(),
testData: dettaglio
}Tentativo {
addDoc (rif, dati)
} presa(errare) {
consolare.log (errore)
}
setDettaglio("")
}
Mentre Firebase genera automaticamente ID documento (a meno che tu non lo impedisca), il campo UUID funge anche da identificatore univoco per ogni documento.
Leggi i dati dal database Firestore
Recupera i dati dal database Firestore all'interno del file useEffect hook utilizzando il metodo di query Firestore:
usaEffetto(() => {
cost getDati = asincrono () => {
cost dati = aspetta query (raccolta (firestore, "test_data"));onSnapshot (dati, (querySnapshot) => {
cost databaseInfo = [];
cost IDdati = []querySnapshot.per ciascuno((doc) => {
databaseInfo.spingere(doc.dati().dati di test);
dataIds.spingere(doc.id)
});setId (dataId)
setInfo (databaseInfo)
});
}
getDati()
}, [])
Il codice precedente utilizza la query Firebase per ottenere un'istantanea dei dati inviati a Firestore utilizzando il file su Snapshot funzione.
Uno snapshot consente alla tua app di ascoltare le modifiche nel back-end. Aggiorna automaticamente il client ogni volta che qualcuno scrive nel database.
IL setInfo state acquisisce i dati in ogni documento. Mapperai attraverso questo (il informazioni array) durante il rendering nel DOM.
IL setIds state tiene traccia di tutti gli ID documento (trasmessi come file ID vettore). È possibile utilizzare ciascun ID per eseguire le query Elimina e Aggiorna su ciascun documento. È quindi possibile passare ogni ID documento come attributo DOM durante la mappatura attraverso il file informazioni vettore.
Ecco l'utilizzo dello stato all'interno del DOM (come mostrato nel precedente frammento di codice):
Aggiorna i dati esistenti in Firestore
Usa il setDoc metodo per aggiornare un documento o un campo in un documento.
Definire due gestori per l'azione di aggiornamento. Uno gestisce il pulsante di invio per i dati modificati (handlesubmitchange), mentre l'altro è per il pulsante che riscrive i dati nel campo di input per la modifica (handleupdate):
cost handleupdate = (e) => {
setisAggiorna(VERO)
setDettaglio(e.bersaglio.parentNode.bambini[0].textContent)
setdocId(e.bersaglio.parentNode.bambini[0].getAttribute(&cit;ID dati&cit;))
};cost handlesubmitchange = asincrono (e) => {
e.preventPredefinito()
const docRef = doc (firestore, 'dati di test', IDdoc);cost dati aggiornati = aspetta {
testData: dettaglio
};aspettasetDoc(docRif, dati aggiornati, { unire:VERO })
.then (console.log("Dati modificati con successo"))
setisAggiorna(falso)
setDettaglio("")
}
Come mostrato nel precedente frammento di codice, ecco il rendering DOM per le azioni di creazione e aggiornamento:
IL handleupdate La funzione prende di mira ogni ID documento nel DOM usando il suo percorso del nodo. Lo utilizza per interrogare ogni documento dal database affinché apporti modifiche. Il pulsante Modifica utilizza questa funzione.
COSÌ isUpdate (seguito dal setisUpdate stato) ritorna VERO quando un utente fa clic sul pulsante Modifica. Questa azione fa apparire il pulsante Aggiorna, che invia i dati modificati quando un utente fa clic su di esso. L'extra X pulsante chiude l'azione di modifica quando si fa clic, impostando isUpdate A falso.
Se isUpdate È falso, il DOM conserva invece il pulsante Salva iniziale.
Elimina dati da Firestore
Puoi eliminare i dati esistenti da Firestore utilizzando il file deleteDoc metodo. Come hai fatto per l'azione Aggiorna, recupera ogni documento utilizzando il suo ID univoco indirizzando il suo attributo DOM utilizzando il percorso del nodo:
cost handledelete = asincrono (e) => {
const docRef = doc (firestore, 'dati di test', e.target.parentNode.children[0].getAttribute("ID dati"));
aspetta cancellaDoc (docRef)
.then(() => {
consolare.tronco d'albero(`${e.target.parentNode.children[0].textContenuto} è stato eliminato con successo.`)
})
.presa(errore => {
consolare.log (errore);
})
}
Passa la funzione sopra nel pulsante Elimina. Rimuove i dati dal database e dal DOM quando un utente fa clic su di esso.
Abbina Firebase al tuo miglior framework frontend
Firebase ti aiuta a scrivere meno codice mentre esegui query sui dati direttamente dal lato client. Oltre a React, supporta altri framework JavaScript, inclusi Angular.js, Vue.js e molti altri.
Ora che hai visto come funziona con React, potresti anche voler imparare ad accoppiarlo con Angular.js.
