{"id":5970,"date":"2024-10-03T09:24:06","date_gmt":"2024-10-03T09:24:06","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/initialiser-modules-css-react-tutoriel\/"},"modified":"2024-10-03T09:24:10","modified_gmt":"2024-10-03T09:24:10","slug":"initialiser-modules-css-react-tutoriel","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/initialiser-modules-css-react-tutoriel\/","title":{"rendered":"7.3 Initialiser les Modules CSS en React : Tutoriel"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Initialiser les Modules CSS en React : Tutoriel<\/strong> &#8211; Une des fonctionnalit\u00e9s essentielles dans React pour cr\u00e9er des interfaces utilisateur stylis\u00e9es consiste \u00e0 utiliser des <strong>modules CSS<\/strong>. Ces modules offrent un moyen efficace d&rsquo;appliquer des styles sp\u00e9cifiques aux composants sans risquer les conflits de noms de classes. Apprenons ensemble comment les initialiser et les utiliser avec succ\u00e8s \u00e0 travers des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Modules CSS en 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\/706086881?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 <strong>modules CSS<\/strong> sont une solution pour \u00e9viter les conflits de styles dans des applications React complexes. Gr\u00e2ce au pr\u00e9fixage automatique des noms de classes, ils garantissent que les styles d\u00e9finis pour un composant ne vont pas interf\u00e9rer avec d&rsquo;autres composants. Plongeons dans leur utilisation et leur initialisation dans un projet React.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un Projet React avec Modules CSS<\/h3>\n\n\n\n<p>Pour commencer, nous allons g\u00e9n\u00e9rer un nouveau projet React et ajouter un module CSS. Assurez-vous d&rsquo;avoir Node.js install\u00e9 sur votre machine. Utilisez Create React App pour g\u00e9n\u00e9rer la structure du projet :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-shell\"><code>npx create-react-app mon-projet-react\ncd mon-projet-react\nnpm start<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter un Module CSS \u00e0 un Composant<\/h3>\n\n\n\n<p>Pour int\u00e9grer un module CSS, cr\u00e9ez un fichier avec l&rsquo;extension <code>.module.css<\/code> dans le r\u00e9pertoire de votre composant. L&rsquo;exemple suivant montre comment utiliser les modules CSS avec un composant Button :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Button.module.css *\/\n.button {\n  background-color: #4CAF50;\n  color: white;\n  padding: 15px 32px;\n  text-align: center;\n  font-size: 16px;\n  border: none;\n  cursor: pointer;\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Button.js\nimport React from 'react';\nimport styles from '.\/Button.module.css';\n\nconst Button = () => {\n  return (\n    <button className={styles.button}>\n      Cliquez moi\n    <\/button>\n  );\n};\n\nexport default Button;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser plusieurs Modules CSS dans un Composant<\/h3>\n\n\n\n<p>Pour des situations o\u00f9 vous souhaitez combiner plusieurs classes, les modules CSS vous permettent de joindre facilement plusieurs noms de classes tout en \u00e9vitant les conflits gr\u00e2ce \u00e0 des identifiants uniques :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ AdvancedButton.js\nimport React from 'react';\nimport styles from '.\/AdvancedButton.module.css';\n\nconst AdvancedButton = () => {\n  return (\n    <button className={`${styles.button} ${styles.large}`}>\n      Button Avanc\u00e9\n    <\/button>\n  );\n};\n\nexport default AdvancedButton;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Avantages des Modules CSS en React<\/h3>\n\n\n\n<p>L&rsquo;un des avantages cl\u00e9s de l&rsquo;utilisation des modules CSS est la <strong>scopabilit\u00e9 des styles<\/strong>. Cela signifie que chaque style est limit\u00e9 \u00e0 son composant et ne peut pas affecter d&rsquo;autres \u00e9l\u00e9ments de l&rsquo;application, minimisant ainsi les risques de conflits de styles :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Pas de conflits de noms de classes<\/li><li>Manutention simplifi\u00e9e des styles sp\u00e9cifiques aux composants<\/li><li>Prise en charge native par Create React App sans configuration suppl\u00e9mentaire<\/li><\/ul>\n\n\n<p>Pour en savoir plus sur les modules CSS, vous pouvez lire notre article <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 avec React<\/a>. Vous y trouverez des conseils suppl\u00e9mentaires sur l&rsquo;ajout et la personnalisation des modules CSS. Si vous d\u00e9butez avec React, consultez \u00e9galement notre <a href=\"https:\/\/wikiform.fr\/codespace\/prets-a-decouvrir-react-guide-introduction\">guide d&rsquo;introduction \u00e0 React<\/a>.<\/p>\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Initialiser Modules CSS React constitue une approche puissante pour g\u00e9rer les styles dans une application moderne. Avec cette technique, les d\u00e9veloppeurs peuvent concevoir des interfaces utilisateur propres et modulaires tout en \u00e9vitant les conflits de noms de classes. N&rsquo;h\u00e9sitez pas \u00e0 explorer d&rsquo;autres ressources comme le <a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" rel=\"dofollow noopener\" target=\"_blank\">site officiel de React<\/a>. Pour plus de tutoriels approfondis, suivez notre s\u00e9rie sur <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\">le cycle de vie d&rsquo;une application React<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">comment cr\u00e9er votre premi\u00e8re application React<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/ma%C3%AEtriser-les-modules-css-en-react\/147\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-CSS-module-react-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Modules CSS en React 50% Off\" title=\"\"><\/a>\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 50% Off\" title=\"\"><\/a>\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Initialiser les Modules CSS en React : Tutoriel &#8211; Une des fonctionnalit\u00e9s essentielles dans React pour cr\u00e9er des interfaces utilisateur stylis\u00e9es consiste \u00e0 utiliser&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3217,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5970","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\/5970","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=5970"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5970\/revisions"}],"predecessor-version":[{"id":5971,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5970\/revisions\/5971"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3217"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}