{"id":6008,"date":"2024-10-21T11:53:57","date_gmt":"2024-10-21T11:53:57","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/configurer-modules-css-to-do-list-react\/"},"modified":"2024-10-21T11:54:02","modified_gmt":"2024-10-21T11:54:02","slug":"configurer-modules-css-to-do-list-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/configurer-modules-css-to-do-list-react\/","title":{"rendered":"9.4 Configurer les Modules CSS pour une TO-DO List React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Modules CSS TO-DO List React<\/strong> est une \u00e9tape essentielle pour donner un aspect visuel attrayant et personnalis\u00e9 \u00e0 votre application. Apprendre \u00e0 impl\u00e9menter et utiliser des modules CSS dans React peut grandement am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur et la maintenabilit\u00e9 de votre code. D\u00e9couvrons ensemble comment configurer cela avec des exemples de code concrets.<\/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\/706101408?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 qui permet de cr\u00e9er des styles localis\u00e9s pour une application, en attribuant un scope sp\u00e9cifique aux classes et identifiants CSS. Ceci est particuli\u00e8rement utile pour \u00e9viter les conflits de style dans les grandes applications React en garantissant que les styles sont appliqu\u00e9s uniquement aux composants auxquels ils sont destin\u00e9s.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pourquoi utiliser les Modules CSS ?<\/h3>\n\n\n\n<p>L&rsquo;utilisation des modules CSS pr\u00e9sente plusieurs avantages\u00a0: elle permet de r\u00e9duire les conflits de style, de maintenir un code CSS plus organis\u00e9 et coh\u00e9rent, et d&rsquo;appliquer facilement le m\u00eame style \u00e0 plusieurs composants sans duplication. Cette m\u00e9thode est particuli\u00e8rement utile pour <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">les applications React qui \u00e9voluent rapidement<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mise en Place d&rsquo;une TO-DO List avec Modules CSS<\/h3>\n\n\n\n<p>Pour commencer, assurez-vous que votre environnement de d\u00e9veloppement est correctement configur\u00e9 avec Create React App, qui supporte nativement les <a href=\"https:\/\/wikiform.fr\/codespace\/initialiser-modules-css-react-tutoriel\" target=\"_blank\" rel=\"noopener\">modules CSS<\/a>. Cr\u00e9ez un projet React si ce n\u2019est pas d\u00e9j\u00e0 fait \u00e0 l\u2019aide de la commande suivante :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-react-app my-todo-list<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Fichiers de Modules CSS<\/h3>\n\n\n\n<p>Dans votre projet, cr\u00e9ez un fichier CSS pour chaque composant que vous souhaitez styler. Par exemple, pour un composant appel\u00e9 <code>TodoItem<\/code>, cr\u00e9ez un fichier nomm\u00e9 <code>TodoItem.module.css<\/code>. Voici un exemple de styles que vous pourriez appliquer :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* TodoItem.module.css *\/\n.todoItem {\n    padding: 10px;\n    border: 1px solid #ccc;\n    margin-bottom: 5px;\n    background-color: #f9f9f9;\n}\n\n.completed {\n    text-decoration: line-through;\n    color: #888;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Appliquer des Styles avec les Modules CSS<\/h3>\n\n\n\n<p>Pour appliquer ces styles dans votre composant React, vous devez importer le fichier CSS en tant que module et utiliser les classes d\u00e9finies. Voici comment vous pourriez le faire dans le composant <code>TodoItem<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ TodoItem.js\nimport React from 'react';\nimport styles from '.\/TodoItem.module.css';\n\nconst TodoItem = ({ task, completed }) => {\n    return (\n        <div className={`${styles.todoItem} ${completed ? styles.completed : ''}`}>\n            {task}\n        <\/div>\n    );\n};\n\nexport default TodoItem;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Structurer votre TO-DO List<\/h3>\n\n\n\n<p>Pour cr\u00e9er une structure de TO-DO List fonctionnelle, vous aurez besoin de mettre en place un composant de liste principale <code>TodoList<\/code> qui it\u00e8re sur vos t\u00e2ches et rend chaque <code>TodoItem<\/code>. Il est essentiel de bien comprendre la <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\" target=\"_blank\" rel=\"noopener\">gestion du cycle de vie<\/a> pour un meilleur d\u00e9veloppement :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ TodoList.js\nimport React, { useState } from 'react';\nimport TodoItem from '.\/TodoItem';\n\nconst TodoList = () => {\n    const [tasks, setTasks] = useState([\n        { task: 'Walk the dog', completed: false },\n        { task: 'Read a book', completed: true },\n    ]);\n\n    return (\n        <div>\n            {tasks.map((todo, index) => (\n                <TodoItem key={index} task={todo.task} completed={todo.completed} \/>\n            ))}\n        <\/div>\n    );\n};\n\nexport default TodoList;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Personnalisation et Extensions<\/h3>\n\n\n\n<p>Les modules CSS vous offrent la flexibilit\u00e9 de personnaliser davantage votre application. Vous pouvez facilement cr\u00e9er des classes de styles r\u00e9utilisables pour d&rsquo;autres composants ou <a href=\"https:\/\/www.smashingmagazine.com\/2020\/06\/complete-guide-css-functions\/\" target=\"_blank\" rel=\"noopener\">ajouter des animations et transitions CSS<\/a> avanc\u00e9es pour am\u00e9liorer l\u2019exp\u00e9rience utilisateur.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Addition de styles pour l'animation *\/\n@keyframes slideIn {\n    from {\n        opacity: 0;\n        transform: translateX(-20px);\n    }\n    to {\n        opacity: 1;\n        transform: translateX(0);\n    }\n}\n\n.todoItem {\n    animation: slideIn 0.3s ease-out;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion des <strong>Modules CSS TO-DO List React<\/strong><\/h2>\n\n\n\n<p>Les <strong>Modules CSS dans React<\/strong> sont une solution puissante pour g\u00e9rer les styles dans vos applications de mani\u00e8re isol\u00e9e et efficace. En suivant ce tutoriel, vous devriez d\u00e9sormais \u00eatre capable de configurer et d&rsquo;utiliser les modules CSS pour am\u00e9liorer votre application de TO-DO List. Continuez \u00e0 explorer les <a href=\"https:\/\/www.w3schools.com\/react\/\" target=\"_blank\" rel=\"noopener\">possibilit\u00e9s offertes<\/a> par les modules CSS pour cr\u00e9er des applications \u00e9l\u00e9gantes et professionnelles avec React. Pour aller plus loin, n&rsquo;h\u00e9sitez pas \u00e0 consulter des <a href=\"https:\/\/www.mdbootstrap.com\/docs\/react\/getting-started\/installation\/\" target=\"_blank\" rel=\"noopener\">ressources suppl\u00e9mentaires<\/a> ou \u00e0 suivre des formations avanc\u00e9es qui approfondissent ces concepts. Pour plus de d\u00e9tails sur l&rsquo;initialisation, consultez <a href=\"https:\/\/wikiform.fr\/codespace\/configurer-modules-css-to-do-list-react\" target=\"_blank\" rel=\"noopener\">ce guide d\u00e9taill\u00e9.<\/a><\/p>\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=\"Formation Learnify: Redux et React\" title=\"\"><\/a>\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Modules CSS TO-DO List React est une \u00e9tape essentielle pour donner un aspect visuel attrayant et personnalis\u00e9 \u00e0 votre application. Apprendre \u00e0 impl\u00e9menter et&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3187,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6008","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\/6008","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=6008"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6008\/revisions"}],"predecessor-version":[{"id":6009,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6008\/revisions\/6009"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3187"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}