{"id":6142,"date":"2025-03-31T11:54:47","date_gmt":"2025-03-31T11:54:47","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/preparer-projet-to-do-list-amelioree-react\/"},"modified":"2025-03-31T11:54:52","modified_gmt":"2025-03-31T11:54:52","slug":"preparer-projet-to-do-list-amelioree-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/preparer-projet-to-do-list-amelioree-react\/","title":{"rendered":"12.2 Pr\u00e9parer son Projet TO-DO List Am\u00e9lior\u00e9e avec React"},"content":{"rendered":"\n<p><strong>Pr\u00e9parer TO-DO List Am\u00e9lior\u00e9e React<\/strong> peut transformer votre gestion personnelle et professionnelle en ajoutant une nouvelle dimension d&rsquo;organisation et d&rsquo;efficacit\u00e9. Ce tutoriel vise \u00e0 guider les lecteurs \u00e0 travers la cr\u00e9ation d&rsquo;une application TO-DO list en utilisant React. Vous d\u00e9couvrirez comment faire bon usage des hooks et des composants pour d\u00e9velopper une application r\u00e9active et facile \u00e0 utiliser. Si vous d\u00e9sirez renforcer vos comp\u00e9tences, explorez d&rsquo;autres sujets tels que <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\">\u00ab\u00a0Qu&rsquo;est-ce que React ? Introduction et Avantages\u00a0\u00bb<\/a> afin d&rsquo;\u00e9largir votre compr\u00e9hension.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pr\u00e9parer une TO-DO List Am\u00e9lior\u00e9e avec React<\/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\/706133188?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, une TO-DO List est essentiellement une application pour suivre des t\u00e2ches en attente. \u00c9tant donn\u00e9 la modularit\u00e9 de React, chaque t\u00e2che, ou \u00ab\u00a0item\u00a0\u00bb, peut \u00eatre mod\u00e9lis\u00e9e comme un <a href=\"https:\/\/wikiform.fr\/codespace\/comment-ajouter-nouveau-composant-react\">composant d\u00e9di\u00e9<\/a>, ce qui permet une capacit\u00e9 de gestion pr\u00e9cise et efficace.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Initialiser le Projet React<\/h3>\n\n\n\n<p>Pour commencer le d\u00e9veloppement de notre TO-DO List, nous allons cr\u00e9er un nouveau projet React. Le moyen le plus simple de le faire est d&rsquo;utiliser <code>create-react-app<\/code>, qui g\u00e9n\u00e8re une structure pr\u00eate \u00e0 l&#8217;emploi avec toutes les configurations n\u00e9cessaires. Apprenez-en plus sur le d\u00e9marrage d&rsquo;un projet React en lisant <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">ce guide d&rsquo;initiation<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code>npx create-react-app todo-list-app<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er le Composant TO-DO Item<\/h3>\n\n\n\n<p>D\u00e9veloppons d&rsquo;abord un composant pour repr\u00e9senter chaque \u00e9l\u00e9ment pr\u00e9sent sur notre TO-DO List. Ce composant recevra des propri\u00e9t\u00e9s telles que le nom de la t\u00e2che et un statut indiquant si elle est compl\u00e9t\u00e9e ou non. Pour mieux comprendre la diff\u00e9rence entre des composants par classe et des fonctions en React, consultez l&rsquo;article sur les <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\">diff\u00e9rences entre composants par classe et fonction<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction TodoItem({ task, isCompleted, toggleTaskCompletion }) {\n    return (\n        <div>\n            <input \n                type=\"checkbox\" \n                checked={isCompleted} \n                onChange={toggleTaskCompletion} \n            \/>\n            <span style={{ textDecoration: isCompleted ? 'line-through' : 'none' }}>\n                {task}\n            <\/span>\n        <\/div>\n    );\n}\n\nexport default TodoItem;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9rer les \u00c9tats avec des Hooks<\/h3>\n\n\n\n<p>Utiliser des hooks dans React permet d&rsquo;am\u00e9liorer et de manipuler facilement l&rsquo;\u00e9tat des composants. Nous utiliserons <code>useState<\/code> pour g\u00e9rer notre liste de t\u00e2ches et <code>useEffect<\/code> pour toute mise \u00e0 jour li\u00e9e \u00e0 des effets de bord. Pour d\u00e9couvrir leurs applications efficaces, explorez comment <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\">utiliser React Hooks<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState, useEffect } from 'react';\nimport TodoItem from '.\/TodoItem';\n\nfunction TodoList() {\n    const [tasks, setTasks] = useState([\n        { task: 'Apprendre React', completed: false },\n        { task: 'Construire un projet', completed: false },\n    ]);\n\n    const toggleTaskCompletion = index => {\n        const newTasks = [...tasks];\n        newTasks[index].completed = !newTasks[index].completed;\n        setTasks(newTasks);\n    };\n\n    return (\n        <div>\n            {tasks.map((taskObj, index) => (\n                <TodoItem\n                    key={index}\n                    task={taskObj.task}\n                    isCompleted={taskObj.completed}\n                    toggleTaskCompletion={() => toggleTaskCompletion(index)}\n                \/>\n            ))}\n        <\/div>\n    );\n}\n\nexport default TodoList;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Fonctions Avanc\u00e9es \u00e0 la TO-DO List<\/h3>\n\n\n\n<p>Prenons notre projet plus loin en ajoutant la possibilit\u00e9 d&rsquo;ajouter de nouvelles t\u00e2ches et de supprimer les t\u00e2ches existantes. Ces fonctionnalit\u00e9s rendent la liste plus dynamique et utile. D\u00e9couvrez plus sur la manipulation dynamique des composants en explorant <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-dynamiquement-composants-react\">comment modifier dynamiquement des composants React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\nimport TodoItem from '.\/TodoItem';\n\nfunction TodoList() {\n    const [tasks, setTasks] = useState([\n        { task: 'Apprendre React', completed: false },\n        { task: 'Construire un projet', completed: false },\n    ]);\n    const [newTask, setNewTask] = useState('');\n\n    const addTask = () => {\n        if (newTask.trim() !== '') {\n            setTasks([...tasks, { task: newTask, completed: false }]);\n            setNewTask('');\n        }\n    };\n\n    const removeTask = index => {\n        const newTasks = tasks.filter((_, i) => i !== index);\n        setTasks(newTasks);\n    };\n\n    return (\n        <div>\n            <input \n                type=\"text\" \n                value={newTask} \n                onChange={e => setNewTask(e.target.value)} \n                placeholder=\"Nouvelle t\u00e2che\" \n            \/>\n            <button onClick={addTask}>Ajouter<\/button>\n            {tasks.map((taskObj, index) => (\n                <TodoItem\n                    key={index}\n                    task={taskObj.task}\n                    isCompleted={taskObj.completed}\n                    toggleTaskCompletion={() => toggleTaskCompletion(index)}\n                    removeTask={() => removeTask(index)}\n                \/>\n            ))}\n        <\/div>\n    );\n}\n\nexport default TodoList;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>En suivant ce tutoriel, vous avez appris comment b\u00e2tir une TO-DO List simple mais fonctionnelle avec React. L&rsquo;utilisation de React permet de g\u00e9rer efficacement les \u00e9tats d&rsquo;application et les rendus de composants dynamiques, rendant ainsi vos applications plus r\u00e9actives et attrayantes pour les utilisateurs. Pour de plus amples informations ou pour explorer des cas plus avanc\u00e9s, envisagez de suivre un cours complet comme celui propos\u00e9 sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/react-pour-les-d\u00e9butants\/145\" target=\"_blank\" rel=\"noopener\">wikiform.fr<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/react-pour-les-d\u00e9butants\/145\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation React Offre 50%\" title=\"\"><\/a>\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\" 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 React et Redux Offre 50%\" title=\"\"><\/a>\n\n\n<!-- External Resources -->\n<div>\n  Pour approfondir vos connaissances, consultez :\n  <ul>\n    <li><a href=\"https:\/\/fr.reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"dofollow noopener\">Documentation officielle de React<\/a><\/li>\n    <li><a href=\"https:\/\/stackoverflow.com\/questions\/tagged\/reactjs\" target=\"_blank\" rel=\"dofollow noopener\">Communaut\u00e9 Stack Overflow sur React<\/a><\/li>\n    <li><a href=\"https:\/\/css-tricks.com\/learning-react-router\/\" target=\"_blank\" rel=\"dofollow noopener\">Apprendre React Router sur CSS-Tricks<\/a><\/li>\n  <\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Pr\u00e9parer TO-DO List Am\u00e9lior\u00e9e React peut transformer votre gestion personnelle et professionnelle en ajoutant une nouvelle dimension d&rsquo;organisation et d&rsquo;efficacit\u00e9. Ce tutoriel vise \u00e0 guider&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3245,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6142","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\/6142","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=6142"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6142\/revisions"}],"predecessor-version":[{"id":6143,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6142\/revisions\/6143"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3245"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}