{"id":5998,"date":"2024-10-15T09:24:56","date_gmt":"2024-10-15T09:24:56","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/supprimer-dynamiquement-composants-react\/"},"modified":"2024-10-15T09:25:01","modified_gmt":"2024-10-15T09:25:01","slug":"supprimer-dynamiquement-composants-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/supprimer-dynamiquement-composants-react\/","title":{"rendered":"8.4 Supprimer Dynamiquement des Composants en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Supprimer Composants Dynamiques React<\/strong> est une technique essentielle pour la cr\u00e9ation d&rsquo;interfaces utilisateur interactives et r\u00e9actives. Dans cet article, nous allons apprendre \u00e0 g\u00e9rer la suppression dynamique de composants en React, en d\u00e9crivant comment utiliser le \u00ab state \u00bb et la m\u00e9thode \u00ab setState \u00bb pour manipuler efficacement l&rsquo;interface utilisateur. Suivez-moi pour ma\u00eetriser cette comp\u00e9tence pr\u00e9cieuse \u00e0 travers des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Suppression Dynamique de Composants en 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\/706096047?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>Dans le monde du d\u00e9veloppement avec React, la gestion dynamique des composants est cruciale pour cr\u00e9er des applications front-end modernes et \u00e9volu\u00e9es. La capacit\u00e9 de supprimer des composants de mani\u00e8re dynamique permet aux d\u00e9veloppeurs d&rsquo;am\u00e9liorer l&rsquo;interactivit\u00e9 et la fluidit\u00e9 des applications.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre le Fonctionnement Interne des Composants<\/h3>\n\n\n\n<p>En React, chaque composant de l&rsquo;interface utilisateur est repr\u00e9sent\u00e9 sous la forme d&rsquo;une classe ou d&rsquo;une fonction. Ces composants peuvent \u00eatre ajout\u00e9s ou supprim\u00e9s \u00e0 partir de l&rsquo;arbre DOM (Document Object Model) en manipulant l&rsquo;\u00e9tat (state) de l&rsquo;application. Utilisons React pour illustrer ce processus. Pour approfondir vos connaissances sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\/\" target=\"_blank\" rel=\"noopener\">React et ses avantages<\/a>, explorez cet article d\u00e9di\u00e9.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction App() {\n  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);\n\n  const handleRemove = (index) => {\n    const newItems = items.slice();\n    newItems.splice(index, 1);\n    setItems(newItems);\n  };\n\n  return (\n    <div>\n      <h2>Liste des \u00e9l\u00e9ments<\/h2>\n      <ul>\n        {items.map((item, index) => (\n          <li key={index}>\n            {item} <button onClick={() => handleRemove(index)}>Supprimer<\/button>\n          <\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mise en Pratique : Int\u00e9gration de la Suppression de Composants<\/h3>\n\n\n\n<p>L&rsquo;exemple ci-dessus utilise le hook \u00ab useState \u00bb pour maintenir une liste d&rsquo;\u00e9l\u00e9ments. La fonction \u00ab handleRemove \u00bb prend un index en argument, et utilise la m\u00e9thode \u00ab splice \u00bb pour retirer l&rsquo;\u00e9l\u00e9ment du tableau d&rsquo;\u00e9tat. Enfin, elle met \u00e0 jour l&rsquo;\u00e9tat \u00e0 l&rsquo;aide de \u00ab setItems \u00bb. Pour d\u00e9couvrir comment <a href=\"https:\/\/wikiform.fr\/codespace\/differences-entre-props-et-state-react\/\" target=\"_blank\" rel=\"noopener\">props et state<\/a> influencent ces manipulations, consultez nos ressources.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Avantages de la Suppression Dynamique<\/h3>\n\n\n\n<p>Cette approche de suppression dynamique de composants offre plusieurs avantages :<br>\n1. **R\u00e9activit\u00e9 am\u00e9lior\u00e9e** : les applications r\u00e9agissent imm\u00e9diatement aux interactions utilisateur.<br>\n2. **Simplicit\u00e9 du code** : l&rsquo;utilisation de hooks et de fonctions facilite la gestion de l&rsquo;\u00e9tat. Pour en apprendre plus sur les techniques de suppression, vous pouvez lire cet <a href=\"https:\/\/wikiform.fr\/codespace\/lister-dynamiquement-composants-react\/\" target=\"_blank\" rel=\"noopener\">article li\u00e9<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Prochaines \u00c9tapes et Bonnes Pratiques<\/h3>\n\n\n\n<p>Pour aller plus loin, consid\u00e9rez les meilleures pratiques suivantes :<br>\n1. **Gestion de l&rsquo;\u00e9tat** : Utilisez des biblioth\u00e8ques comme Redux pour g\u00e9rer des \u00e9tats plus complexes.<br>\n2. **Performance** : Optimisez vos composants pour minimiser les re-rendus inutiles. Pour plus d&rsquo;informations, explorez comment <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-react-fragments-utiliser\/\" target=\"_blank\" rel=\"noopener\">utiliser React Fragments<\/a> pour simplifier vos rendus.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Utiliser la suppression dynamique de composants en React est essentiel pour d\u00e9velopper des applications modernes et interactives. En ma\u00eetrisant ces concepts, vous cr\u00e9ez des interfaces utilisateur fluides et r\u00e9actives qui s&rsquo;adaptent aux besoins de vos utilisateurs. Continuez votre apprentissage avec nos <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\/\" target=\"_blank\" rel=\"noopener\">tutoriels React sur la gestion des \u00e9tats et les optimisations des performances<\/a>. Pour plus de bonnes pratiques li\u00e9es aux composants en React, n&rsquo;h\u00e9sitez pas \u00e0 consulter cet <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-suppression-to-do-list-react\/\" target=\"_blank\" rel=\"noopener\">article d\u00e9taill\u00e9<\/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-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation React Offre 50%\" title=\"\"><\/a>\n\n\n<!-- Promo Learnify Redux -->\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\" style=\"margin-top: 20px;\" alt=\"\" title=\"\"><\/a>\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Supprimer Composants Dynamiques React est une technique essentielle pour la cr\u00e9ation d&rsquo;interfaces utilisateur interactives et r\u00e9actives. Dans cet article, nous allons apprendre \u00e0 g\u00e9rer&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3274,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5998","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\/5998","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=5998"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5998\/revisions"}],"predecessor-version":[{"id":5999,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5998\/revisions\/5999"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3274"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}