{"id":5976,"date":"2024-10-06T09:24:19","date_gmt":"2024-10-06T09:24:19","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/modifier-style-utilisant-javascript-react\/"},"modified":"2024-10-06T09:24:24","modified_gmt":"2024-10-06T09:24:24","slug":"modifier-style-utilisant-javascript-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/modifier-style-utilisant-javascript-react\/","title":{"rendered":"7.6 Modifier le Style en Utilisant JavaScript en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Modifier Style JavaScript React<\/strong> est une comp\u00e9tence pr\u00e9cieuse pour les d\u00e9veloppeurs cherchant \u00e0 cr\u00e9er des interfaces utilisateur r\u00e9actives et dynamiques. Comprendre comment manipuler les styles directement \u00e0 partir de vos composants React vous permettra de fournir une exp\u00e9rience utilisateur immersive. Dans ce tutoriel, nous allons explorer comment cela fonctionne et comment l&rsquo;impl\u00e9menter avec des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Modification des Styles en React avec JavaScript<\/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\/706091209?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) {\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();\n    }\n});\n<\/script>\n\n\n\n<p>Dans React, les styles inline et les classes CSS sont couramment utilis\u00e9s pour mettre en forme vos composants. Cependant, pour cr\u00e9er des interactions plus dynamiques, vous pouvez utiliser JavaScript pour modifier les styles de mani\u00e8re conditionnelle ou en r\u00e9ponse aux \u00e9v\u00e9nements utilisateur. Pour en savoir plus sur les <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\">composants par classe et fonction en React<\/a>, consultez cet article.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Styles Inline avec les Objets JavaScript<\/h3>\n\n\n\n<p>Les objets JavaScript sont souvent utilis\u00e9s pour d\u00e9finir des styles inline dans React. Cette m\u00e9thode permet de lier les propri\u00e9t\u00e9s CSS directement \u00e0 des variables JavaScript, ce qui offre plus de flexibilit\u00e9 pour des modifications dynamiques. Apprenez comment <a href=\"https:\/\/wikiform.fr\/codespace\/maitriser-objets-javascript-developper-react\">ma\u00eetriser les objets en JavaScript pour d\u00e9velopper en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\n\nfunction StyledComponent() {\n  const style = {\n    color: 'blue',\n    backgroundColor: 'lightgray',\n    padding: '10px',\n    borderRadius: '5px',\n  };\n\n  return (\n    <div style={style}>\n      Ce texte est stylis\u00e9 avec des styles JavaScript inline.\n    <\/div>\n  );\n}\n\nexport default StyledComponent;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Modifier Dynamiquement les Styles avec les \u00c9v\u00e9nements<\/h3>\n\n\n\n<p>Une des puissantes fonctionnalit\u00e9s de React est la capacit\u00e9 de modifier les styles en r\u00e9ponse \u00e0 des \u00e9v\u00e9nements utilisateur, comme les hover, clicks ou soumissions de formulaire. Si vous souhaitez approfondir votre compr\u00e9hension des <a href=\"https:\/\/wikiform.fr\/codespace\/evenements-disponibles-react-guide\">\u00e9v\u00e9nements disponibles dans React<\/a>, explorez notre guide complet.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction DynamicStyledButton() {\n  const [hovered, setHovered] = useState(false);\n\n  const buttonStyle = {\n    backgroundColor: hovered ? 'darkblue' : 'blue',\n    color: 'white',\n    padding: '10px 20px',\n    border: 'none',\n    borderRadius: '5px',\n    cursor: 'pointer',\n  };\n\n  return (\n    <button\n      style={buttonStyle}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n    >\n      Hover me!\n    <\/button>\n  );\n}\n\nexport default DynamicStyledButton;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Application dans un Projet R\u00e9el<\/h3>\n\n\n\n<p>Prenons l\u2019exemple d\u2019une to-do liste o\u00f9 chaque \u00e9l\u00e9ment peut \u00eatre surlign\u00e9 pour indiquer qu\u2019il est termin\u00e9. Les styles seront modifi\u00e9s dynamiquement lors de l\u2019interaction utilisateur. D\u00e9couvrez comment <a href=\"https:\/\/wikiform.fr\/codespace\/projet-to-do-list-react-qu-allons-nous-faire\">mener un projet de to-do list avec React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction TodoItem({ task }) {\n  const [completed, setCompleted] = useState(false);\n\n  const taskStyle = {\n    textDecoration: completed ? 'line-through' : 'none',\n    cursor: 'pointer',\n  };\n\n  return (\n    <li style={taskStyle} onClick={() => setCompleted(!completed)}>\n      {task}\n    <\/li>\n  );\n}\n\nfunction TodoList() {\n  const tasks = ['Apprendre React', 'Compl\u00e9ter cet exemple', 'Lire la documentation'];\n\n  return (\n    <ul>\n      {tasks.map(task => (\n        <TodoItem key={task} task={task} \/>\n      ))}\n    <\/ul>\n  );\n}\n\nexport default TodoList;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La modification des styles en utilisant JavaScript dans React vous permet de cr\u00e9er des applications plus interactives et r\u00e9actives. En explorant les styles inline, l&rsquo;utilisation d&rsquo;\u00e9v\u00e9nements et de hooks, vous \u00eates d\u00e9sormais \u00e9quip\u00e9 pour manipuler les apparences de vos composants de mani\u00e8re dynamique. Pour approfondir vos connaissances, consultez des <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">tutoriels sur la cr\u00e9ation de votre premi\u00e8re application React<\/a>. N&rsquo;h\u00e9sitez pas aussi \u00e0 consulter des ressources suppl\u00e9mentaires comme la <a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" rel=\"dofollow noopener\" target=\"_blank\">documentation officielle de React<\/a> ou des cours sur des plateformes comme <a href=\"https:\/\/www.udemy.com\/\" rel=\"dofollow noopener\" target=\"_blank\">Udemy<\/a> et <a href=\"https:\/\/www.coursera.org\/\" rel=\"dofollow noopener\" target=\"_blank\">Coursera<\/a> pour continuer \u00e0 d\u00e9velopper vos comp\u00e9tences en d\u00e9veloppement front-end.<\/p>\n\n\n<!-- Image Banner -->\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\">\n  <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 sur Learnify\" title=\"\">\n<\/a>\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Modifier Style JavaScript React est une comp\u00e9tence pr\u00e9cieuse pour les d\u00e9veloppeurs cherchant \u00e0 cr\u00e9er des interfaces utilisateur r\u00e9actives et dynamiques. Comprendre comment manipuler les&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3236,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5976","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\/5976","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=5976"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5976\/revisions"}],"predecessor-version":[{"id":5977,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5976\/revisions\/5977"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3236"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}