{"id":6000,"date":"2024-10-16T09:25:16","date_gmt":"2024-10-16T09:25:16","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/modifier-dynamiquement-composants-react\/"},"modified":"2024-10-16T09:25:21","modified_gmt":"2024-10-16T09:25:21","slug":"modifier-dynamiquement-composants-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/modifier-dynamiquement-composants-react\/","title":{"rendered":"8.5 Modifier Dynamiquement des Composants en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Modifier Composants Dynamiques React<\/strong> est une comp\u00e9tence essentielle pour les d\u00e9veloppeurs frontend modernes souhaitant cr\u00e9er des applications web interactives et r\u00e9actives. Gr\u00e2ce \u00e0 la puissance de React, il devient possible de construire des interfaces utilisateurs qui changent de mani\u00e8re fluide en r\u00e9ponse aux actions des utilisateurs ou aux mises \u00e0 jour des donn\u00e9es. D\u00e9couvrons ensemble comment modifier dynamiquement des composants React \u00e0 travers des exemples concrets de code. Si vous \u00eates nouveau dans cet univers, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/prets-a-decouvrir-react-guide-introduction\">pr\u00eats \u00e0 d\u00e9couvrir React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Modification Composants Dynamiques 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\/706096117?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>React est une biblioth\u00e8que JavaScript populaire pour la cr\u00e9ation d&rsquo;interfaces utilisateur. L&rsquo;une de ses fonctionnalit\u00e9s cl\u00e9 est le rendu dynamique, permettant de mettre \u00e0 jour l&rsquo;affichage des composants en r\u00e9ponse aux changements d&rsquo;\u00e9tat ou de props. Que vous souhaitiez cr\u00e9er une animation, changer le style en fonction de l&rsquo;interaction ou afficher des donn\u00e9es conditionnelles, React offre des outils puissants pour ces t\u00e2ches. Explorons comment cela fonctionne avec quelques exemples. Pour aller plus loin, d\u00e9couvrez comment <a href=\"https:\/\/wikiform.fr\/codespace\/lister-dynamiquement-composants-react\">lister dynamiquement des composants<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Modifier le Style en Fonction de l&rsquo;\u00c9tat<\/h3>\n\n\n\n<p>Commen\u00e7ons par un simple exemple o\u00f9 nous allons changer la couleur d&rsquo;un bouton en fonction de l&rsquo;\u00e9tat. Ce concept est une base pour <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">cr\u00e9er votre premi\u00e8re application en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-jsx\"><code>import React, { useState } from 'react';\n\nconst ColorChangingButton = () => {\n  const [isClicked, setIsClicked] = useState(false);\n\n  const toggleColor = () => {\n    setIsClicked(!isClicked);\n  };\n\n  return (\n    <button \n      onClick={toggleColor} \n      style={{ backgroundColor: isClicked ? 'blue' : 'green' }}\n    >\n      {isClicked ? 'Activated' : 'Deactivate'}\n    <\/button>\n  );\n};\n\nexport default ColorChangingButton;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Rendre Des Composants Dynamiques avec Des Props<\/h3>\n\n\n\n<p>Les props en React sont pass\u00e9es dans les composants pour influer sur leur comportement sans devoir modifier leur \u00e9tat interne. Voici comment vous pouvez utiliser les props pour rendre un composant de liste dynamique. Pour plus de d\u00e9tails sur les props, consultez <a href=\"https:\/\/wikiform.fr\/codespace\/a-la-decouverte-des-props-react-guide\">\u00c0 la d\u00e9couverte des props en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-jsx\"><code>import React from 'react';\n\nconst DynamicList = ({ items }) => {\n  return (\n    <ul>\n      {items.map((item, index) => (\n        <li key={index}>{item}<\/li>\n      ))}\n    <\/ul>\n  );\n};\n\n\/\/ Utilisation du composant DynamicList\nconst App = () => {\n  const fruits = ['Apple', 'Banana', 'Cherry'];\n\n  return <DynamicList items={fruits} \/>;\n};\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des Hooks pour les Mises \u00e0 Jour Asynchrones<\/h3>\n\n\n\n<p>Avec les Hooks, React a rendu la gestion d&rsquo;\u00c9tat et d&rsquo;autres fonctionnalit\u00e9s tr\u00e8s flexibles. Utilisons le Hook <code>useEffect<\/code> pour faire une mise \u00e0 jour asynchrone d&rsquo;un composant. Pour mieux comprendre, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-state-avec-react-hooks-guide\">guide sur l&rsquo;utilisation de State avec React Hooks<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-jsx\"><code>import React, { useState, useEffect } from 'react';\n\nconst FetchDataComponent = () => {\n  const [data, setData] = useState(null);\n\n  useEffect(() => {\n    fetch('https:\/\/api.example.com\/data')\n      .then(response => response.json())\n      .then(data => setData(data));\n  }, []);\n\n  return (\n    <div>\n      {data ? <p>{data.message}<\/p> : <p>Loading...<\/p>}\n    <\/div>\n  );\n};\n\nexport default FetchDataComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Animation et Transition en R\u00e9action \u00e0 des Modifications d&rsquo;\u00c9tat<\/h3>\n\n\n\n<p>Les animations en React se g\u00e8rent souvent avec les CSS ou des biblioth\u00e8ques comme react-transition-group. Voici une simple transition utilisant CSS pour une prise de conscience interactive. Vous pouvez approfondir cette notion en consultant notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-dynamiquement-css-modules-css-react\">modifier dynamiquement les CSS avec React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-jsx\"><code>import React, { useState } from 'react';\nimport '.\/fadeEffect.css';\n\nconst FadeInComponent = () => {\n  const [visible, setVisible] = useState(false);\n\n  const toggleVisibility = () => {\n    setVisible(!visible);\n  };\n\n  return (\n    <div>\n      <button onClick={toggleVisibility}>\n        {visible ? 'Hide' : 'Show'} Element\n      <\/button>\n      <div className={visible ? 'fade-in' : 'fade-out'}>\n        This text has a fade effect!\n      <\/div>\n    <\/div>\n  );\n};\n\nexport default FadeInComponent;\n\n\/\/ CSS (fadeEffect.css)\n.fade-in {\n  opacity: 1;\n  transition: opacity 1s ease-in;\n}\n\n.fade-out {\n  opacity: 0;\n  transition: opacity 1s ease-out;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Applications R\u00e9elles et Avanc\u00e9es<\/h3>\n\n\n\n<p>Dans une application r\u00e9elle, ces techniques peuvent \u00eatre combin\u00e9es pour cr\u00e9er des exp\u00e9riences utilisateur sophistiqu\u00e9es. Par exemple, un tableau de bord d&rsquo;analyse de donn\u00e9es peut utiliser des graphiques qui se mettent \u00e0 jour en temps r\u00e9el avec de nouvelles donn\u00e9es re\u00e7ues via des websockets, tout en permettant \u00e0 l&rsquo;utilisateur de personnaliser l&rsquo;affichage \u00e0 travers des interactions intuitives. Pour un projet pratique, consultez notre guide sur les <a href=\"https:\/\/wikiform.fr\/codespace\/projet-markdown-react-qu-allons-nous-faire\">projets Markdown React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-jsx\"><code>\/\/ Cet exemple est con\u00e7u pour \u00eatre simple et illustratif. Un projet complet devrait \u00eatre plus structur\u00e9.\n\nimport React, { useState } from 'react';\nimport Charts from 'charting-library'; \/\/ Hypothetical library\n\nconst DataDashboard = () => {\n  const [chartData, setChartData] = useState(initialChartData);\n\n  \/\/ Simulate data streaming\n  const updateData = () => {\n    \/\/ Update chartData with new streaming data\n  };\n\n  useEffect(() => {\n    const interval = setInterval(updateData, 5000); \/\/ Update every 5 seconds\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <div>\n      <h1>Data Analytics Dashboard<\/h1>\n      <Charts data={chartData} \/>\n    <\/div>\n  );\n};\n\nexport default DataDashboard;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La modification dynamique des composants en React offre une flexibilit\u00e9 \u00e9norme pour construire des interfaces utilisateur robustes et r\u00e9actives. En ma\u00eetrisant l&rsquo;utilisation des \u00e9tats, des props, et des hooks, vous pouvez cr\u00e9er des applications web hautement interactives qui r\u00e9pondent \u00e0 divers sc\u00e9narios utilisateur. Continuez \u00e0 pratiquer et \u00e0 explorer les autres fonctionnalit\u00e9s de React pour tirer pleinement parti de sa puissance. Pour plus de contenu sur React, consultez les tutoriels avanc\u00e9s sur <a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">le site officiel de React<\/a> ou explorez des cours en ligne sur des plateformes comme <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Udemy<\/a> et <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Coursera<\/a>. Vous pouvez aussi consulter les <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-dynamiquement-composants-react\">meilleurs logiciels pour d\u00e9velopper en React<\/a> pour vous faciliter la t\u00e2che. Pour ceux int\u00e9ress\u00e9s par des cours sp\u00e9cialis\u00e9s, d\u00e9couvrez <a href=\"https:\/\/www.pluralsight.com\/\" target=\"_blank\" rel=\"dofollow noopener noreferrer\">Pluralsight<\/a>.<\/p>\n\n\n<!-- Lien vers la formation Learnify -->\n<p><a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener noreferrer\"><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\" title=\"\"><\/a><\/p>\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Modifier Composants Dynamiques React est une comp\u00e9tence essentielle pour les d\u00e9veloppeurs frontend modernes souhaitant cr\u00e9er des applications web interactives et r\u00e9actives. Gr\u00e2ce \u00e0 la&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3233,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6000","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\/6000","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=6000"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6000\/revisions"}],"predecessor-version":[{"id":6001,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6000\/revisions\/6001"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3233"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}