{"id":5968,"date":"2024-10-02T09:24:33","date_gmt":"2024-10-02T09:24:33","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-module-css-utiliser-react\/"},"modified":"2024-10-02T09:24:38","modified_gmt":"2024-10-02T09:24:38","slug":"qu-est-ce-qu-un-module-css-utiliser-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-module-css-utiliser-react\/","title":{"rendered":"7.2 Qu&rsquo;est-ce qu&rsquo;un Module CSS et l&rsquo;Utiliser dans React ?"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Les Modules CSS dans React<\/strong> sont des outils puissants pour la gestion des styles dans les applications JavaScript. En comprenant comment utiliser les <strong>Modules CSS dans React<\/strong>, vous pouvez cr\u00e9er des composants r\u00e9utilisables avec des styles encapsul\u00e9s, am\u00e9liorant ainsi l&rsquo;organisation et la maintenabilit\u00e9 de votre code. Apprenons comment fonctionnent les Modules CSS et comment les impl\u00e9menter avec des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Modules CSS dans 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\/706086343?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>Les Modules CSS sont une fonctionnalit\u00e9 CSS qui permet de scoper automatiquement les valeurs des classes et des animations localement par d\u00e9faut. Cela signifie que vous pouvez \u00e9crire des styles dans un fichier CSS et les importer dans votre composant React sans craindre les conflits de nom. Les styles d\u00e9finis dans un fichier Module CSS sont automatiquement encapsul\u00e9s et appliqu\u00e9s uniquement au composant qui les importe.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pourquoi Utiliser les Modules CSS dans React ?<\/h3>\n\n\n\n<p>Utiliser des Modules CSS dans React pr\u00e9sente plusieurs avantages :<\/p>\n<ul>\n  <li><strong>Encapsulation des styles<\/strong> : Les styles sont li\u00e9s \u00e0 un seul composant, \u00e9vitant ainsi les conflits de classe entre diff\u00e9rents composants.<\/li>\n  <li><strong>R\u00e9utilisabilit\u00e9<\/strong> : Les composants peuvent \u00eatre facilement r\u00e9utilis\u00e9s dans diff\u00e9rentes parties de l&rsquo;application sans se soucier des collisions de style.<\/li>\n  <li><strong>Gestion des d\u00e9pendances<\/strong> : Les d\u00e9pendances de style sont explicitement d\u00e9finies dans le fichier Javascript, rendant plus clair le lien entre le code et le style.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er et Importer un Module CSS<\/h3>\n\n\n\n<p>Commen\u00e7ons par cr\u00e9er un fichier Module CSS. En suivant les conventions, nous devons nommer notre fichier avec l&rsquo;extension <code>.module.css<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* styles.module.css *\/\n.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n  background-color: #f0f0f0;\n}\n\n.button {\n  padding: 10px 20px;\n  background-color: #007bff;\n  color: #fff;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n}\n<\/code><\/pre>\n\n\n\n<p>Ensuite, nous pouvons importer ce fichier CSS dans un composant React. Voici comment proc\u00e9der :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ MyComponent.jsx\nimport React from 'react';\nimport styles from '.\/styles.module.css';\n\nconst MyComponent = () => {\n  return (\n    <div className={styles.container}>\n      <button className={styles.button}>Cliquez-moi<\/button>\n    <\/div>\n  );\n};\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Param\u00e9trer son Environnement pour les Modules CSS<\/h3>\n\n\n\n<p>La plupart des configurations de build modernes, comme celles g\u00e9n\u00e9r\u00e9es par <a href=\"https:\/\/create-react-app.dev\/\" target=\"_blank\" rel=\"noopener\">Create React App<\/a>, prennent en charge les Modules CSS par d\u00e9faut. Cependant, si vous configurez manuellement votre projet Webpack, vous devez ajouter une configuration sp\u00e9cifique pour g\u00e9rer les Modules CSS :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ webpack.config.js\nmodule.exports = {\n  \/\/ ... autre configuration\n  module: {\n    rules: [\n      {\n        test: \/\\.module\\.css$\/,\n        use: [\n          'style-loader',\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des Classes Dynamiques avec les Modules CSS<\/h3>\n\n\n\n<p>Il est courant de vouloir ajouter des classes de mani\u00e8re conditionnelle \u00e0 un \u00e9l\u00e9ment dans React. Avec les Modules CSS, nous pouvons combiner plusieurs classes en utilisant des techniques comme <code>classnames<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ MyComponent.jsx\nimport React, { useState } from 'react';\nimport styles from '.\/styles.module.css';\nimport classNames from 'classnames';\n\nconst MyComponent = () => {\n  const [isActive, setIsActive] = useState(false);\n\n  const buttonClass = classNames({\n    [styles.button]: true,\n    [styles.active]: isActive,\n  });\n\n  return (\n    <div className={styles.container}>\n      <button className={buttonClass} onClick={() => setIsActive(!isActive)}>\n        {isActive ? 'Active' : 'Inactive'}\n      <\/button>\n    <\/div>\n  );\n};\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Scoped Styles avec les Modules CSS<\/h3>\n\n\n\n<p>L&rsquo;un des principaux avantages des Modules CSS est qu&rsquo;ils scopen les styles localement par d\u00e9faut. Cela signifie que les styles ne seront appliqu\u00e9s qu&rsquo;aux composants sp\u00e9cifiques qui importent le fichier CSS, ce qui \u00e9vite les conflits de classe et permet de cr\u00e9er des composants v\u00e9ritablement encapsul\u00e9s.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ ScopedComponent.jsx\nimport React from 'react';\nimport styles from '.\/scopedStyles.module.css';\n\nconst ScopedComponent = () => {\n  return (\n    <div className={styles.scopedContainer}>\n      <p className={styles.scopedText}>Ce texte est stylis\u00e9 de mani\u00e8re locale.<\/p>\n    <\/div>\n  );\n};\n\nexport default ScopedComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Modules CSS<\/h3>\n\n\n\n<p>Pour approfondir notre compr\u00e9hension des Modules CSS, voici quelques exemples avanc\u00e9s qui illustrent comment ces styles peuvent \u00eatre utilis\u00e9s dans diff\u00e9rentes situations.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Animer les Composants avec les Modules CSS<\/h4>\n\n\n\n<p>Les Modules CSS sont \u00e9galement compatibles avec les animations CSS. Voici comment animer un composant en utilisant CSS Modules :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* animateStyles.module.css *\/\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.fadeIn {\n  animation: fadeIn 2s ease-in-out;\n}\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ AnimateComponent.jsx\nimport React from 'react';\nimport styles from '.\/animateStyles.module.css';\n\nconst AnimateComponent = () => {\n  return (\n    <div className={styles.fadeIn}>\n      <p>Ce composant s'anime en apparaissant progressivement.<\/p>\n    <\/div>\n  );\n};\n\nexport default AnimateComponent;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Styling Responsive avec les Modules CSS<\/h4>\n\n\n\n<p>Vous pouvez \u00e9galement g\u00e9rer les styles r\u00e9actifs dans les Modules CSS :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* responsiveStyles.module.css *\/\n.container {\n  padding: 20px;\n}\n\n@media (max-width: 600px) {\n  .container {\n    padding: 10px;\n  }\n}\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ ResponsiveComponent.jsx\nimport React from 'react';\nimport styles from '.\/responsiveStyles.module.css';\n\nconst ResponsiveComponent = () => {\n  return (\n    <div className={styles.container}>\n      <p>Ce composant est r\u00e9actif et adapte ses styles selon la taille de l'\u00e9cran.<\/p>\n    <\/div>\n  );\n};\n\nexport default ResponsiveComponent;\n<\/code><\/pre>\n\n\n\n<p>En continuant d&rsquo;explorer les Modules CSS et de les int\u00e9grer dans vos projets React, vous pouvez \u00e9galement consulter notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-module-css-utiliser-react\/\">qu&rsquo;est-ce qu&rsquo;un Module CSS et comment l&rsquo;utiliser dans React<\/a> ou notre collecte de <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\/\">tutoriels pour cr\u00e9er votre premi\u00e8re application React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>Modules CSS dans React<\/strong> offrent une mani\u00e8re robuste et efficace de g\u00e9rer les styles localis\u00e9s et de cr\u00e9er des composants encapsul\u00e9s. En utilisant les Modules CSS, vous pouvez \u00e9viter les conflits de classe, r\u00e9utiliser vos composants plus facilement et am\u00e9liorer l&rsquo;organisation de votre code. Continuez \u00e0 explorer les possibilit\u00e9s des Modules CSS pour rendre vos applications React encore plus maintenables et \u00e9l\u00e9gantes. Pour plus de tutoriels sur React, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/diverses-fonctionnalit\u00e9s-de-react\/150\">les diverses fonctionnalit\u00e9s de React<\/a>.<\/p>\n\n\n\n<p>Pour ceux qui cherchent des ressources suppl\u00e9mentaires, nos articles sur les <a href=\"https:\/\/wikiform.fr\/codespace\/maitriser-objets-javascript-developper-react\">objets en JavaScript<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\">React Hooks<\/a> sont des lectures recommand\u00e9es. Vous pouvez \u00e9galement explorer nos tutoriels pour apprendre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-html-css-projet-markdown-react\">\u00e0 cr\u00e9er des projets Markdown avec React<\/a> et comment <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-dynamiquement-classes-react-guide\">g\u00e9rer dynamiquement des classes 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\" style=\"display: block; margin: 20px 0; text-align: center;\" 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 Redux et React sur Learnify\" style=\"max-width: 100%; height: auto;\" title=\"\">\n<\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Les Modules CSS dans React sont des outils puissants pour la gestion des styles dans les applications JavaScript. En comprenant comment utiliser les Modules&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3261,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5968","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\/5968","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=5968"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5968\/revisions"}],"predecessor-version":[{"id":5969,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5968\/revisions\/5969"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3261"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}