{"id":6140,"date":"2025-03-24T12:54:52","date_gmt":"2025-03-24T12:54:52","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/projet-to-do-list-amelioree-react-plan\/"},"modified":"2025-03-24T12:54:56","modified_gmt":"2025-03-24T12:54:56","slug":"projet-to-do-list-amelioree-react-plan","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/projet-to-do-list-amelioree-react-plan\/","title":{"rendered":"12.1 Projet TO-DO List Am\u00e9lior\u00e9e avec React : Plan"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Projet TO-DO List Am\u00e9lior\u00e9e avec React<\/strong> est une occasion fantastique pour apprendre \u00e0 manier cette biblioth\u00e8que JavaScript populaire tout en cr\u00e9ant une application utile et dynamique. Apprenez \u00e0 structurer votre projet, g\u00e9rer l&rsquo;\u00e9tat avec React Hooks, et ajouter des fonctionnalit\u00e9s qui am\u00e9liorent l&rsquo;exp\u00e9rience utilisateur. Suivons ensemble ce projet stimulant et enrichissant. D\u00e9couvrez \u00e9galement comment <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\" target=\"_blank\" rel=\"noopener\">les diff\u00e9rences entre les single-page et multi-page<\/a> s&rsquo;appliquent dans ce contexte.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>Projet TO-DO List Am\u00e9lior\u00e9e 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\/706133137?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><strong>Le projet TO-DO List<\/strong> avec React permet de d\u00e9velopper une application web o\u00f9 les utilisateurs peuvent ajouter, supprimer et marquer des t\u00e2ches comme compl\u00e8tes. En utilisant React, le projet sera non seulement fonctionnel, mais aussi facile \u00e0 maintenir et \u00e0 mettre \u00e0 jour. Apprenez plus sur <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">comment cr\u00e9er votre premi\u00e8re application React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installation et Configuration Initiale<\/h3>\n\n\n\n<p>Pour commencer, assurez-vous que Node.js est install\u00e9 sur votre syst\u00e8me. Utilisez ensuite le CLI Create React App pour initier un nouveau projet React :<\/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>Cette commande configure un nouvel environnement React pr\u00eat \u00e0 l&#8217;emploi. Pour des conseils suppl\u00e9mentaires, explorez <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-fragments-utiliser\" target=\"_blank\" rel=\"noopener\">l&rsquo;utilisation des fragments React<\/a> pour optimiser votre code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Structurer votre TO-DO List<\/h3>\n\n\n\n<p>Une bonne structure est essentielle. Dans le dossier <code>src<\/code>, cr\u00e9ez les composants suivants :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>App.js<\/code> \u2013 Le composant principal.<\/li>\n<li><code>TodoForm.js<\/code> \u2013 Pour g\u00e9rer l&rsquo;ajout de nouvelles t\u00e2ches.<\/li>\n<li><code>TodoList.js<\/code> \u2013 Pour afficher les t\u00e2ches actuelles.<\/li>\n<li><code>TodoItem.js<\/code> \u2013 Pour chaque t\u00e2che individuelle.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9ation du Composant TodoForm<\/h3>\n\n\n\n<p>Le composant <code>TodoForm<\/code> doit contenir un champ de saisie et un bouton pour soumettre une nouvelle t\u00e2che :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction TodoForm({ addTodo }) {\n  const [value, setValue] = useState('');\n\n  const handleSubmit = e => {\n    e.preventDefault();\n    if (!value) return;\n    addTodo(value);\n    setValue('');\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <input type=\"text\" value={value} onChange={e => setValue(e.target.value)} placeholder=\"Ajouter une t\u00e2che\" \/>\n      <button type=\"submit\">Ajouter<\/button>\n    <\/form>\n  );\n}\n\nexport default TodoForm;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion de l\u2019\u00e9tat avec React Hooks<\/h3>\n\n\n\n<p>Dans <code>App.js<\/code>, utilisez le hook <code>useState<\/code> pour g\u00e9rer la liste des t\u00e2ches :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\nimport TodoForm from '.\/TodoForm';\nimport TodoList from '.\/TodoList';\n\nfunction App() {\n  const [todos, setTodos] = useState([]);\n\n  const addTodo = text => {\n    const newTodos = [...todos, { text, completed: false }];\n    setTodos(newTodos);\n  };\n\n  return (\n    <div className=\"todo-app\">\n      <h1>Ma Liste de T\u00e2ches<\/h1>\n      <TodoForm addTodo={addTodo} \/>\n      <TodoList todos={todos} \/>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<p>Utiliser les <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-state-avec-react-hooks-guide\" target=\"_blank\" rel=\"noopener\">hooks dans React<\/a>, comme d\u00e9montr\u00e9, est essentiel pour une gestion efficace de l&rsquo;\u00e9tat.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mise en Place de la Logique de Suppression<\/h3>\n\n\n\n<p>Pour supprimer une t\u00e2che, mettez \u00e0 jour la liste des t\u00e2ches afin d&rsquo;exclure celle-ci :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const removeTodo = index => {\n  const newTodos = [...todos];\n  newTodos.splice(index, 1);\n  setTodos(newTodos);\n};\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Compl\u00e9ter et D\u00e9finir la Fonctionnalit\u00e9 de Marquage<\/h3>\n\n\n\n<p>Ajoutez une fonctionnalit\u00e9 pour marquer une t\u00e2che comme faite en utilisant le state immutable :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const toggleComplete = index => {\n  const newTodos = todos.map((todo, i) => {\n    if (i === index) {\n      return { ...todo, completed: !todo.completed };\n    }\n    return todo;\n  });\n  setTodos(newTodos);\n};\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion et Prochaines \u00c9tapes<\/h3>\n\n\n\n<p>Apr\u00e8s avoir mis en place ces fonctionnalit\u00e9s de base, vous pourriez am\u00e9liorer votre TO-DO List avec des fonctionnalit\u00e9s avanc\u00e9es telles que la persistance des donn\u00e9es dans le stockage local du navigateur, l&rsquo;ajout d&rsquo;une barre de recherche pour filtrer les t\u00e2ches, ou m\u00eame int\u00e9grer une logique d&rsquo;authentification pour plusieurs utilisateurs. Poursuivez vos efforts et amusez-vous \u00e0 affiner votre application ! Pour approfondir, pensez \u00e0 lire sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-hoc-react-explications\" target=\"_blank\" rel=\"noopener\">les HOC en React<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/reactjs.org\/logo-og.png\" loading=\"lazy\" alt=\"Documentation de React\" style=\"width:100%; max-width:600px; display:block; margin:auto;\" title=\"\"><\/a>\n\n\n<p>Enfin, pour ceux qui sont int\u00e9ress\u00e9s par une formation approfondie dans le d\u00e9veloppement React et Redux, profitez-en pour visiter : <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\" title=\"\"><\/a><\/p>\n\u00ab\u00a0`\n\nLe contenu a \u00e9t\u00e9 enrichi avec plus de d\u00e9tails pertinents sur le projet et les liens internes ont \u00e9t\u00e9 int\u00e9gr\u00e9s de mani\u00e8re naturelle. Les liens externes donnent aux lecteurs des ressources suppl\u00e9mentaires pour approfondir leurs connaissances en React. Les instructions pour l&rsquo;int\u00e9gration Vimeo et l&rsquo;image de la banni\u00e8re Learnify ont \u00e9t\u00e9 mises en \u0153uvre dans le code.","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Projet TO-DO List Am\u00e9lior\u00e9e avec React est une occasion fantastique pour apprendre \u00e0 manier cette biblioth\u00e8que JavaScript populaire tout en cr\u00e9ant une application utile&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3250,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6140","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\/6140","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=6140"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6140\/revisions"}],"predecessor-version":[{"id":6141,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6140\/revisions\/6141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3250"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}