{"id":6124,"date":"2025-01-27T12:55:14","date_gmt":"2025-01-27T12:55:14","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/creer-base-donnees-firebase-react\/"},"modified":"2025-01-27T12:55:19","modified_gmt":"2025-01-27T12:55:19","slug":"creer-base-donnees-firebase-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/creer-base-donnees-firebase-react\/","title":{"rendered":"11.4 Cr\u00e9er une Base de Donn\u00e9es avec Firebase React"},"content":{"rendered":"\u00ab\u00a0`html\n&#8212;\n\n<p><strong>Base de Donn\u00e9es Firebase React<\/strong> est un excellent moyen de g\u00e9rer des donn\u00e9es en temps r\u00e9el dans vos applications web modernes. Firebase offre une base de donn\u00e9es NoSQL qui se synchronise en temps r\u00e9el, et sa combinaison avec React permet de cr\u00e9er des applications r\u00e9actives et dynamiques. Apprenons ensemble comment utiliser Firebase dans une application React pour stocker et r\u00e9cup\u00e9rer des donn\u00e9es efficacement ! Si vous d\u00e9butez, n&rsquo;h\u00e9sitez pas \u00e0 consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">tutoriel sur la cr\u00e9ation d&rsquo;une premi\u00e8re application React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>Base de Donn\u00e9es Firebase React<\/strong><\/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\/706121650?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>Firebase est une plateforme de d\u00e9veloppement d&rsquo;applications propos\u00e9e par Google, offrant divers services tels qu&rsquo;une base de donn\u00e9es, l&rsquo;authentification, le stockage, et bien d&rsquo;autres. React, quant \u00e0 lui, est une biblioth\u00e8que JavaScript populaire pour la cr\u00e9ation d&rsquo;interfaces utilisateur. En utilisant Firebase avec React, vous pouvez facilement ajouter des fonctionnalit\u00e9s back-end puissantes \u00e0 vos applications front-end. Explorons comment configurer Firebase dans un projet React. D\u00e9couvrez aussi comment <a href=\"https:\/\/wikiform.fr\/codespace\/creer-base-donnees-firebase-react\" target=\"_blank\" rel=\"noopener\">cr\u00e9er une base de donn\u00e9es Firebase dans React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 1 : Configurer Firebase<\/h3>\n\n\n\n<p>Avant de commencer, vous devez configurer votre projet sur le site Firebase. Suivez ces \u00e9tapes :<\/p>\n\n<ol>\n  <li>Allez sur <a href=\"https:\/\/console.firebase.google.com\" target=\"_blank\" rel=\"noopener\">Firebase Console<\/a>.<\/li>\n  <li>Cliquez sur \u00ab\u00a0Ajouter un projet\u00a0\u00bb et suivez les instructions pour cr\u00e9er un nouveau projet Firebase.<\/li>\n  <li>Apr\u00e8s la cr\u00e9ation du projet, ajoutez une application en s\u00e9lectionnant l&rsquo;ic\u00f4ne Web et suivez les instructions pour enregistrer le projet.<\/li>\n  <li>Copiez le code de configuration que Firebase fournit, car vous en aurez besoin plus tard.<\/li>\n<\/ol>\n\n\n\n<p>Une fois votre base de donn\u00e9es configur\u00e9e, apprenez \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-donnees-base-firebase-react\" target=\"_blank\" rel=\"noopener\">ajouter des donn\u00e9es \u00e0 votre base Firebase<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 2 : Installer Firebase dans un Projet React<\/h3>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code>npm install firebase<\/code><\/pre>\n\n\n\n<p>Ouvrez votre terminal et ex\u00e9cutez la commande ci-dessus dans le r\u00e9pertoire de votre projet React pour installer Firebase. Si vous avez besoin d&rsquo;aide, vous pouvez consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-bootstrap-react-guide\" target=\"_blank\" rel=\"noopener\">guide pour utiliser Bootstrap avec React<\/a> pour une installation similaire.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 3 : Initialiser Firebase dans votre Application<\/h3>\n\n\n\n<p>Cr\u00e9ez un fichier <code>firebase.js<\/code> pour initialiser Firebase avec votre configuration :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import { initializeApp } from \"firebase\/app\";\n\nconst firebaseConfig = {\n  apiKey: \"YOUR_API_KEY\",\n  authDomain: \"YOUR_AUTH_DOMAIN\",\n  projectId: \"YOUR_PROJECT_ID\",\n  storageBucket: \"YOUR_STORAGE_BUCKET\",\n  messagingSenderId: \"YOUR_MESSAGING_SENDER_ID\",\n  appId: \"YOUR_APP_ID\"\n};\n\n\/\/ Initialize Firebase\nconst app = initializeApp(firebaseConfig);\n\nexport default app;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 4 : Configurer Firestore pour la Base de Donn\u00e9es<\/h3>\n\n\n\n<p>Pour utiliser Firestore, le service de base de donn\u00e9es de Firebase, vous devez cr\u00e9er et configurer Firestore dans la console Firebase. Une fois configur\u00e9, utilisez le code suivant pour interagir avec la base de donn\u00e9es dans React. Pour perfectionner vos comp\u00e9tences, essayez notre <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-react-fragments-utiliser\" target=\"_blank\" rel=\"noopener\">guide sur l&rsquo;utilisation des React Fragments<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import { getFirestore, collection, addDoc } from \"firebase\/firestore\"; \nimport app from '.\/firebase';\n\nconst db = getFirestore(app);\n\nasync function addData() {\n  try {\n    const docRef = await addDoc(collection(db, \"users\"), {\n      firstName: \"Ada\",\n      lastName: \"Lovelace\"\n    });\n    console.log(\"Document written with ID: \", docRef.id);\n  } catch (e) {\n    console.error(\"Error adding document: \", e);\n  }\n}\n\nexport default addData;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 5 : Utiliser les Donn\u00e9es dans votre Application React<\/h3>\n\n\n\n<p>Vous pouvez maintenant appeler la fonction <code>addData<\/code> dans vos composants React pour ajouter des donn\u00e9es \u00e0 votre base de donn\u00e9es Firebase Firestore. Si vous voulez conna\u00eetre la diff\u00e9rence entre les composants par classe et les fonctions, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\" target=\"_blank\" rel=\"noopener\">article sur les diff\u00e9rences entre composants classe et fonction<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport addData from '.\/firebase'; \/\/ Assurez-vous que le chemin est correct\n\nfunction App() {\n  const handleClick = () => {\n    addData();\n  };\n\n  return (\n    <div>\n      <h1>Bienvenue sur l'application Firebase-React<\/h1>\n      <button onClick={handleClick}>Ajouter Donn\u00e9es<\/button>\n    <\/div>\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion: Base de Donn\u00e9es Firebase React<\/h2>\n\n\n\n<p>Int\u00e9grer Firebase avec React vous permet de cr\u00e9er des applications modernes qui n\u00e9cessitent une gestion en temps r\u00e9el des donn\u00e9es avec une interface utilisateur r\u00e9active et dynamique. Les \u00e9tapes d\u00e9crites dans ce tutoriel vous donnent un bon point de d\u00e9part pour utiliser ces technologies ensemble. \u00c0 mesure que vous progressez, explorez d&rsquo;autres fonctionnalit\u00e9s Firebase telles que l&rsquo;authentification et le stockage pour renforcer encore plus votre application. Bonne cr\u00e9ation de projets ! Pour approfondir vos connaissances, explorez notre section sur <a href=\"https:\/\/wikiform.fr\/codespace\/section-firebase-axios-react-plan\" target=\"_blank\" rel=\"noopener\">Firebase et Axios<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/firebase.google.com\/docs\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/firebase.google.com\/downloads\/brand-guidelines\/SVG\/logo-standard.svg\" loading=\"lazy\" alt=\"Firebase Documentation\" title=\"\"><\/a>\n\n\n\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\"><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 Redux et React sur Learnify\" title=\"\"><\/a>\n\n\nJ&rsquo;esp\u00e8re que ce tutoriel inspirera et guidera vos lecteurs dans la cr\u00e9ation de bases de donn\u00e9es avec Firebase dans une application React !  \n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html &#8212; Base de Donn\u00e9es Firebase React est un excellent moyen de g\u00e9rer des donn\u00e9es en temps r\u00e9el dans vos applications web modernes. Firebase offre&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3192,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6124","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\/6124","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=6124"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6124\/revisions"}],"predecessor-version":[{"id":6125,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6124\/revisions\/6125"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3192"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}