{"id":6034,"date":"2024-11-11T12:54:22","date_gmt":"2024-11-11T12:54:22","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/gerer-checkage-to-do-list-react\/"},"modified":"2024-11-11T12:54:27","modified_gmt":"2024-11-11T12:54:27","slug":"gerer-checkage-to-do-list-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/gerer-checkage-to-do-list-react\/","title":{"rendered":"9.7 G\u00e9rer le Checkage dans une TO-DO List en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Checkage TO-DO List React<\/strong> peut transformer une simple liste de t\u00e2ches en une application interactive et fonctionnelle. Comprendre comment g\u00e9rer les \u00e9tats des \u00e9l\u00e9ments avec les outils de React vous permet non seulement de cocher les t\u00e2ches compl\u00e9t\u00e9es, mais aussi de g\u00e9rer l&rsquo;interactivit\u00e9 de votre application avec efficacit\u00e9. Dans ce tutoriel, nous explorerons les \u00e9tapes essentielles pour int\u00e9grer cette fonctionnalit\u00e9 gr\u00e2ce \u00e0 des exemples concrets de code. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Gestion du Checkage dans une TO-DO List<\/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\/706103931?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>En React, la gestion des \u00e9tats est cruciale pour cr\u00e9er des applications dynamiques. Une to-do list n\u00e9cessite de suivre l&rsquo;\u00e9tat de chaque t\u00e2che, qu&rsquo;elle soit accomplie ou non. Pour cela, nous utiliserons l&rsquo;<code>useState<\/code> hook pour g\u00e9rer les \u00e9tats locaux de notre liste.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configurer l&rsquo;Environnement de D\u00e9veloppement pour une TO-DO List<\/h3>\n\n\n\n<p>Assurez-vous d&rsquo;avoir un environnement React install\u00e9. Vous pouvez cr\u00e9er une nouvelle application React en utilisant Create React App avec la commande suivante :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-shell\"><code>npx create-react-app todo-app<\/code><\/pre>\n\n\n\n<p>Une fois votre environnement configur\u00e9, ouvrez votre \u00e9diteur pr\u00e9f\u00e9r\u00e9 et naviguez vers le fichier <code>src\/App.js<\/code>. Si vous \u00eates d\u00e9butant, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">cr\u00e9er votre premi\u00e8re application React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er une TO-DO List de Base en React<\/h3>\n\n\n\n<p>Pour commencer, cr\u00e9ons un composant qui affiche une liste de t\u00e2ches et permet de g\u00e9rer son checkage. Apprenez \u00e9galement \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-dynamiquement-composants-react\">modifier dynamiquement vos composants React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction App() {\n  const [tasks, setTasks] = useState([\n    { text: 'Apprendre React', completed: false },\n    { text: 'Coder une App', completed: false },\n    { text: 'Tester l\u2019Application', completed: false }\n  ]);\n\n  function handleCheck(index) {\n    const newTasks = tasks.map((task, i) =>\n      i === index ? { ...task, completed: !task.completed } : task\n    );\n    setTasks(newTasks);\n  }\n\n  return (\n    <div className=\"App\">\n      <h1>Ma TO-DO List<\/h1>\n      <ul>\n        {tasks.map((task, index) => (\n          <li key={index} className={task.completed ? 'completed' : ''}>\n            <input\n              type=\"checkbox\"\n              checked={task.completed}\n              onChange={() => handleCheck(index)}\n            \/>\n            {task.text}\n          <\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9rer le Checkage des T\u00e2ches dans React<\/h3>\n\n\n\n<p>Pour changer l&rsquo;\u00e9tat checked des t\u00e2ches, nous devons mettre \u00e0 jour notre \u00e9tat local avec une nouvelle liste o\u00f9 la t\u00e2che s\u00e9lectionn\u00e9e est marqu\u00e9e comme compl\u00e9t\u00e9e ou non. D\u00e9couvrez plus sur la gestion des \u00e9tats avec notre guide sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/stockage-donnees-avec-state-react\">utilisation du state<\/a> dans React.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>function handleCheck(index) {\n  const newTasks = tasks.map((task, i) =>\n    i === index ? { ...task, completed: !task.completed } : task\n  );\n  setTasks(newTasks);\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Am\u00e9liorer l&rsquo;Interface Utilisateur de votre TO-DO List<\/h3>\n\n\n\n<p>Pour rendre notre TO-DO list plus esth\u00e9tique, ajoutons un peu de style et affichons les t\u00e2ches compl\u00e9t\u00e9es diff\u00e9remment. Par exemple, les t\u00e2ches effac\u00e9es pourraient \u00eatre barr\u00e9es. D\u00e9couvrez aussi des <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\">extensions indispensables pour d\u00e9velopper avec React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Ajoutez ceci \u00e0 votre fichier CSS *\/\nli {\n  list-style-type: none;\n  padding: 8px;\n}\n\nli.completed {\n  text-decoration: line-through;\n  color: gray;\n}\n<\/code><\/pre>\n\n\n\n<p>Pour l&rsquo;application pratique des styles CSS, vous pouvez \u00e9galement vous familiariser avec l&rsquo;utilisation des <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-module-css-utiliser-react\">mod\u00e8les CSS dans React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Optimiser et D\u00e9ployer l&rsquo;Application TO-DO List<\/h3>\n\n\n\n<p>Avant de d\u00e9ployer, assurez-vous que toutes les fonctionnalit\u00e9s sont bien test\u00e9es et que votre application est optimis\u00e9e. Pour d\u00e9ployer sur une plateforme telle que Netlify ou Vercel, g\u00e9n\u00e9rez une build de production avec :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-shell\"><code>npm run build<\/code><\/pre>\n\n\n\n<p>Transf\u00e9rez ensuite votre dossier <code>build<\/code> vers votre service d&rsquo;h\u00e9bergement. Si vous souhaitez en savoir plus sur la mani\u00e8re de configurer les routes sur votre application, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/mettre-en-place-route-application-react\">mettre en place les routes dans une application React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion : Checkage TO-DO List React<\/h2>\n\n\n\n<p>En impl\u00e9mentant la gestion du checkage dans une TO-DO list avec React, vous avez explor\u00e9 les fondamentaux du gestionnaire d&rsquo;\u00e9tats et les interactions utilisateurs. Cette application vous fournit une base solide pour ajouter davantage de fonctionnalit\u00e9s, comme la gestion des dates limites ou l&rsquo;int\u00e9gration de back-end pour sauvegarder les t\u00e2ches. Continuez \u00e0 explorer React et ses riches fonctionnalit\u00e9s pour transformer vos id\u00e9es en applications efficaces. Pour plus d&rsquo;exercices pratiques, consultez notre s\u00e9lection sur <a href=\"https:\/\/wikiform.fr\/codespace\/exercices-s-ameliorer-react-guide\">s&rsquo;am\u00e9liorer avec React<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/www.mdn.com\/react-tutorials\" target=\"_blank\" rel=\"noopener\">D\u00e9couvrez des tutoriels React suppl\u00e9mentaires sur MDN<\/a>\n\n\n\n<a href=\"https:\/\/learnreact.com\/your-link\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/example.com\/learn-react.png\" loading=\"lazy\" alt=\"Learn React: Mastery Course\" title=\"\"><\/a>\n\n\n<!-- Promotion Learnify -->\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 React et Redux\" title=\"\"><\/a>\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Checkage TO-DO List React peut transformer une simple liste de t\u00e2ches en une application interactive et fonctionnelle. Comprendre comment g\u00e9rer les \u00e9tats des \u00e9l\u00e9ments&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3212,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6034","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\/6034","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=6034"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6034\/revisions"}],"predecessor-version":[{"id":6035,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6034\/revisions\/6035"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3212"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}