{"id":6128,"date":"2025-02-10T12:54:34","date_gmt":"2025-02-10T12:54:34","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/recuperer-donnees-base-firebase-react\/"},"modified":"2025-02-10T12:54:39","modified_gmt":"2025-02-10T12:54:39","slug":"recuperer-donnees-base-firebase-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/recuperer-donnees-base-firebase-react\/","title":{"rendered":"11.6 R\u00e9cup\u00e9rer des Donn\u00e9es depuis Firebase avec React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>R\u00e9cup\u00e9rer Donn\u00e9es Firebase React<\/strong> est une comp\u00e9tence essentielle pour d\u00e9velopper des applications web interactives. Gr\u00e2ce \u00e0 Firebase, il est possible de g\u00e9rer efficacement une base de donn\u00e9es en temps r\u00e9el, et avec React, vous pouvez dynamiser votre interface utilisateur. Dans cet article, apprenons \u00e0 int\u00e9grer Firebase avec React \u00e0 travers des exemples pratiques de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la R\u00e9cup\u00e9ration des Donn\u00e9es depuis Firebase avec React<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706122153?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Pour connecter votre application React \u00e0 Firebase, vous aurez besoin d&rsquo;importer Firebase dans votre projet et de configurer votre base de donn\u00e9es. Cette configuration implique g\u00e9n\u00e9ralement de cr\u00e9er un projet Firebase, d\u2019obtenir vos cl\u00e9s API, et d&rsquo;initialiser Firebase dans votre projet React. Pour des d\u00e9tails complets, vous pouvez explorer notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-application-firebase-react\">guide sur la cr\u00e9ation d&rsquo;une application Firebase et React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installation et Configuration de Firebase<\/h3>\n\n\n\n<p>Pour commencer, vous devez installer Firebase dans votre projet React. Vous pouvez le faire en utilisant npm ou yarn :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code># Avec npm\nnpm install firebase\n  \n# Avec yarn\nyarn add firebase\n<\/code><\/pre>\n\n\n\n<p>Ensuite, configurez Firebase en cr\u00e9ant un fichier <code>firebase.js<\/code> o\u00f9 vous initialiserez votre application Firebase :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import { initializeApp } from \"firebase\/app\";\nimport { getFirestore } from \"firebase\/firestore\";\n\nconst firebaseConfig = {\n  apiKey: \"VOTRE_API_KEY\",\n  authDomain: \"VOTRE_AUTH_DOMAIN\",\n  projectId: \"VOTRE_PROJECT_ID\",\n  storageBucket: \"VOTRE_STORAGE_BUCKET\",\n  messagingSenderId: \"VOTRE_MESSAGING_SENDER_ID\",\n  appId: \"VOTRE_APP_ID\",\n};\n\nconst app = initializeApp(firebaseConfig);\nconst db = getFirestore(app);\n\nexport { db };\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">R\u00e9cup\u00e9rer des Donn\u00e9es avec Firebase et React<\/h3>\n\n\n\n<p>Pour r\u00e9cup\u00e9rer des donn\u00e9es depuis Firebase, nous utiliserons Firestore et ses fonctionnalit\u00e9s de lecture. Assurez-vous que votre collection dans Firestore est pr\u00eate \u00e0 \u00eatre lue. Voici comment obtenir des donn\u00e9es et les afficher dans un composant React :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useEffect, useState } from 'react';\nimport { db } from '.\/firebase';\nimport { collection, getDocs } from 'firebase\/firestore';\n\nconst DataDisplay = () => {\n  const [data, setData] = useState([]);\n\n  useEffect(() => {\n    const fetchData = async () => {\n      const querySnapshot = await getDocs(collection(db, \"votre_collection\"));\n      const dataList = querySnapshot.docs.map(doc => ({ ...doc.data(), id: doc.id }));\n      setData(dataList);\n    };\n\n    fetchData();\n  }, []);\n\n  return (\n    <div>\n      <h1>Liste des Donn\u00e9es<\/h1>\n      <ul>\n        {data.map(item => (\n          <li key={item.id}>{item.nom} - {item.valeur}<\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n};\n\nexport default DataDisplay;\n<\/code><\/pre>\n\n\n\n<p>Pour en savoir plus sur l&rsquo;utilisation de React, d\u00e9couvrez nos ressources sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\">Qu&rsquo;est-ce que React : Introduction et Avantages<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\">Composants par Classe vs Fonction<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Avanc\u00e9e des Donn\u00e9es de Firebase avec React<\/h3>\n\n\n\n<p>Une fois que vous avez ma\u00eetris\u00e9 la r\u00e9cup\u00e9ration des donn\u00e9es, vous pouvez introduire d&rsquo;autres op\u00e9rations comme les mises \u00e0 jour et suppressions de donn\u00e9es. Par exemple, voici comment mettre \u00e0 jour un document :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import { doc, updateDoc } from 'firebase\/firestore';\n\nconst updateDocument = async (id, newData) => {\n  const docRef = doc(db, \"votre_collection\", id);\n  await updateDoc(docRef, newData);\n};\n<\/code><\/pre>\n\n\n\n<p>Pour obtenir plus d&rsquo;informations et approfondir votre usage de Firebase avec React, vous pouvez consulter la <a href=\"https:\/\/firebase.google.com\/docs\/web\/setup\" target=\"_blank\" rel=\"noopener\">documentation officielle de Firebase<\/a> ou suivre des tutoriels sur des plateformes \u00e9ducatives comme <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noopener\">Udemy<\/a>. Par ailleurs, explorez comment <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-react-fragments-utiliser\">comprendre et utiliser les fragments React<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/comment-ajouter-nouveau-composant-react\">ajouter de nouveaux composants dans React<\/a> dans vos projets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur la R\u00e9cup\u00e9ration de Donn\u00e9es avec Firebase et React<\/h2>\n\n\n\n<p>Int\u00e9grer Firebase avec React est une m\u00e9thode robuste pour d\u00e9velopper des applications web dynamiques et r\u00e9actives. En quelques configurations simples, vous pouvez commencer \u00e0 exploiter le potentiel de Firebase dans vos projets React, des lectures basiques de donn\u00e9es \u00e0 des fonctionnalit\u00e9s plus avanc\u00e9es. Continuez \u00e0 explorer les <a href=\"https:\/\/wikiform.fr\/codespace\/preparons-projet-markdown-react-etapes\">services de Firebase<\/a> pour enrichir davantage vos applications. D\u00e9couvrez aussi comment <a href=\"https:\/\/wikiform.fr\/codespace\/ameliorer-code-instance-axios-react\">am\u00e9liorer votre code avec Axios<\/a> pour les requ\u00eates AJAX dans React.<\/p>\n\n\n\n<p>Pour des ressources suppl\u00e9mentaires sur la cr\u00e9ation d&rsquo;interfaces utilisateur robustes, visitez nos tutoriels avanc\u00e9s sur <a href=\"https:\/\/wikiform.fr\/topic\/react-js\/\">React.js<\/a>.<\/p>\n\n\n<!-- Promotion Learnify -->\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\" style=\"display: inline-block; margin-top: 20px;\">\n  <img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Formation Learnify Redux et React\" style=\"max-width: 100%; height: auto;\" title=\"\">\n<\/a>\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html R\u00e9cup\u00e9rer Donn\u00e9es Firebase React est une comp\u00e9tence essentielle pour d\u00e9velopper des applications web interactives. Gr\u00e2ce \u00e0 Firebase, il est possible de g\u00e9rer efficacement une&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3263,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6128","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=6128"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6128\/revisions"}],"predecessor-version":[{"id":6129,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6128\/revisions\/6129"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3263"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}