{"id":6055,"date":"2024-11-18T12:54:19","date_gmt":"2024-11-18T12:54:19","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ajouter-nouvelle-tache-to-do-list-react\/"},"modified":"2024-11-18T12:54:24","modified_gmt":"2024-11-18T12:54:24","slug":"ajouter-nouvelle-tache-to-do-list-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ajouter-nouvelle-tache-to-do-list-react\/","title":{"rendered":"9.8 Ajouter une Nouvelle T\u00e2che dans une TO-DO List React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Ajouter T\u00e2che TO-DO List React<\/strong> est essentiel pour cr\u00e9er des applications interactives et dynamiques. Dans ce tutoriel, nous allons explorer comment introduire de nouvelles t\u00e2ches dans une TO-DO list en utilisant React, tout en s&rsquo;assurant que chaque \u00e9tape est claire et pr\u00e9cise pour garantir une compr\u00e9hension optimale par les lecteurs. D\u00e9couvrons ensemble comment le faire avec des exemples pratiques de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>gestion de t\u00e2ches avec 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\/706105431?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>L&rsquo;ajout d&rsquo;une t\u00e2che dans une TO-DO list se fait g\u00e9n\u00e9ralement en manipulant les <strong>\u00e9tats de React<\/strong>. Dans React, les composants sont mis \u00e0 jour chaque fois que leur \u00e9tat change. Cela signifie que chaque ajout de t\u00e2che actualise automatiquement l&rsquo;affichage. Cela implique de manipuler des tableaux d&rsquo;objets o\u00f9 chaque objet repr\u00e9sente une t\u00e2che dans l&rsquo;application.<\/p>\n\n\n<!-- Internal links -->\n<p>Pour ceux qui cherchent \u00e0 apprendre les diff\u00e9rences entre <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\" target=\"_blank\" rel=\"noopener\">Single Page et Multi Page avec React<\/a>, ou encore d\u00e9couvrir <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-utiliser-context-api-react\" target=\"_blank\" rel=\"noopener\">comment utiliser Context API<\/a>, assurez-vous de lire nos autres articles. Vous pouvez \u00e9galement explorer les <a href=\"https:\/\/wikiform.fr\/codespace\/meilleurs-logiciels-developper-react\" target=\"_blank\" rel=\"noopener\">meilleurs logiciels pour d\u00e9velopper en React<\/a> pour optimiser votre flux de travail.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Configurer le Composant TO-DO List<\/h3>\n\n\n\n<p>Avant de commencer \u00e0 ajouter des t\u00e2ches, nous devons configurer notre composant de base. Un composant TO-DO List typique inclura un champ de saisie pour les nouvelles t\u00e2ches et une liste pour afficher les t\u00e2ches ajout\u00e9es. Voici comment nous allons structurer notre fichier de composant :<\/p>\n\n\n<!-- External links -->\n<p>Pour une compr\u00e9hension approfondie sur la mani\u00e8re de cr\u00e9er des composants en React, consultez ce <a href=\"https:\/\/reactjs.org\/docs\/components-and-props.html\" target=\"_blank\" rel=\"noopener\">guide officiel de React<\/a>. En outre, d\u00e9couvrir pourquoi et comment utiliser <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions\" target=\"_blank\" rel=\"noopener\">les fonctions fl\u00e9ch\u00e9es en JavaScript<\/a> peut \u00e9galement enrichir votre compr\u00e9hension.<\/p>\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useState } from 'react';\n\nfunction TodoList() {\n  const [tasks, setTasks] = useState([]);\n  const [newTask, setNewTask] = useState('');\n\n  const handleAddTask = () => {\n    if (newTask) {\n      setTasks([...tasks, newTask]);\n      setNewTask('');\n    }\n  };\n\n  return (\n    <div>\n      <h2>Ma Liste de T\u00e2ches<\/h2>\n      <input \n        type=\"text\"\n        value={newTask}\n        onChange={e => setNewTask(e.target.value)}\n        placeholder=\"Ajouter une nouvelle t\u00e2che\"\n      \/>\n      <button onClick={handleAddTask}>Ajouter<\/button>\n      <ul>\n        {tasks.map((task, index) => (\n          <li key={index}>{task}<\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n\nexport default TodoList;\n\n\/\/ Pour en savoir plus sur la manipulation des states dans React, consultez <a href=\"https:\/\/wikiform.fr\/codespace\/stocker-donnees-avec-state-react\" target=\"_blank\" rel=\"noopener\">notre guide sur le stockage des donn\u00e9es avec State<\/a>.\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des T\u00e2ches Dynamiquement<\/h3>\n\n\n\n<p>Pour ajouter une nouvelle t\u00e2che, nous devons capturer l&rsquo;entr\u00e9e de l&rsquo;utilisateur et l&rsquo;ajouter \u00e0 notre tableau d&rsquo;\u00e9tats \u00ab\u00a0tasks\u00a0\u00bb. Ce tableau est alors utilis\u00e9 pour mettre \u00e0 jour la liste des t\u00e2ches \u00e0 afficher en utilisant la m\u00e9thode \u00ab\u00a0map\u00a0\u00bb de JavaScript pour parcourir chaque entr\u00e9e et la rendre dans un \u00e9l\u00e9ment de liste <li>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Interaction avec l&rsquo;Utilisateur<\/h3>\n\n\n\n<p>Assurez-vous que l&rsquo;interface utilisateur est r\u00e9active pour une meilleure exp\u00e9rience utilisateur. Chaque nouvel ajout devrait clarifier que l&rsquo;application a accept\u00e9 et enregistr\u00e9 la t\u00e2che. Vous pouvez am\u00e9liorer cela par le biais d&rsquo;animations ou de transitions douces. Pour approfondir vos connaissances sur les animations CSS en React, les articles sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/modifier-dynamiquement-css-modules-css-react\" target=\"_blank\" rel=\"noopener\">utilisation de CSS Modules<\/a> sont d&rsquo;excellentes ressources.<\/p>\n\n\n<!-- External resource -->\n<p>Pour enrichir votre application, consid\u00e9rez l&rsquo;utilisation de biblioth\u00e8ques telles que <a href=\"https:\/\/www.framer.com\/motion\/\" target=\"_blank\" rel=\"noopener\">Framer Motion<\/a> pour des animations fluides et performantes.<\/p>\n\n\n<pre class=\"wp-block-code lang-css\"><code>.task-list-item {\n  transition: all 0.3s ease-in-out;\n}\n\n.task-list-item-enter {\n  opacity: 0;\n  transform: translateY(-10px);\n}\n\n.task-list-item-enter-active {\n  opacity: 1;\n  transform: translateY(0);\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>En suivant ces \u00e9tapes, ajouter une nouvelle t\u00e2che dans votre TO-DO list React deviendra un processus simple et fluide. Vous pouvez \u00e9largir cet exemple pour int\u00e9grer des fonctionnalit\u00e9s plus avanc\u00e9es comme la suppression de t\u00e2ches, la modification ou les marquages de t\u00e2ches compl\u00e9t\u00e9es. Pour plus de ressources sur React, consultez notre cours complet sur <a href=\"https:\/\/wikiform.fr\/react-course\" target=\"_blank\" rel=\"noopener\">la cr\u00e9ation de projets avanc\u00e9s avec React et Redux<\/a>. D\u00e9couvrez plus en d\u00e9tail comment <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-nouvelle-tache-to-do-list-react\" target=\"_blank\" rel=\"noopener\">ajouter une nouvelle t\u00e2che dans une TO-DO List avec React<\/a> en suivant ce lien.<\/p>\n\n\n\n<div>\n  <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/react-redux\/143\" target=\"_blank\" rel=\"noopener\">\n    <img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/react-course.png\" loading=\"lazy\" alt=\"En savoir plus sur React et Redux\" title=\"\">\n  <\/a>\n<\/div>\n\n<div>\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\">\n    <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 React et Redux avec une r\u00e9duction sp\u00e9ciale\" title=\"\">\n  <\/a>\n<\/div>\n\n\u00ab\u00a0`\n\nNote: This updated article now includes the incorporation of SEO modifications as requested. The Vimeo video, internal and external links, rendered keywords, and structural enhancements have been applied directly in the provided HTML without deleting the existing content. The article is also enriched with additional paragraphs to meet the required word count.","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Ajouter T\u00e2che TO-DO List React est essentiel pour cr\u00e9er des applications interactives et dynamiques. Dans ce tutoriel, nous allons explorer comment introduire de nouvelles&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3161,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6055","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\/6055","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=6055"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6055\/revisions"}],"predecessor-version":[{"id":6056,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6055\/revisions\/6056"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3161"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}