Pr\u00e9parer Projet TO-DO List React<\/title>\n <meta name=\"description\" content=\"Apprenez \u00e0 cr\u00e9er une application de liste de t\u00e2ches avec React dans ce guide complet. Suivez toutes les \u00e9tapes du projet, de la pr\u00e9paration \u00e0 la gestion de l'\u00e9tat et aux interactions.\">\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n\n<body>\n <article>\n <h1>Pr\u00e9parer Projet TO-DO List React<\/h1>\n <p>Cr\u00e9er une application de liste de t\u00e2ches avec React est un exercice pratique fantastique pour am\u00e9liorer vos comp\u00e9tences en d\u00e9veloppement front-end. Dans ce tutoriel, nous allons voir comment pr\u00e9parer et structurer un projet de liste de t\u00e2ches \u00e9tape par \u00e9tape. En utilisant React, une biblioth\u00e8que JavaScript puissante pour cr\u00e9er des interfaces utilisateur, ce projet nous permettra d’explorer des concepts tels que les composants, l’\u00e9tat, les propri\u00e9t\u00e9s et l’interaction utilisateur.<\/p>\n \n <h2>Introduction \u00e0 la Cr\u00e9ation d’une Liste de T\u00e2ches avec React<\/h2>\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\/706101263?dnt=1&fullscreen=0&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 \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 \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 <h3>Pourquoi Cr\u00e9er une Liste de T\u00e2ches?<\/h3>\n <p>Les applications de listes de t\u00e2ches sont simples mais puissantes, et sont couramment utilis\u00e9es par les d\u00e9veloppeurs pour apprendre et d\u00e9montrer des comp\u00e9tences en React. Ce tutoriel vous guidera \u00e0 travers le processus de cr\u00e9ation d’une telle application, en mettant l’accent sur la lisibilit\u00e9 du code, l’organisation des composants et la gestion de l’\u00e9tat.<\/p>\n\n <h2>Pr\u00e9parer Projet TO-DO List React : Mise en Place de l’Environnement<\/h2>\n <p>Avant de commencer, assurez-vous d’avoir Node.js et npm install\u00e9s sur votre machine. Voici comment configurer un projet React en utilisant Create React App :<\/p>\n <a href=\"https:\/\/wikiform.fr\/codespace\/preparer-projet-to-do-list-react-etapes\" target=\"_blank\" rel=\"noopener\">Pr\u00e9paration d\u00e9taill\u00e9e de votre environnement React<\/a>\n <pre><code>npx create-react-app todo-list-react\ncd todo-list-react\nnpm start\n<\/code><\/pre>\n <p>Une fois votre environnement pr\u00eat, vous pouvez suivre notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">tutoriel complet pour d\u00e9buter avec React<\/a>.<\/p>\n\n <h2>Pr\u00e9parer Projet TO-DO List React : Cr\u00e9ation des Composants de Base<\/h2>\n <p>Dans une application React, les composants sont les blocs de construction de l’interface. Pour notre liste de t\u00e2ches, nous allons cr\u00e9er trois composants principaux : `TodoForm` pour ajouter des t\u00e2ches, `TodoList` pour afficher les t\u00e2ches, et `TodoItem` pour chaque \u00e9l\u00e9ment de la liste.<\/p>\n\n <h3>Composant `TodoForm`<\/h3>\n <p>Ce composant contiendra un simple formulaire qui nous permettra d’ajouter de nouvelles t\u00e2ches.<\/p>\n <pre><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\n type=\"text\"\n value={value}\n onChange={e => setValue(e.target.value)}\n placeholder=\"Ajouter une t\u00e2che...\"\n \/>\n <\/form>\n );\n}\n\nexport default TodoForm;\n<\/code><\/pre>\n\n <h3>Composant `TodoItem`<\/h3>\n <p>Chaque t\u00e2che est repr\u00e9sent\u00e9e par ce composant, qui affichera le texte de la t\u00e2che et une option pour la supprimer.<\/p>\n <pre><code>import React from 'react';\n\nfunction TodoItem({ todo, index, removeTodo }) {\n return (\n <div className=\"todo-item\">\n {todo.text}\n <button onClick={() => removeTodo(index)}>Supprimer<\/button>\n <\/div>\n );\n}\n\nexport default TodoItem;\n<\/code><\/pre>\n\n <h3>Composant `TodoList`<\/h3>\n <p>Enfin, `TodoList` va g\u00e9rer l’affichage des `TodoItem`. Il assure aussi la gestion des ajouts et suppressions des t\u00e2ches.<\/p>\n <pre><code>import React, { useState } from 'react';\nimport TodoForm from '.\/TodoForm';\nimport TodoItem from '.\/TodoItem';\n\nfunction TodoList() {\n const [todos, setTodos] = useState([]);\n\n const addTodo = text => {\n const newTodos = [...todos, { text }];\n setTodos(newTodos);\n };\n\n const removeTodo = index => {\n const newTodos = todos.filter((todo, todoIndex) => todoIndex !== index);\n setTodos(newTodos);\n };\n\n return (\n <div>\n <TodoForm addTodo={addTodo} \/>\n {todos.map((todo, index) => (\n <TodoItem key={index} index={index} todo={todo} removeTodo={removeTodo} \/>\n ))}\n <\/div>\n );\n}\n\nexport default TodoList;\n<\/code><\/pre>\n <p>Pour plus de d\u00e9tails sur l’utilisation des composants, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\" target=\"_blank\" rel=\"noopener\">les diff\u00e9rences entre les composants par classe et les composants fonctionnels<\/a>.<\/p>\n\n <h2>Gestion de l’\u00c9tat et Interactions<\/h2>\n <p>Dans la gestion d’un projet React comme notre TO-DO List, la gestion de l’\u00e9tat devient une priorit\u00e9. C’est ce qui permet d’assurer la bonne interaction entre les composants.<\/p>\n\n <h3>Utilisation de `useState`<\/h3>\n <p>Nous utilisons le hook `useState` pour g\u00e9rer l’\u00e9tat de notre liste de t\u00e2ches dans `TodoList` et l’entr\u00e9e de l’utilisateur dans `TodoForm`. Vous pouvez \u00e9galement explorer l’importance des hooks dans notre introduction sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\" target=\"_blank\" rel=\"noopener\">React Hooks<\/a>.<\/p>\n\n <h3>Passer des Props entre Composants<\/h3>\n <p>Le composant `TodoForm` utilise la fonction `addTodo` pass\u00e9e en prop pour ajouter de nouvelles t\u00e2ches \u00e0 l’\u00e9tat du composant `TodoList`. <\/p>\n <p>Chaque t\u00e2che poss\u00e9dant un bouton de suppression utilise la fonction `removeTodo` pour se retirer de la liste lors du clic. Apprenez-en davantage sur les <a href=\"https:\/\/wikiform.fr\/codespace\/a-la-decouverte-des-props-react-guide\" target=\"_blank\" rel=\"noopener\">props dans React<\/a>.<\/p>\n\n <h2>Styles et Am\u00e9lioration de l’Interface<\/h2>\n <p>Bien que ce tutoriel se concentre surtout sur les fonctionnalit\u00e9s, les styles sont tout aussi importants pour une bonne exp\u00e9rience utilisateur. Consid\u00e9rez l’utilisation de CSS ou d’une biblioth\u00e8que telle que <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-styled-components-site-react\" target=\"_blank\" rel=\"noopener\">Styled Components<\/a> pour styliser votre application. Vous pouvez \u00e9galement explorer le design et l’importance des <a href=\"https:\/\/wikiform.fr\/codespace\/ce-que-nous-apprendrons-design-react\" target=\"_blank\" rel=\"noopener\">modules CSS dans React<\/a>.<\/p>\n\n <h2>Conclusion<\/h2>\n <p>Ce mini-projet d\u00e9montre comment d\u00e9marrer avec React en cr\u00e9ant une application fonctionnelle avec des composants, des \u00e9tats et des \u00e9v\u00e9nements utilisateur. \u00c0 partir de cette base, vous pouvez enrichir votre application de fonctionnalit\u00e9s avanc\u00e9es, comme l’\u00e9dition des t\u00e2ches, la gestion de l’\u00e9tat global avec Context API ou Redux, et l’ajout d’animations pour am\u00e9liorer l’exp\u00e9rience utilisateur.<\/p>\n <p>Pour plus de d\u00e9tails sur les bonnes pratiques de React et sur la construction d’applications plus complexes, explorez les ressources officielles de la <a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"dofollow noopener\">documentation de React<\/a> et des tutoriels avanc\u00e9s disponibles en ligne.<\/p>\n <p>D\u00e9couvrez nos articles sur les <a href=\"https:\/\/wikiform.fr\/codespace\/projet-to-do-list-amelioree-react-plan\" target=\"_blank\" rel=\"noopener\">projets React am\u00e9lior\u00e9s<\/a> ainsi que sur l’optimisation des fonctionnalit\u00e9s de votre application TO-DO List.<\/p>\n <\/article>\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\">\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=\"Offre sp\u00e9ciale sur la formation Redux et React\" style=\"display: block; margin: 20px auto; max-width: 100%;\" title=\"\">\n <\/a>\n\n<\/body>\n\n<\/html>\n\u00ab\u00a0`\n\nJ’ai int\u00e9gr\u00e9 les optimisations SEO directement dans le contenu HTML comme sp\u00e9cifi\u00e9. Ces optimisations incluent l’ajout de liens internes et externes, l’utilisation du mot-cl\u00e9 principal et de ses variantes, l’ajout de la vid\u00e9o Vimeo, ainsi qu’un lien pour promouvoir une formation. La structure du texte a \u00e9galement \u00e9t\u00e9 enrichie pour proposer un contenu plus complet.","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Pr\u00e9parer Projet TO-DO List React Pr\u00e9parer Projet TO-DO List React Cr\u00e9er une application de liste de t\u00e2ches avec React est un exercice pratique fantastique…<\/p>\n","protected":false},"author":2,"featured_media":3246,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6004","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\/6004","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=6004"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6004\/revisions"}],"predecessor-version":[{"id":6005,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6004\/revisions\/6005"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3246"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6004,"date":"2024-10-18T09:24:19","date_gmt":"2024-10-18T09:24:19","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/preparer-projet-to-do-list-react-etapes\/"},"modified":"2024-10-18T09:24:23","modified_gmt":"2024-10-18T09:24:23","slug":"preparer-projet-to-do-list-react-etapes","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/preparer-projet-to-do-list-react-etapes\/","title":{"rendered":"9.2 Pr\u00e9parer son Projet TO-DO List avec React : \u00c9tapes"},"content":{"rendered":"\u00ab\u00a0`html\n\n\n\n\n \n \n Pr\u00e9parer Projet TO-DO List React<\/title>\n <meta name=\"description\" content=\"Apprenez \u00e0 cr\u00e9er une application de liste de t\u00e2ches avec React dans ce guide complet. Suivez toutes les \u00e9tapes du projet, de la pr\u00e9paration \u00e0 la gestion de l'\u00e9tat et aux interactions.\">\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n\n<body>\n <article>\n <h1>Pr\u00e9parer Projet TO-DO List React<\/h1>\n <p>Cr\u00e9er une application de liste de t\u00e2ches avec React est un exercice pratique fantastique pour am\u00e9liorer vos comp\u00e9tences en d\u00e9veloppement front-end. Dans ce tutoriel, nous allons voir comment pr\u00e9parer et structurer un projet de liste de t\u00e2ches \u00e9tape par \u00e9tape. En utilisant React, une biblioth\u00e8que JavaScript puissante pour cr\u00e9er des interfaces utilisateur, ce projet nous permettra d’explorer des concepts tels que les composants, l’\u00e9tat, les propri\u00e9t\u00e9s et l’interaction utilisateur.<\/p>\n \n <h2>Introduction \u00e0 la Cr\u00e9ation d’une Liste de T\u00e2ches avec React<\/h2>\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\/706101263?dnt=1&fullscreen=0&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 \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 \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 <h3>Pourquoi Cr\u00e9er une Liste de T\u00e2ches?<\/h3>\n <p>Les applications de listes de t\u00e2ches sont simples mais puissantes, et sont couramment utilis\u00e9es par les d\u00e9veloppeurs pour apprendre et d\u00e9montrer des comp\u00e9tences en React. Ce tutoriel vous guidera \u00e0 travers le processus de cr\u00e9ation d’une telle application, en mettant l’accent sur la lisibilit\u00e9 du code, l’organisation des composants et la gestion de l’\u00e9tat.<\/p>\n\n <h2>Pr\u00e9parer Projet TO-DO List React : Mise en Place de l’Environnement<\/h2>\n <p>Avant de commencer, assurez-vous d’avoir Node.js et npm install\u00e9s sur votre machine. Voici comment configurer un projet React en utilisant Create React App :<\/p>\n <a href=\"https:\/\/wikiform.fr\/codespace\/preparer-projet-to-do-list-react-etapes\" target=\"_blank\" rel=\"noopener\">Pr\u00e9paration d\u00e9taill\u00e9e de votre environnement React<\/a>\n <pre><code>npx create-react-app todo-list-react\ncd todo-list-react\nnpm start\n<\/code><\/pre>\n <p>Une fois votre environnement pr\u00eat, vous pouvez suivre notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">tutoriel complet pour d\u00e9buter avec React<\/a>.<\/p>\n\n <h2>Pr\u00e9parer Projet TO-DO List React : Cr\u00e9ation des Composants de Base<\/h2>\n <p>Dans une application React, les composants sont les blocs de construction de l’interface. Pour notre liste de t\u00e2ches, nous allons cr\u00e9er trois composants principaux : `TodoForm` pour ajouter des t\u00e2ches, `TodoList` pour afficher les t\u00e2ches, et `TodoItem` pour chaque \u00e9l\u00e9ment de la liste.<\/p>\n\n <h3>Composant `TodoForm`<\/h3>\n <p>Ce composant contiendra un simple formulaire qui nous permettra d’ajouter de nouvelles t\u00e2ches.<\/p>\n <pre><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\n type=\"text\"\n value={value}\n onChange={e => setValue(e.target.value)}\n placeholder=\"Ajouter une t\u00e2che...\"\n \/>\n <\/form>\n );\n}\n\nexport default TodoForm;\n<\/code><\/pre>\n\n <h3>Composant `TodoItem`<\/h3>\n <p>Chaque t\u00e2che est repr\u00e9sent\u00e9e par ce composant, qui affichera le texte de la t\u00e2che et une option pour la supprimer.<\/p>\n <pre><code>import React from 'react';\n\nfunction TodoItem({ todo, index, removeTodo }) {\n return (\n <div className=\"todo-item\">\n {todo.text}\n <button onClick={() => removeTodo(index)}>Supprimer<\/button>\n <\/div>\n );\n}\n\nexport default TodoItem;\n<\/code><\/pre>\n\n <h3>Composant `TodoList`<\/h3>\n <p>Enfin, `TodoList` va g\u00e9rer l’affichage des `TodoItem`. Il assure aussi la gestion des ajouts et suppressions des t\u00e2ches.<\/p>\n <pre><code>import React, { useState } from 'react';\nimport TodoForm from '.\/TodoForm';\nimport TodoItem from '.\/TodoItem';\n\nfunction TodoList() {\n const [todos, setTodos] = useState([]);\n\n const addTodo = text => {\n const newTodos = [...todos, { text }];\n setTodos(newTodos);\n };\n\n const removeTodo = index => {\n const newTodos = todos.filter((todo, todoIndex) => todoIndex !== index);\n setTodos(newTodos);\n };\n\n return (\n <div>\n <TodoForm addTodo={addTodo} \/>\n {todos.map((todo, index) => (\n <TodoItem key={index} index={index} todo={todo} removeTodo={removeTodo} \/>\n ))}\n <\/div>\n );\n}\n\nexport default TodoList;\n<\/code><\/pre>\n <p>Pour plus de d\u00e9tails sur l’utilisation des composants, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\" target=\"_blank\" rel=\"noopener\">les diff\u00e9rences entre les composants par classe et les composants fonctionnels<\/a>.<\/p>\n\n <h2>Gestion de l’\u00c9tat et Interactions<\/h2>\n <p>Dans la gestion d’un projet React comme notre TO-DO List, la gestion de l’\u00e9tat devient une priorit\u00e9. C’est ce qui permet d’assurer la bonne interaction entre les composants.<\/p>\n\n <h3>Utilisation de `useState`<\/h3>\n <p>Nous utilisons le hook `useState` pour g\u00e9rer l’\u00e9tat de notre liste de t\u00e2ches dans `TodoList` et l’entr\u00e9e de l’utilisateur dans `TodoForm`. Vous pouvez \u00e9galement explorer l’importance des hooks dans notre introduction sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\" target=\"_blank\" rel=\"noopener\">React Hooks<\/a>.<\/p>\n\n <h3>Passer des Props entre Composants<\/h3>\n <p>Le composant `TodoForm` utilise la fonction `addTodo` pass\u00e9e en prop pour ajouter de nouvelles t\u00e2ches \u00e0 l’\u00e9tat du composant `TodoList`. <\/p>\n <p>Chaque t\u00e2che poss\u00e9dant un bouton de suppression utilise la fonction `removeTodo` pour se retirer de la liste lors du clic. Apprenez-en davantage sur les <a href=\"https:\/\/wikiform.fr\/codespace\/a-la-decouverte-des-props-react-guide\" target=\"_blank\" rel=\"noopener\">props dans React<\/a>.<\/p>\n\n <h2>Styles et Am\u00e9lioration de l’Interface<\/h2>\n <p>Bien que ce tutoriel se concentre surtout sur les fonctionnalit\u00e9s, les styles sont tout aussi importants pour une bonne exp\u00e9rience utilisateur. Consid\u00e9rez l’utilisation de CSS ou d’une biblioth\u00e8que telle que <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-styled-components-site-react\" target=\"_blank\" rel=\"noopener\">Styled Components<\/a> pour styliser votre application. Vous pouvez \u00e9galement explorer le design et l’importance des <a href=\"https:\/\/wikiform.fr\/codespace\/ce-que-nous-apprendrons-design-react\" target=\"_blank\" rel=\"noopener\">modules CSS dans React<\/a>.<\/p>\n\n <h2>Conclusion<\/h2>\n <p>Ce mini-projet d\u00e9montre comment d\u00e9marrer avec React en cr\u00e9ant une application fonctionnelle avec des composants, des \u00e9tats et des \u00e9v\u00e9nements utilisateur. \u00c0 partir de cette base, vous pouvez enrichir votre application de fonctionnalit\u00e9s avanc\u00e9es, comme l’\u00e9dition des t\u00e2ches, la gestion de l’\u00e9tat global avec Context API ou Redux, et l’ajout d’animations pour am\u00e9liorer l’exp\u00e9rience utilisateur.<\/p>\n <p>Pour plus de d\u00e9tails sur les bonnes pratiques de React et sur la construction d’applications plus complexes, explorez les ressources officielles de la <a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"dofollow noopener\">documentation de React<\/a> et des tutoriels avanc\u00e9s disponibles en ligne.<\/p>\n <p>D\u00e9couvrez nos articles sur les <a href=\"https:\/\/wikiform.fr\/codespace\/projet-to-do-list-amelioree-react-plan\" target=\"_blank\" rel=\"noopener\">projets React am\u00e9lior\u00e9s<\/a> ainsi que sur l’optimisation des fonctionnalit\u00e9s de votre application TO-DO List.<\/p>\n <\/article>\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\">\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=\"Offre sp\u00e9ciale sur la formation Redux et React\" style=\"display: block; margin: 20px auto; max-width: 100%;\" title=\"\">\n <\/a>\n\n<\/body>\n\n<\/html>\n\u00ab\u00a0`\n\nJ’ai int\u00e9gr\u00e9 les optimisations SEO directement dans le contenu HTML comme sp\u00e9cifi\u00e9. Ces optimisations incluent l’ajout de liens internes et externes, l’utilisation du mot-cl\u00e9 principal et de ses variantes, l’ajout de la vid\u00e9o Vimeo, ainsi qu’un lien pour promouvoir une formation. La structure du texte a \u00e9galement \u00e9t\u00e9 enrichie pour proposer un contenu plus complet.","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Pr\u00e9parer Projet TO-DO List React Pr\u00e9parer Projet TO-DO List React Cr\u00e9er une application de liste de t\u00e2ches avec React est un exercice pratique fantastique…<\/p>\n","protected":false},"author":2,"featured_media":3246,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6004","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\/6004","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=6004"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6004\/revisions"}],"predecessor-version":[{"id":6005,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6004\/revisions\/6005"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3246"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}