{"id":6154,"date":"2025-05-12T11:54:29","date_gmt":"2025-05-12T11:54:29","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/permettre-suppression-tache-firebase-react\/"},"modified":"2025-05-12T11:54:33","modified_gmt":"2025-05-12T11:54:33","slug":"permettre-suppression-tache-firebase-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/permettre-suppression-tache-firebase-react\/","title":{"rendered":"13.1 Permettre la Suppression d&rsquo;une T\u00e2che Firebase React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Suppression T\u00e2che Firebase React<\/strong> est essentielle pour maintenir une application propre et organis\u00e9e. Avec les techniques appropri\u00e9es, vous pouvez non seulement supprimer les t\u00e2ches de votre base de donn\u00e9es mais \u00e9galement mettre \u00e0 jour l&rsquo;interface utilisateur en temps r\u00e9el. Plongeons ensemble dans le processus et voyons comment proc\u00e9der \u00e9tape par \u00e9tape.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Suppression T\u00e2che 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\/706134156?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>En utilisant Firebase avec React, vous pouvez simplifier les op\u00e9rations CRUD, y compris la suppression de donn\u00e9es. Comprendre comment ces deux outils interagissent est vital pour tout d\u00e9veloppeur frontend utilisant Firebase. Voici comment vous pouvez impl\u00e9menter cette fonctionnalit\u00e9 dans vos projets.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configuration de Firebase dans votre Projet<\/h3>\n\n\n\n<p>Avant de pouvoir interagir avec Firebase pour supprimer une t\u00e2che, vous devez configurer Firebase dans votre projet React. Voici comment commencer :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import firebase from \"firebase\/app\";\nimport \"firebase\/firestore\";\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\nfirebase.initializeApp(firebaseConfig);\n\nconst db = firebase.firestore();\n\nexport { db };\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Afficher les T\u00e2ches depuis Firebase<\/h3>\n\n\n\n<p>Dans cette \u00e9tape, nous allons extraire les t\u00e2ches depuis Firestore pour les afficher dans notre application React. Nous allons \u00e9galement pr\u00e9voir une option de suppression \u00e0 c\u00f4t\u00e9 de chaque t\u00e2che. Pour mieux g\u00e9rer la suppression des t\u00e2ches avec Firebase, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/permettre-suppression-tache-firebase-react\" target=\"_blank\" rel=\"noopener\">guide avanc\u00e9<\/a> sur ce sujet.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState, useEffect } from 'react';\nimport { db } from '.\/firebaseConfig';\n\nconst TaskList = () => {\n  const [tasks, setTasks] = useState([]);\n\n  useEffect(() => {\n    const unsubscribe = db.collection('tasks')\n      .onSnapshot((snapshot) => {\n        const tasksData = snapshot.docs.map(doc => ({\n          id: doc.id,\n          ...doc.data()\n        }));\n        setTasks(tasksData);\n      });\n\n    return () => unsubscribe();\n  }, []);\n\n  return (\n    <ul>\n      {tasks.map(task => (\n        <li key={task.id}>\n          {task.name}\n          <button onClick={() => handleDelete(task.id)}>Delete<\/button>\n        <\/li>\n      ))}\n    <\/ul>\n  );\n};\n\nexport default TaskList;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Impl\u00e9menter la Suppression de T\u00e2che<\/h3>\n\n\n\n<p>Pour supprimer une t\u00e2che, nous allons utiliser la m\u00e9thode <code>delete<\/code> fournie par Firestore. Assurez-vous que chaque t\u00e2che a un identifiant unique dans votre base de donn\u00e9es pour que la suppression fonctionne efficacement. D\u00e9couvrez \u00e9galement comment <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-suppression-to-do-list-react\" target=\"_blank\" rel=\"noopener\">g\u00e9rer la suppression dans une to-do list<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const handleDelete = (taskId) => {\n  db.collection('tasks').doc(taskId).delete()\n    .then(() => {\n      console.log('T\u00e2che supprim\u00e9e avec succ\u00e8s!');\n    })\n    .catch(error => {\n      console.error('Erreur lors de la suppression de la t\u00e2che: ', error);\n    });\n};\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mettre \u00e0 Jour l&rsquo;Interface Utilisateur en Temps R\u00e9el<\/h3>\n\n\n\n<p>Gr\u00e2ce \u00e0 Firestore, les mises \u00e0 jour sont synchronis\u00e9es en temps r\u00e9el. Cela signifie que lorsque vous supprimez une t\u00e2che, l&rsquo;interface utilisateur est mise \u00e0 jour automatiquement sans recharger la page. Pour aller plus loin, d\u00e9couvrez comment <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-dynamiquement-composants-react\" target=\"_blank\" rel=\"noopener\">modifier dynamiquement les composants<\/a> dans React.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>{tasks.map(task => (\n  <li key={task.id}>\n    {task.name}\n    <button onClick={() => handleDelete(task.id)}>Delete<\/button>\n  <\/li>\n))}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La <strong>suppression d&rsquo;une t\u00e2che Firebase avec React<\/strong> est un processus simple lorsque vous disposez des bons outils et d&rsquo;une bonne compr\u00e9hension de l&rsquo;interaction entre votre front-end et la base de donn\u00e9es. En suivant les \u00e9tapes ci-dessus, vous devriez \u00eatre en mesure d&rsquo;impl\u00e9menter cette fonctionnalit\u00e9 dans vos applications avec succ\u00e8s.<\/p>\n\n\n\n<p>Pour aller plus loin, n&rsquo;h\u00e9sitez pas \u00e0 explorer des fonctionnalit\u00e9s comme l&rsquo;authentification des utilisateurs ou encore l&rsquo;ajout de notifications en temps r\u00e9el pour enrichir vos apps. Pour approfondir vos comp\u00e9tences en React, suivez notre formation d\u00e9taill\u00e9e sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\">la cr\u00e9ation de sites interactifs avec React et Redux<\/a>. D\u00e9couvrez \u00e9galement nos guides sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">l&rsquo;introduction \u00e0 React<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-classes-javascript-react\" target=\"_blank\" rel=\"noopener\">l&rsquo;utilisation des classes JavaScript avec React<\/a>.<\/p>\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=\"Learnify Formation Redux et React\" style=\"max-width:100%; height:auto;\" title=\"\"><\/a>\n\n\n<!-- External Links -->\n<p>Prenez le temps de lire des <a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"dofollow noopener\">documents officiels React<\/a> pour approfondir vos connaissances. Consultez aussi la <a href=\"https:\/\/firebase.google.com\/docs\" target=\"_blank\" rel=\"dofollow noopener\">documentation Firebase<\/a> pour mieux ma\u00eetriser la suppression des t\u00e2ches.<\/p>\n\n<p>Si vous \u00eates int\u00e9ress\u00e9 par la gestion des op\u00e9rations CRUD avec Axios, un autre outil utile est <a href=\"https:\/\/axios-http.com\/\" target=\"_blank\" rel=\"dofollow noopener\">Axios<\/a>, une biblioth\u00e8que que vous pourriez envisager d&rsquo;int\u00e9grer.<\/p>\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Suppression T\u00e2che Firebase React est essentielle pour maintenir une application propre et organis\u00e9e. Avec les techniques appropri\u00e9es, vous pouvez non seulement supprimer les t\u00e2ches&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3240,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6154","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\/6154","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=6154"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6154\/revisions"}],"predecessor-version":[{"id":6155,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6154\/revisions\/6155"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3240"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}