{"id":6010,"date":"2024-10-28T12:54:34","date_gmt":"2024-10-28T12:54:34","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/creer-state-to-do-list-react-guide\/"},"modified":"2024-10-28T12:54:38","modified_gmt":"2024-10-28T12:54:38","slug":"creer-state-to-do-list-react-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/creer-state-to-do-list-react-guide\/","title":{"rendered":"9.5 Cr\u00e9er le State pour une TO-DO List en React : Guide"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Cr\u00e9er State TO-DO List React<\/strong> est toujours au c\u0153ur de la construction d&rsquo;applications modernes et r\u00e9actives. Ma\u00eetriser la gestion du state dans React vous permet de rendre vos interfaces utilisateur plus dynamiques et fluides. Dans cet article,  nous explorerons comment <a href=\"https:\/\/wikiform.fr\/codespace\/creer-state-to-do-list-react-guide\" target=\"_blank\" rel=\"noopener\">cr\u00e9er et g\u00e9rer le state<\/a> d&rsquo;une To-Do List en React \u00e0 travers divers exemples de code. En appliquant ces techniques, vous pourrez \u00e9galement am\u00e9liorer vos projets actuels qui utilisent <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\" target=\"_blank\" rel=\"noopener\">des extensions indispensables pour d\u00e9velopper en React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 Cr\u00e9er State 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\/706103009?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, le <strong>state<\/strong> est un concept fondamental qui repr\u00e9sente l&rsquo;\u00e9tat local d&rsquo;un composant. Il est crucial pour g\u00e9rer les mises \u00e0 jour dynamiques dans une application et permet de rendre les composants visuels r\u00e9actifs lorsque ce state change. Ma\u00eetriser la gestion du state est essentiel pour r\u00e9aliser <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\" target=\"_blank\" rel=\"noopener\">des composants performants en React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Initialiser le State pour une TO-DO List<\/h3>\n\n\n\n<p>Pour bien d\u00e9buter dans votre projet, commencez par initialiser le state dans un composant fonctionnel via le hook <code>useState<\/code> de React. Pour notre TO-DO List, vous pouvez d\u00e9buter avec un tableau vide, qui stockera les \u00e9l\u00e9ments de la liste :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction TodoApp() {\n  \/\/ Initialiser le state des t\u00e2ches\n  const [todos, setTodos] = useState([]);\n\n  return (\n    <div className=\"todo-app\">\n      <h2>Ma TO-DO List<\/h2>\n      {\/* Interface utilisateur \u00e0 venir *\/}\n    <\/div>\n  );\n}\n\nexport default TodoApp;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter une Nouvelle T\u00e2che<\/h3>\n\n\n\n<p>Pour dynamiser votre TO-DO List, il vous suffit de cr\u00e9er une fonction qui met \u00e0 jour le state en ajoutant une nouvelle t\u00e2che \u00e0 votre liste existante. Voici un exemple de fonction qui remplit ce r\u00f4le :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>function TodoApp() {\n  const [todos, setTodos] = useState([]);\n  const [newTodo, setNewTodo] = useState('');\n\n  const addTodo = () => {\n    if (newTodo.trim()) {\n      setTodos([...todos, newTodo]);\n      setNewTodo(''); \/\/ R\u00e9initialise l'entr\u00e9e apr\u00e8s l'ajout\n    }\n  };\n\n  return (\n    <div className=\"todo-app\">\n      <h2>Ma TO-DO List<\/h2>\n      <input\n        type=\"text\"\n        value={newTodo}\n        onChange={(e) => setNewTodo(e.target.value)}\n        placeholder=\"Ajouter une nouvelle t\u00e2che\"\n      \/>\n      <button onClick={addTodo}>Ajouter<\/button>\n      {\/* Interface utilisateur pour afficher les t\u00e2ches *\/}\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Afficher la Liste des T\u00e2ches<\/h3>\n\n\n\n<p>Quand vous avez la possibilit\u00e9 d&rsquo;ajouter des t\u00e2ches, l&rsquo;\u00e9tape suivante est de les afficher \u00e0 l&rsquo;\u00e9cran. Utilisez la m\u00e9thode <code>map()<\/code> pour it\u00e9rer le tableau <code>todos<\/code> et g\u00e9n\u00e9rer des \u00e9l\u00e9ments d&rsquo;interface pour chaque t\u00e2che :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>function TodoApp() {\n  const [todos, setTodos] = useState([]);\n  const [newTodo, setNewTodo] = useState('');\n\n  const addTodo = () => {\n    if (newTodo.trim()) {\n      setTodos([...todos, newTodo]);\n      setNewTodo('');\n    }\n  };\n\n  return (\n    <div className=\"todo-app\">\n      <h2>Ma TO-DO List<\/h2>\n      <input\n        type=\"text\"\n        value={newTodo}\n        onChange={(e) => setNewTodo(e.target.value)}\n        placeholder=\"Ajouter une nouvelle t\u00e2che\"\n      \/>\n      <button onClick={addTodo}>Ajouter<\/button>\n      <ul>\n        {todos.map((todo, index) => (\n          <li key={index}>{todo}<\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Supprimer une T\u00e2che<\/h3>\n\n\n\n<p>Supprimer une t\u00e2che est tout aussi crucial que son ajout. Pour cela, il vous suffit de cr\u00e9er une fonction qui filtre le tableau <code>todos<\/code> pour enlever l&rsquo;\u00e9l\u00e9ment s\u00e9lectionn\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>function TodoApp() {\n  const [todos, setTodos] = useState([]);\n  const [newTodo, setNewTodo] = useState('');\n\n  const addTodo = () => {\n    if (newTodo.trim()) {\n      setTodos([...todos, newTodo]);\n      setNewTodo('');\n    }\n  };\n\n  const deleteTodo = (indexToRemove) => {\n    setTodos(todos.filter((_, index) => index !== indexToRemove));\n  };\n\n  return (\n    <div className=\"todo-app\">\n      <h2>Ma TO-DO List<\/h2>\n      <input\n        type=\"text\"\n        value={newTodo}\n        onChange={(e) => setNewTodo(e.target.value)}\n        placeholder=\"Ajouter une nouvelle t\u00e2che\"\n      \/>\n      <button onClick={addTodo}>Ajouter<\/button>\n      <ul>\n        {todos.map((todo, index) => (\n          <li key={index}>\n            {todo}\n            <button onClick={() => deleteTodo(index)}>Supprimer<\/button>\n          <\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur Cr\u00e9er State TO-DO List React<\/h2>\n\n\n\n<p>Saisir la logique de cr\u00e9ation et gestion du state dans React est une comp\u00e9tence inestimable pour d\u00e9velopper des applications r\u00e9actives comme cette TO-DO List. En ma\u00eetrisant ce guide, vous aurez acquis une base solide pour explorer des fonctionnalit\u00e9s avanc\u00e9es et d\u00e9velopper des interfaces utilisateur performantes. Pour approfondir votre apprentissage, vous pouvez d\u00e9couvrir <a href=\"https:\/\/wikiform.fr\/codespace\/maitriser-objets-javascript-developper-react\" target=\"_blank\" rel=\"noopener\">comment ma\u00eetriser les objets en JavaScript pour d\u00e9velopper en React<\/a>.<\/p>\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=\"Offre de formation React et Redux\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Cr\u00e9er State TO-DO List React est toujours au c\u0153ur de la construction d&rsquo;applications modernes et r\u00e9actives. Ma\u00eetriser la gestion du state dans React vous&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3199,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6010","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\/6010","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=6010"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6010\/revisions"}],"predecessor-version":[{"id":6011,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6010\/revisions\/6011"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3199"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6010"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}