{"id":6002,"date":"2024-10-17T09:24:38","date_gmt":"2024-10-17T09:24:38","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/projet-to-do-list-react-qu-allons-nous-faire\/"},"modified":"2024-10-17T09:24:43","modified_gmt":"2024-10-17T09:24:43","slug":"projet-to-do-list-react-qu-allons-nous-faire","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/projet-to-do-list-react-qu-allons-nous-faire\/","title":{"rendered":"9.1 Projet TO-DO List avec React : Qu&rsquo;allons-nous Faire ?"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Projet TO-DO List React<\/strong> est une excellente occasion d&rsquo;am\u00e9liorer vos comp\u00e9tences en d\u00e9veloppement front-end. En cr\u00e9ant une application de liste de t\u00e2ches dynamique et r\u00e9active, vous comprendrez mieux comment React peut \u00eatre utilis\u00e9 pour cr\u00e9er des applications web modernes. Ce tutoriel vous guidera \u00e0 travers chaque \u00e9tape de la cr\u00e9ation de la TO-DO List, en vous fournissant des explications d\u00e9taill\u00e9es et des exemples de code concrets. Pour plus de d\u00e9tails sur ce projet, n&rsquo;h\u00e9sitez pas \u00e0 consulter notre article complet sur les <a href=\"https:\/\/wikiform.fr\/codespace\/projet-to-do-list-react-qu-allons-nous-faire\" title=\"Projet TO-DO List React : Qu'allons-nous faire ?\" target=\"_blank\" rel=\"noopener\">\u00e9tapes du projet TO-DO List<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au Projet TO-DO List 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\/706101178?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) {\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();\n    }\n});\n<\/script>\n\n\n\n<p>Dans ce tutoriel, nous allons cr\u00e9er une <strong>application TO-DO List<\/strong> \u00e0 l&rsquo;aide de React. Nous aborderons les concepts fondamentaux de React tels que les composants, l&rsquo;\u00e9tat (state) et les \u00e9v\u00e9nements, tout en d\u00e9veloppant une application fonctionnelle et attrayante. Pour une introduction compl\u00e8te \u00e0 React, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">Qu&rsquo;est-ce que React ?<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configurer Environnement de D\u00e9veloppement pour Projet TO-DO List React<\/h3>\n\n\n\n<p>La premi\u00e8re \u00e9tape consiste \u00e0 configurer votre environnement de d\u00e9veloppement. Assurez-vous d&rsquo;avoir Node.js et npm install\u00e9s sur votre machine. Ensuite, utilisez Create React App pour initialiser votre projet :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-shell\"><code>npx create-react-app my-todo-app\ncd my-todo-app\nnpm start<\/code><\/pre>\n\n\n\n<p>Avec ces commandes, nous cr\u00e9ons un projet React de base. Vous pouvez voir l&rsquo;application en direct en ouvrant <code>http:\/\/localhost:3000<\/code> dans votre navigateur. Pour d\u00e9couvrir comment cr\u00e9er des applications React interactives, d\u00e9couvrez notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">tutoriel sur la cr\u00e9ation de premi\u00e8re application React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er les Composants de la TO-DO List avec React<\/h3>\n\n\n\n<p>D\u00e9coupons notre application en composants React r\u00e9utilisables. Nous aurons principalement deux composants : <code>TodoList<\/code> et <code>TodoItem<\/code>. Commen\u00e7ons par cr\u00e9er ces composants : Pour en savoir plus sur la conception de composants, consultez <a href=\"https:\/\/wikiform.fr\/codespace\/a-la-decouverte-des-props-react-guide\" target=\"_blank\" rel=\"noopener\">notre guide sur les props en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>\/\/ TodoItem.js\nimport React from 'react';\n\nconst TodoItem = ({ task, onToggle }) => (\n  <li>\n    <label>\n      <input type=\"checkbox\" checked={task.completed} onChange={onToggle} \/>\n      {task.text}\n    <\/label>\n  <\/li>\n);\n\nexport default TodoItem;\n\n\/\/ TodoList.js\nimport React, { useState } from 'react';\nimport TodoItem from '.\/TodoItem';\n\nconst TodoList = () => {\n  const [tasks, setTasks] = useState([\n    { text: 'Learn React', completed: false },\n    { text: 'Build a TO-DO App', completed: false },\n  ]);\n\n  const toggleTask = index => {\n    const newTasks = [...tasks];\n    newTasks[index].completed = !newTasks[index].completed;\n    setTasks(newTasks);\n  };\n\n  return (\n    <ul>\n      {tasks.map((task, index) => (\n        <TodoItem\n          key={index}\n          task={task}\n          onToggle={() => toggleTask(index)}\n        \/>\n      ))}\n    <\/ul>\n  );\n};\n\nexport default TodoList;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter une Nouvelle T\u00e2che \u00e0 la TO-DO List avec React<\/h3>\n\n\n\n<p>Nous voulons \u00e9galement pouvoir ajouter de nouvelles t\u00e2ches \u00e0 notre liste. Cr\u00e9ons une entr\u00e9e de formulaire pour saisir et ajouter des t\u00e2ches. Plus de d\u00e9tails peuvent \u00eatre trouv\u00e9s dans notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-nouvelle-tache-to-do-list-react\" target=\"_blank\" rel=\"noopener\">l&rsquo;ajout de t\u00e2ches \u00e0 une TO-DO List React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>\/\/ TodoList.js (continued)\nconst TodoList = () => {\n  const [tasks, setTasks] = useState([]);\n  const [newTask, setNewTask] = useState('');\n\n  const handleAddTask = () => {\n    if (newTask.trim()) {\n      setTasks([...tasks, { text: newTask, completed: false }]);\n      setNewTask('');\n    }\n  };\n\n  return (\n    <div>\n      <input\n        type=\"text\"\n        value={newTask}\n        onChange={e => setNewTask(e.target.value)}\n        placeholder=\"Add a new task\"\n      \/>\n      <button onClick={handleAddTask}>Add Task<\/button>\n      <ul>\n        {tasks.map((task, index) => (\n          <TodoItem\n            key={index}\n            task={task}\n            onToggle={() => toggleTask(index)}\n          \/>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n};<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Styler l&rsquo;Interface de la TO-DO List en React<\/h3>\n\n\n\n<p>En utilisant CSS, vous pouvez personnaliser l&rsquo;apparence de votre TO-DO List. Voici un exemple simple de style :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>ul {\n  list-style-type: none;\n  padding: 0;\n}\n\nli {\n  margin: 0.5em 0;\n}\n\ninput[type=\"text\"] {\n  padding: 0.5em;\n  margin-right: 0.5em;\n}\n\nbutton {\n  padding: 0.5em;\n  background-color: #701CF5;\n  color: #fff;\n  border: none;\n  cursor: pointer;\n}\n\nbutton:hover {\n  background-color: #5a0ecb;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion du Projet TO-DO List React<\/h3>\n\n\n\n<p>Avec ce tutoriel sur la <strong>TO-DO List avec React<\/strong>, vous avez appris \u00e0 appliquer les concepts de React pour cr\u00e9er une application de liste de t\u00e2ches dynamique. Cette application peut \u00eatre enrichie avec de nouvelles fonctionnalit\u00e9s comme l&rsquo;\u00e9dition et la suppression des t\u00e2ches. Continuez \u00e0 explorer React pour d\u00e9couvrir plus de possibilit\u00e9s dans le d\u00e9veloppement d&rsquo;applications web modernes. Pour progresser encore plus, d\u00e9couvrez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/creer-focus-affichage-page-to-do-list-react\" target=\"_blank\" rel=\"noopener\">comment cr\u00e9er un focus affichage sur la page TO-DO List React<\/a>.<\/p>\n\n\n\n<p>N&rsquo;oubliez pas de <a href=\"https:\/\/wikiform.fr\/codespace\/\" target=\"_blank\" rel=\"noopener\">consulter d&rsquo;autres ressources React<\/a> pour am\u00e9liorer vos comp\u00e9tences.<\/p>\n\n\n<!-- Promo Banner -->\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 Offre 50%\" title=\"\"><\/a>\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-applications-r%C3%A9actives-avec-react-js\/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\u00ab\u00a0`\n\nNote : chaque \u00e9tape du projet est enrichie de liens vers des articles compl\u00e9mentaires sur les pratiques de React, pour garantir un guide complet de d\u00e9veloppement de TO-DO List avec React. Les vid\u00e9os et images sont bien int\u00e9gr\u00e9es, tandis que les offres sp\u00e9ciales sont mises en avant pour maximiser l&rsquo;impact marketing.","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Projet TO-DO List React est une excellente occasion d&rsquo;am\u00e9liorer vos comp\u00e9tences en d\u00e9veloppement front-end. En cr\u00e9ant une application de liste de t\u00e2ches dynamique et&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3251,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6002","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\/6002","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=6002"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6002\/revisions"}],"predecessor-version":[{"id":6003,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6002\/revisions\/6003"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3251"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}