Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation.
En utilisant la combinaison de React et Firebase, vous pouvez produire des applications super réactives. Si vous connaissez déjà React, apprendre à intégrer Firebase est une excellente prochaine étape.
Pour comprendre les bases de la gestion des données de Firebase, vous devez apprendre à coupler sa base de données Firestore avec React pour créer une application CRUD. En utilisant ces connaissances, vous pouvez commencer à créer des applications complètes évolutives avec peu ou pas de code backend.
Connectez votre application React à Firebase Firestore
Si vous ne l'avez pas déjà fait, accédez à la console Firebase et connectez Firestore à votre projet React.
Le processus est simple si vous avez déjà créé votre application React.
Ensuite, faites un nouveau firebase_setup répertoire dans votre projet src dossier. Créer un firebase.js
fichier dans ce dossier. Collez le code de configuration que vous obtiendrez lors de la création d'un projet Firebase dans le nouveau fichier :importer { initializeApp } depuis "firebase/application" ;
importer {getFirestore} depuis "@firebase/firestore"constante firebaseConfig = {
clé API: processus.env.REACT_APP_apiKey,
authDomain: processus.env.REACT_APP_authDomain,
ID de projet: processus.env.REACT_APP_projectId,
stockageBucket: processus.env.REACT_APP_storageBucket,
messagerieSenderId: processus.env.REACT_APP_messagingSenderId,
ID d'application: processus.env.REACT_APP_appId,
ID de mesure: processus.env.REACT_APP_measurementId
};
constante app = initializeApp (firebaseConfig);
exporterconstante firestore = getFirestore (application)
Le foyer La variable contient votre environnement Firebase Firestore. Vous l'utiliserez dans l'application tout en faisant des demandes d'API.
Bien que ce code utilise la méthode .env pour masquer les informations de configuration, il existe de meilleures façons de stocker des secrets dans React.
Maintenant, installez le base de feu et uuid bibliothèques dans votre application React. Bien que uuid soit facultatif, vous pouvez l'utiliser comme identifiant unique pour chaque document publié dans la base de données Firestore.
npm installer base de feu uuid
Voici une démonstration de ce que vous êtes sur le point de créer avec React et Firestore :
Écrire des données dans la base de données Firestore
Vous pouvez utiliser le setDoc ou addDoc méthode pour ajouter des documents à Firebase. Le addDoc La méthode a l'avantage de demander à Firebase de générer un ID unique pour chaque enregistrement.
Pour commencer, importez les dépendances suivantes dans App.js :
importer './App.css';
importer { useEffect, useState } depuis 'réagir';
importer { addDoc, collection, setDoc, deleteDoc, doc, query, onSnapshot } depuis "firebase/firestore" ;
importer { firestore } depuis './firebase_setup/firebase' ;
importer { v4 comme uuidv4 } depuis 'uuid';
Avant de continuer, examinez la structure DOM et les états utilisés par ce didacticiel :
fonctionApplication() {
constante [info, setInfo] = useState([])
constante [isUpdate, setisUpdate] = useState(FAUX)
const [docId, setdocId] = useState("")
const [détail, setDetail] = useState("")
constante [ids, setIds] = useState([])retour (
<div nom_classe="Application">
<former>
<type d'entrée= "texte" value={detail} onChange={handledatachange} />
{
estMise à jour? (
<>
<bouton onClick={handlesubmitchange} type = "soumettre">Mise à jour</button>
<bouton onClick={() => { setisUpdate (faux); setDetail("")}}>
X
</button>
</>
): (<bouton onClick={submithandler} type="soumettre">Sauvegarder</button>)
}
</form>{info.map((données, index)=>
<clé div={ids[index]} className='conteneur de données' identifiant='conteneur de données'>
<p NomClasse='données' identifiant='données' data-id ={ids[index]} key={ids[index]}>{données}</p>
<bouton className='bouton de suppression' identifiant='bouton de suppression' onClick={handledelete}>
Supprimer
</button><bouton className='bouton de mise à jour' identifiant='bouton de mise à jour' onClick={handleupdate}>
Modifier
</button>
</div>
)}
</div>
);
}
exporterdéfaut application ;
Ensuite, créez un gestionnaire de soumission pour écrire des données dans la base de données Firestore. C'est un onSubmit événement. Vous l'utiliserez donc dans le bouton d'envoi.
De plus, créez un gestionnaire de modifications. Cet événement écoute les modifications dans le champ de formulaire et transmet l'entrée dans un tableau (le détail tableau dans ce cas). Cela va dans la base de données.
constante handledatachange = (e) => {
setDetail(e.cible.valeur)
};constante submithandler = (e) => {
e.preventDefault()
const ref = collection (firestore, "données de test")laisser données = {
uuid: uuidv4(),
testData: détail
}essayer {
addDoc (réf, données)
} attraper(erre) {
console.log (erreur)
}
setDetail("")
}
Bien que Firebase génère automatiquement des ID de document (sauf si vous l'en empêchez), le champ UUID sert également d'identifiant unique pour chaque document.
Lire les données de la base de données Firestore
Récupérer les données de la base de données Firestore dans le utiliserEffet hook à l'aide de la méthode de requête Firestore :
useEffet(() => {
constante getData = asynchrone () => {
constante données = attendre requête (collection (firestore, "test_data"));onSnapshot (données, (querySnapshot) => {
constante base de donnéesInfo = [] ;
constante ID de données = []querySnapshot.pour chaque((doc) => {
base de donnéesInfo.pousser(doc.données().données de test);
ID de données.pousser(doc.identifiant)
});setIds (dataIds)
setInfo (databaseInfo)
});
}
getData()
}, [])
Le code ci-dessus utilise la requête Firebase pour obtenir un instantané des données soumises à Firestore à l'aide de surSnapshot fonction.
Un instantané permet à votre application d'écouter les modifications apportées au backend. Il met automatiquement à jour le client chaque fois que quelqu'un écrit dans la base de données.
Le setInfo state récupère les données de chaque document. Vous cartographierez ceci (le Info tableau) lors du rendu dans le DOM.
Le setIds l'état suit tous les ID de document (transmis comme identifiants déployer). Vous pouvez utiliser chaque ID pour exécuter les requêtes Supprimer et Mettre à jour sur chaque document. Vous pouvez ensuite transmettre chaque ID de document en tant qu'attribut DOM lors du mappage via le Info déployer.
Voici l'utilisation de l'état dans le DOM (comme indiqué dans l'extrait de code précédent) :
Mettre à jour les données existantes dans Firestore
Utilisez le setDoc méthode pour mettre à jour un document ou un champ dans un document.
Définissez deux gestionnaires pour l'action de mise à jour. L'un gère le bouton d'envoi des données éditées (manipulersubmitchange), tandis que l'autre est pour le bouton qui réécrit les données dans le champ de saisie pour l'édition (gérer la mise à jour):
constante handleupdate = (e) => {
setisMise à jour(vrai)
setDetail(e.cible.parentNode.enfants[0].textContent)
setdocId(e.cible.parentNode.enfants[0].getAttribute("ID de données"))
};constante handlesubmitchange = asynchrone (e) => {
e.preventDefault()
const docRef = doc (firestore, 'données de test', IDdoc);constante données mises à jour = attendre {
testData: détail
};attendresetDoc(Réfdoc, données mises à jour, { fusionner:vrai })
.puis (console.log("Données modifiées avec succès"))
setisMise à jour(FAUX)
setDetail("")
}
Comme indiqué dans l'extrait de code précédent, voici le rendu DOM pour les actions de création et de mise à jour :
Le gérer la mise à jour La fonction cible chaque ID de document dans le DOM à l'aide de son chemin de nœud. Il l'utilise pour interroger chaque document de la base de données afin qu'il puisse apporter des modifications. Le bouton Modifier utilise cette fonction.
Donc estMise à jour (suivi par le setisMise à jour état) renvoie vrai lorsqu'un utilisateur clique sur le bouton Modifier. Cette action fait apparaître le bouton Mettre à jour, qui soumet les données modifiées lorsqu'un utilisateur clique dessus. L'extra X ferme l'action d'édition lorsqu'il est cliqué—en définissant estMise à jour pour FAUX.
Si estMise à jour est FAUX, le DOM conserve le bouton Enregistrer initial à la place.
Supprimer les données du Firestore
Vous pouvez supprimer des données existantes de Firestore à l'aide de supprimerDoc méthode. Comme vous l'avez fait pour l'action Mettre à jour, récupérez chaque document à l'aide de son identifiant unique en ciblant son attribut DOM à l'aide du chemin du nœud :
constante handledelete = asynchrone (e) => {
const docRef = doc (firestore, 'données de test', e.target.parentNode.children[0].getAttribute("ID de données"));
attendre deleteDoc (docRef)
.alors(() => {
console.enregistrer(`${e.target.parentNode.children[0].textContent} a été supprimé avec succès.`)
})
.attraper(erreur => {
console.log (erreur);
})
}
Passez la fonction ci-dessus dans le bouton Supprimer. Il supprime les données de la base de données et du DOM lorsqu'un utilisateur clique dessus.
Associez Firebase à votre meilleur framework frontal
Firebase vous aide à écrire moins de code pendant que vous interrogez les données directement du côté client. Outre React, il prend en charge d'autres frameworks JavaScript, notamment Angular.js, Vue.js et bien d'autres.
Maintenant que vous avez vu comment cela fonctionne avec React, vous voudrez peut-être aussi apprendre à le coupler avec Angular.js.
