{"id":6196,"date":"2025-10-13T11:55:12","date_gmt":"2025-10-13T11:55:12","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ajouter-article-firebase-react\/"},"modified":"2025-10-13T11:55:17","modified_gmt":"2025-10-13T11:55:17","slug":"ajouter-article-firebase-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ajouter-article-firebase-react\/","title":{"rendered":"16.7 Ajouter un Article sur Firebase avec React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Ajouter Article Firebase React<\/strong> est une comp\u00e9tence essentielle pour les d\u00e9veloppeurs souhaitant cr\u00e9er des applications web modernes et r\u00e9actives. Firebase, en tant que plateforme offerte par Google, permet de g\u00e9rer facilement les bases de donn\u00e9es en temps r\u00e9el, l&rsquo;authentification et bien plus encore. Ce tutoriel vous enseignera comment ajouter des articles \u00e0 Firebase en utilisant React, \u00e9tape par \u00e9tape.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>Firebase et 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\/706142383?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 solution Backend-as-a-Service (BaaS) qui facilite le d\u00e9veloppement d&rsquo;applications sans se soucier de la gestion des serveurs. En int\u00e9grant Firebase dans vos applications React, vous pouvez acc\u00e9der \u00e0 une base de donn\u00e9es temps r\u00e9el, ce qui est id\u00e9al pour des applications n\u00e9cessitant des mises \u00e0 jour instantan\u00e9es.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configurer Firebase dans une Application React<\/h3>\n\n\n\n<p>Pour utiliser Firebase dans notre projet React, nous devons d&rsquo;abord cr\u00e9er un projet Firebase et lier notre application React. Voici comment proc\u00e9der :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ \u00c9tape 1: Installer Firebase\nnpm install firebase\n\n\/\/ \u00c9tape 2: Initialiser Firebase dans votre projet\nimport { initializeApp } from \"firebase\/app\";\nimport { getFirestore } from \"firebase\/firestore\";\n\nconst firebaseConfig = {\n    apiKey: \"YOUR_API_KEY\",\n    authDomain: \"YOUR_PROJECT_ID.firebaseapp.com\",\n    projectId: \"YOUR_PROJECT_ID\",\n    storageBucket: \"YOUR_PROJECT_ID.appspot.com\",\n    messagingSenderId: \"YOUR_SENDER_ID\",\n    appId: \"YOUR_APP_ID\"\n};\n\n\/\/ Initialize Firebase\nconst app = initializeApp(firebaseConfig);\nconst db = getFirestore(app);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter un Article \u00e0 Firebase<\/h3>\n\n\n\n<p>Une fois Firebase configur\u00e9, nous pouvons ajouter des articles \u00e0 la base de donn\u00e9es Firestore. Cr\u00e9ez une fonction pour ajouter un article en utilisant Firestore comme suit :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import { collection, addDoc } from \"firebase\/firestore\"; \n\nconst addArticle = async (title, content) => {\n  try {\n    const docRef = await addDoc(collection(db, \"articles\"), {\n      title: title,\n      content: content,\n      created_at: new Date(),\n    });\n    console.log(\"Document written with ID: \", docRef.id);\n  } catch (e) {\n    console.error(\"Error adding document: \", e);\n  }\n};\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9grer l&rsquo;Ajout d&rsquo;Article avec l&rsquo;Interface Utilisateur<\/h3>\n\n\n\n<p>Cr\u00e9ez un formulaire simple dans votre composant React pour permettre aux utilisateurs d&rsquo;ajouter de nouveaux articles. Utilisez les hooks useState pour g\u00e9rer les valeurs d&rsquo;entr\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction ArticleForm() {\n  const [title, setTitle] = useState('');\n  const [content, setContent] = useState('');\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    addArticle(title, content);\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <input \n        type=\"text\" \n        placeholder=\"Titre...\" \n        value={title} \n        onChange={(e) => setTitle(e.target.value)} \n        required \n      \/>\n      <textarea \n        placeholder=\"Contenu...\" \n        value={content} \n        onChange={(e) => setContent(e.target.value)} \n        required \n      \/>\n      <button type=\"submit\">Ajouter l'article<\/button>\n    <\/form>\n  );\n}\n\nexport default ArticleForm;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Int\u00e9grer Firebase dans une application React ouvre la possibilit\u00e9 d&rsquo;acc\u00e9der \u00e0 une infrastructure robuste et \u00e9volutive pour g\u00e9rer les donn\u00e9es applicatives. Apr\u00e8s avoir vu comment ajouter des articles \u00e0 Firebase, il serait judicieux d\u2019explorer d&rsquo;autres fonctionnalit\u00e9s telles que <a href=\"https:\/\/wikiform.fr\/codespace\/afficher-pages-selon-adresse-visitee-react\" target=\"_blank\" rel=\"noopener\">l&rsquo;affichage de pages selon l&rsquo;adresse visit\u00e9e<\/a> ou <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">la cr\u00e9ation d&rsquo;une premi\u00e8re application React<\/a>. La documentation officielle de Firebase fournit une base solide pour aller plus loin. Pour une compr\u00e9hension plus approfondie, consid\u00e9rez \u00e9galement ces ressources sur <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-classes-javascript-react\" target=\"_blank\" rel=\"noopener\">l&rsquo;utilisation des classes JavaScript<\/a>, <a href=\"https:\/\/wikiform.fr\/codespace\/maitriser-objets-javascript-developper-react\" target=\"_blank\" rel=\"noopener\">la ma\u00eetrise des objets en JavaScript<\/a>, ou encore <a href=\"https:\/\/wikiform.fr\/codespace\/analyse-differents-etats-cycle-vie-react\" target=\"_blank\" rel=\"noopener\">l&rsquo;analyse du cycle de vie des applications React<\/a>. Pour enrichir votre compr\u00e9hension, n&rsquo;h\u00e9sitez pas \u00e0 visiter la <a href=\"https:\/\/firebase.google.com\/docs\" target=\"_blank\" rel=\"dofollow noopener\">documentation Firebase<\/a>, <a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"dofollow noopener\">les guides React officiels<\/a> et d&rsquo;autres ressources <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\" target=\"_blank\" rel=\"dofollow noopener\">sur JavaScript<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/mettre-en-place-page-accueil-react\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/images\/react-firebase-guide.png\" loading=\"lazy\" alt=\"Guide Complet React et Firebase\" title=\"\"><\/a>\n\n\n<!-- Cliquez sur l'image pour acc\u00e9der directement \u00e0 la formation -->\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 React et Redux Offre 50%\" title=\"\"><\/a>\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Ajouter Article Firebase React est une comp\u00e9tence essentielle pour les d\u00e9veloppeurs souhaitant cr\u00e9er des applications web modernes et r\u00e9actives. Firebase, en tant que plateforme&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3156,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6196","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\/6196","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=6196"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6196\/revisions"}],"predecessor-version":[{"id":6197,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6196\/revisions\/6197"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3156"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}