Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen.
Door de combinatie van React en Firebase te gebruiken, kun je supersnel reagerende applicaties maken. Als je al bekend bent met React, is het leren integreren van Firebase een uitstekende volgende stap.
Om de basisprincipes van de gegevensverwerking van Firebase te begrijpen, moet u leren hoe u de Firestore-database kunt koppelen met React om een CRUD-app te bouwen. Met die kennis kun je beginnen met het maken van schaalbare full-stack-applicaties met weinig of geen backend-code.
Verbind uw React-app met Firebase Firestore
Als u dit nog niet heeft gedaan, gaat u naar de Firebase-console en verbind Firestore met uw React-project.
Het proces is eenvoudig als je dat al hebt gedaan heeft uw React-app gemaakt.
Maak vervolgens een nieuwe firebase_setup map in uw project src map. Maak een firebase.js bestand in deze map. Plak de configuratiecode die u krijgt tijdens het maken van een Firebase-project in het nieuwe bestand:
importeren { app initialiseren } van "vuurbasis/app";
importeren {getFirestore} van "@firebase/firestore"const firebaseConfig = {
API sleutel: proces.env.REACT_APP_apiKey,
authDomein: proces.env.REACT_APP_authDomain,
projectId: proces.env.REACT_APP_projectId,
opslagEmmer: proces.env.REACT_APP_opslagBucket,
messagingSenderId: proces.env.REACT_APP_messagingSenderId,
appId: proces.env.REACT_APP_appId,
metingId: proces.env.REACT_APP_meet-Id
};
const app = app initialiseren (firebaseConfig);
exporterenconst firestore = haalFirestore (app)
De brandweerkazerne variabele bevat uw Firebase Firestore-omgeving. U gebruikt dit in de hele app terwijl u API-verzoeken doet.
Hoewel deze code de .env-methode gebruikt om de configuratie-informatie te maskeren, zijn er betere manieren om geheimen op te slaan in React.
Installeer nu de vuurbasis En uuid bibliotheken in uw React-app. Hoewel uuid optioneel is, kunt u het gebruiken als een unieke identificatie voor elk document dat in de Firestore-database wordt geplaatst.
npm installeren vuurbasis uuid
Hier is een demonstratie van wat je gaat bouwen met React en Firestore:
Schrijf gegevens naar de Firestore-database
U kunt de setDoc of addDoc methode om documenten toe te voegen aan Firebase. De addDoc methode heeft het voordeel dat het Firebase instrueert om voor elk record een unieke ID te genereren.
Importeer om te beginnen de volgende afhankelijkheden in App.js:
importeren './App.css';
importeren { useEffect, useState } van 'Reageer';
importeren {addDoc, collectie, setDoc, deleteDoc, doc, query, onSnapshot} van "firebase/firestore";
importeren { vuuropslag } van './firebase_setup/firebase';
importeren { v4 als uuidv4 } van 'uuid';
Bekijk voordat u verder gaat de DOM-structuur en de statussen die in deze zelfstudie worden gebruikt:
functieapp() {
const [info, setInfo] = useState([])
const [isUpdate, setisUpdate] = useState(vals)
const [docId, setdocId] = useState("")
const [detail, setDetail] = useState("")
const [ids, setIds] = useState([])opbrengst (
<div className="app">
<formulier>
<invoertype= "tekst" waarde={detail} onChange={handledatachange} />
{
isUpdate? (
<>
<knop onClick={handlesubmitchange} type = "indienen">Update</button>
<knop onClick={() => { setisUpdate (false); setDetail("")}}>
X
</button>
</>
): (<knop onClick={submithandler} type="indienen">Redden</button>)
}
</form>{info.map((gegevens, index)=>
<div key={ids[index]} className='gegevenscontainer' identiteitsbewijs='gegevenscontainer'>
<p className='gegevens' identiteitsbewijs='gegevens' data-id ={ids[index]} key={ids[index]}>{gegevens}</P>
<knop className='verwijder-knop' identiteitsbewijs='delete-knop' onClick={handledelete}>
Verwijderen
</button><knop className='update-knop' identiteitsbewijs='update-knop' onClick={handleupdate}>
Bewerking
</button>
</div>
)}
</div>
);
}
exporterenstandaard App;
Maak vervolgens een indieningshandler om gegevens naar de Firestore-database te schrijven. Dit is een opIndienen evenement. Dus je gebruikt het in de verzendknop.
Maak daarnaast een wijzigingshandler. Deze gebeurtenis luistert naar wijzigingen in het formulierveld en geeft de invoer door aan een array (de detail array in dit geval). Dit komt in de database.
const handledatachange = (e) => {
setDetail(e.doel.waarde)
};const indienhandler = (e) => {
e.voorkom standaard()
const ref = collectie (firestore, "testgegevens")laten gegevens = {
uuid: uuidv4(),
testData: detail
}poging {
addDoc (ref, gegevens)
} vangst(fout) {
troosten.log (fout)
}
setDetail("")
}
Terwijl Firebase automatisch document-ID's genereert (tenzij u dit verhindert), dient het UUID-veld ook als een unieke identificatie voor elk document.
Lees gegevens uit de Firestore-database
Haal gegevens op uit de Firestore-database in de gebruikEffect hook met behulp van de Firestore-querymethode:
gebruikEffect(() => {
const getData = asynchroon () => {
const gegevens = wachten query (verzameling (firestore, "test_data"));onSnapshot (gegevens, (querySnapshot) => {
const databaseInfo = [];
const dataIds = []querySnapshot.voor elk((doc) => {
databaseInfo.duw(dok.gegevens().testgegevens);
dataIds.duw(dok.ID kaart)
});setIds (dataIds)
setInfo (databaseInfo)
});
}
gegevens verkrijgen()
}, [])
De bovenstaande code gebruikt de Firebase-query om een momentopname te krijgen van gegevens die naar Firestore zijn verzonden met behulp van de opSnapshot functie.
Met een momentopname kan uw app luisteren naar wijzigingen in de backend. Het werkt de client automatisch bij telkens wanneer iemand naar de database schrijft.
De setInfo state pakt de gegevens in elk document. Je brengt dit in kaart (de informatie array) tijdens het renderen naar de DOM.
De setIds state houdt alle document-ID's bij (doorgegeven als de ID's reeks). U kunt elke ID gebruiken om de query's Verwijderen en Bijwerken op elk document uit te voeren. U kunt vervolgens elke document-ID doorgeven als een DOM-attribuut tijdens het toewijzen via de informatie reeks.
Dit is het statusgebruik binnen de DOM (zoals weergegeven in het vorige codefragment):
Update bestaande gegevens in Firestore
Gebruik de setDoc methode om een document of een veld in een document bij te werken.
Definieer twee handlers voor de update-actie. Men behandelt de verzendknop voor de bewerkte gegevens (omgaan met het indienen van wijzigingen), terwijl de andere voor de knop is die de gegevens herschrijft naar het invoerveld voor bewerking (omgaan met bijwerken):
const handleupdate = (e) => {
setisUpdate(WAAR)
setDetail(e.doel.parentNode.kinderen[0].textContent)
setdocId(e.doel.parentNode.kinderen[0].getAttribuut(&citaat;data-id&citaat;))
};const handlesubmitchange = asynchroon (e) => {
e.voorkom standaard()
const docRef = doc (firestore, 'testgegevens', docId);const bijgewerkte gegevens = wachten {
testData: detail
};wachtensetDoc(docRef, gegevens bijwerken, { samenvoegen:WAAR })
.then (console.log("Gegevens zijn succesvol gewijzigd"))
setisUpdate(vals)
setDetail("")
}
Zoals getoond in het vorige codefragment, is hier de DOM-weergave voor de acties voor maken en bijwerken:
De omgaan met bijwerken functie richt zich op elk document-ID in de DOM met behulp van het knooppuntpad. Het gebruikt dit om elk document uit de database op te vragen om wijzigingen aan te brengen. De knop Bewerken gebruikt deze functie.
Dus isUpdate (gevolgd door de setisUpdate staat) keert terug WAAR wanneer een gebruiker op de knop Bewerken klikt. Deze actie brengt de knop Bijwerken naar voren, die de bewerkte gegevens indient wanneer een gebruiker erop klikt. De extra X knop sluit de bewerkingsactie wanneer erop wordt geklikt - door instelling isUpdate naar vals.
Als isUpdate is vals, behoudt de DOM in plaats daarvan de oorspronkelijke knop Opslaan.
Verwijder gegevens uit Firestore
U kunt bestaande gegevens uit Firestore verwijderen met behulp van de deleteDoc methode. Zoals u deed voor de update-actie, haalt u elk document op met behulp van zijn unieke ID door het DOM-attribuut te targeten met behulp van het knooppuntpad:
const afgehandeldelete = asynchroon (e) => {
const docRef = doc (firestore, 'testgegevens', e.target.parentNode.children[0].getAttribute("data-id"));
wachten deleteDoc (docRef)
.toen(() => {
troosten.log(`${e.target.parentNode.children[0].textContent} is met succes verwijderd.`)
})
.vangst(fout => {
troosten.log (fout);
})
}
Geef de bovenstaande functie door aan de knop Verwijderen. Het verwijdert de gegevens uit de database en de DOM wanneer een gebruiker erop klikt.
Combineer Firebase met uw beste frontend-framework
Firebase helpt u minder code te schrijven terwijl u gegevens rechtstreeks van de clientzijde opvraagt. Naast React ondersteunt het andere JavaScript-frameworks, waaronder Angular.js, Vue.js en vele andere.
Nu je hebt gezien hoe het werkt met React, wil je misschien ook leren om het te koppelen met Angular.js.