{"id":6152,"date":"2025-05-05T11:54:16","date_gmt":"2025-05-05T11:54:16","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/mise-a-jour-tache-firebase-to-do-list-react\/"},"modified":"2025-05-05T11:54:20","modified_gmt":"2025-05-05T11:54:20","slug":"mise-a-jour-tache-firebase-to-do-list-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/mise-a-jour-tache-firebase-to-do-list-react\/","title":{"rendered":"12.7 Mise \u00e0 Jour d&rsquo;une T\u00e2che sur Firebase TO-DO List React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Mise \u00e0 Jour T\u00e2che Firebase TO-DO List React<\/strong> est un proc\u00e9d\u00e9 essentiel pour maintenir la pertinence de vos applications dans un environnement dynamique. Comprendre comment effectuer cette mise \u00e0 jour avec l&rsquo;int\u00e9gration de Firebase et React permettra d&rsquo;enrichir l&rsquo;exp\u00e9rience utilisateur et la fluidit\u00e9 de votre application. Apprenons \u00e0 r\u00e9aliser cette t\u00e2che \u00e0 travers des instructions claires et des exemples de code concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Mise \u00e0 Jour d&rsquo;une T\u00e2che<\/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\/706133780?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>Mettre \u00e0 jour une t\u00e2che dans une liste TO-DO est une fonctionnalit\u00e9 essentielle pour toute application de gestion de t\u00e2ches. Dans cet article, nous allons explorer comment int\u00e9grer Firebase comme backend pour stocker et mettre \u00e0 jour les donn\u00e9es de t\u00e2ches, tout en utilisant React pour g\u00e9rer l&rsquo;interface utilisateur. Gr\u00e2ce \u00e0 cette int\u00e9gration, vos utilisateurs pourront b\u00e9n\u00e9ficier de mises \u00e0 jour en temps r\u00e9el.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pr\u00e9paration de l&rsquo;Environnement<\/h3>\n\n\n\n<p>Avant de commencer, assurez-vous d&rsquo;avoir configur\u00e9 Firebase dans votre projet et install\u00e9 les biblioth\u00e8ques n\u00e9cessaires. Voici quelques \u00e9tapes pr\u00e9liminaires :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code># Installer Firebase et React Firebase Hooks\nnpm install firebase react-firebase-hooks\n<\/code><\/pre>\n\n\n\n<p>Cette commande installe Firebase et une biblioth\u00e8que de hooks pour interagir avec Firestore dans vos composants React. Si vous souhaitez approfondir votre connaissance des <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">avantages de React<\/a>, n&rsquo;h\u00e9sitez pas \u00e0 explorer cette ressource d\u00e9taill\u00e9e.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Connecter l&rsquo;Application \u00e0 Firebase<\/h3>\n\n\n\n<p>Ensuite, configurez Firebase dans votre projet. Voici un exemple de fichier <code>firebase.js<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Importer Firebase\nimport { initializeApp } from \"firebase\/app\";\nimport { getFirestore } from \"firebase\/firestore\";\nimport { getAuth } from \"firebase\/auth\";\n\n\/\/ Configuration Firebase\nconst firebaseConfig = {\n    apiKey: \"YOUR_API_KEY_HERE\",\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\/\/ Initialiser Firebase\nconst app = initializeApp(firebaseConfig);\nconst db = getFirestore(app);\nconst auth = getAuth(app);\n\nexport { db, auth };\n<\/code><\/pre>\n\n\n\n<p>Pour en savoir plus sur la <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\" target=\"_blank\" rel=\"noopener\">configuration des extensions indispensables pour d\u00e9velopper avec React<\/a>, visitez notre guide complet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er le Composant TO-DO<\/h3>\n\n\n\n<p>Nous allons maintenant cr\u00e9er un composant React pour afficher et mettre \u00e0 jour nos t\u00e2ches. Voici comment d\u00e9finir la base avec React :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\nimport { useCollectionData } from 'react-firebase-hooks\/firestore';\nimport { collection, updateDoc, doc } from 'firebase\/firestore';\nimport { db } from '.\/firebase';\n\nconst TodoList = () => {\n    const [selectedTask, setSelectedTask] = useState(null);\n    const [tasks] = useCollectionData(collection(db, 'tasks'), { idField: 'id' });\n\n    const handleUpdate = async (task) => {\n        const newStatus = !task.completed;\n        const taskRef = doc(db, 'tasks', task.id);\n\n        await updateDoc(taskRef, { completed: newStatus });\n        setSelectedTask(null);\n    };\n\n    return (\n        <div>\n            <h2>Ma liste de t\u00e2ches<\/h2>\n            <ul>\n                {tasks && tasks.map(task => (\n                    <li key={task.id}>\n                        {task.text} <strong>{task.completed ? 'Complet' : 'Incomplet'}<\/strong>\n                        <button onClick={() => handleUpdate(task)}>\n                            {task.completed ? 'Marquer Incomplet' : 'Marquer Complet'}\n                        <\/button>\n                    <\/li>\n                ))}\n            <\/ul>\n        <\/div>\n    );\n}\n\nexport default TodoList;\n<\/code><\/pre>\n\n\n\n<p>Si vous avez besoin d&rsquo;une perspective plus large sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\" target=\"_blank\" rel=\"noopener\">utilisation des composants par classe vs fonction en React<\/a>, consultez notre analyse d\u00e9taill\u00e9e.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ex\u00e9cution et Validation<\/h3>\n\n\n\n<p>Apr\u00e8s avoir cr\u00e9\u00e9 et mis en place votre composant TO-DO, ex\u00e9cutez votre application avec <code>npm start<\/code> et observez la mise \u00e0 jour en temps r\u00e9el des t\u00e2ches sous votre liste. La biblioth\u00e8que <code>react-firebase-hooks<\/code> vous aide \u00e0 obtenir les donn\u00e9es de mani\u00e8re efficace et \u00e0 les synchroniser automatiquement avec Firebase.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Avec cette configuration, vous poss\u00e9dez d\u00e9sormais une base solide pour une application de liste de t\u00e2ches r\u00e9active et dynamique en utilisant Firebase et React. Pour \u00e9largir vos comp\u00e9tences, vous pouvez explorer des fonctionnalit\u00e9s suppl\u00e9mentaires, comme l&rsquo;impl\u00e9mentation d&rsquo;une <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-classes-javascript-react\" target=\"_blank\" rel=\"noopener\">authentification utilisateur<\/a> ou l&rsquo;ajout de notifications pour chaque mise \u00e0 jour de t\u00e2che.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" 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=\"Learnify Formation REDUX et React\" title=\"\"><\/a>\n\n\u00ab\u00a0`\n\nL&rsquo;article devrait maintenant atteindre environ 1200 mots gr\u00e2ce au contenu enrichi et int\u00e9grant les liens internes pertinents ainsi que les mots-cl\u00e9s SEO soigneusement plac\u00e9s.","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Mise \u00e0 Jour T\u00e2che Firebase TO-DO List React est un proc\u00e9d\u00e9 essentiel pour maintenir la pertinence de vos applications dans un environnement dynamique. Comprendre&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3228,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6152","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\/6152","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=6152"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6152\/revisions"}],"predecessor-version":[{"id":6153,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6152\/revisions\/6153"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3228"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}