{"id":6144,"date":"2025-04-07T11:54:38","date_gmt":"2025-04-07T11:54:38","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/creer-focus-affichage-page-to-do-list-react\/"},"modified":"2025-04-07T11:54:43","modified_gmt":"2025-04-07T11:54:43","slug":"creer-focus-affichage-page-to-do-list-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/creer-focus-affichage-page-to-do-list-react\/","title":{"rendered":"12.3 Cr\u00e9er le Focus \u00e0 l&rsquo;Affichage Page TO-DO List React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Focus Affichage Page TO-DO List React<\/strong> est une fonctionnalit\u00e9 essentielle qui peut transformer la mani\u00e8re dont les utilisateurs interagissent avec votre application. Comprendre comment mettre en \u0153uvre ce type de fonctionnalit\u00e9 avec React vous aidera \u00e0 am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur et \u00e0 d\u00e9velopper des interfaces plus dynamiques. Apprenons \u00e0 le faire \u00e9tape par \u00e9tape gr\u00e2ce \u00e0 des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Cr\u00e9ation de Focus dans une Page 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\/706133259?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>Cr\u00e9er le focus lors de l&rsquo;affichage de votre page TO-DO list en React assure que l&rsquo;utilisateur commence tout de suite \u00e0 interagir avec votre application, en mettant par exemple automatiquement le curseur dans le champ de saisie lors du chargement de la page. Commen\u00e7ons par examiner comment mettre en \u0153uvre cette fonctionnalit\u00e9 simple mais efficace.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mettre en Place une Application de Base TO-DO List<\/h3>\n\n\n\n<p>Avant de nous concentrer sur la gestion du focus, commen\u00e7ons par cr\u00e9er une structure de base pour notre application TO-DO list. Nous utiliserons <code>create-react-app<\/code> pour d\u00e9marrer rapidement. Pour ceux qui d\u00e9butent avec React, <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">apprendre \u00e0 cr\u00e9er une premi\u00e8re application React<\/a> peut \u00eatre un excellent point de d\u00e9part.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>npx create-react-app todo-focus\n\n\/\/ Dirigez-vous dans le r\u00e9pertoire\ncd todo-focus\n\n\/\/ D\u00e9marrez l'application\nnpm start\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un Composant de Saisie avec Focus Automatique<\/h3>\n\n\n\n<p>Pour g\u00e9rer automatiquement le focus sur une entr\u00e9e d&rsquo;utilisateur, nous utiliserons la r\u00e9f\u00e9rence React (React ref). Cela nous permettra de d\u00e9finir le focus directement sur le champ de saisie apr\u00e8s le rendu du composant. Pour une compr\u00e9hension approfondie sur les composants, visitez <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\" target=\"_blank\" rel=\"noopener\">la diff\u00e9rence entre les composants par classe et par fonction dans React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useEffect, useRef } from 'react';\n\nfunction TodoInput() {\n  const inputRef = useRef(null);\n\n  useEffect(() => {\n    inputRef.current.focus();\n  }, []);\n\n  return (\n    <input ref={inputRef} type=\"text\" placeholder=\"Nouvelle t\u00e2che...\" \/>\n  );\n}\n\nexport default TodoInput;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9grer le Composant dans l&rsquo;Application TO-DO List<\/h3>\n\n\n\n<p>Maintenant que nous avons notre composant de saisie avec la gestion du focus, nous devons l&rsquo;int\u00e9grer dans notre application principale et s&rsquo;assurer que l&rsquo;exp\u00e9rience utilisateur est fluide. Pour approfondir votre compr\u00e9hension des composants r\u00e9fl\u00e9chissez \u00e0 l&rsquo;utilisation des <a href=\"https:\/\/wikiform.fr\/codespace\/voir-modifier-props-states-navigateur-react\" target=\"_blank\" rel=\"noopener\">props et states dans React<\/a>, qui sont des concepts fondamentaux du d\u00e9veloppement React.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport TodoInput from '.\/TodoInput';\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <h1>Ma TO-DO List<\/h1>\n      <TodoInput \/>\n      {\/* Plus de composants pour afficher les t\u00e2ches *\/}\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Am\u00e9liorations et Pratiques Avanc\u00e9es<\/h3>\n\n\n\n<p>Avec la fonctionnalit\u00e9 de base en place, vous pouvez envisager des am\u00e9liorations suppl\u00e9mentaires pour rendre votre application TO-DO encore plus utile, comme l&rsquo;utilisation des <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\" target=\"_blank\" rel=\"noopener\">React Hooks<\/a> pour une gestion avanc\u00e9e des \u00e9tats.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Ajouter une Validation en Temps R\u00e9el<\/h4>\n\n\n\n<p>\u00c0 l&rsquo;aide de hooks React, vous pouvez facilement mettre en \u0153uvre la validation en temps r\u00e9el des entr\u00e9es utilisateurs pour v\u00e9rifier les doublons, les longueurs de texte ou d&rsquo;autres contraintes.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction TodoInput() {\n  const [task, setTask] = useState('');\n  const [error, setError] = useState(null);\n\n  const handleChange = (e) => {\n    setTask(e.target.value);\n    \n    if(e.target.value.length === 0) {\n      setError('La t\u00e2che ne peut pas \u00eatre vide.');\n    } else {\n      setError(null);\n    }\n  };\n\n  return (\n    <div>\n      <input type=\"text\" value={task} onChange={handleChange} placeholder=\"Nouvelle t\u00e2che...\" \/>\n      {error ? <span style={{color: 'red'}}>{error}<\/span> : null}\n    <\/div>\n  );\n}\n\nexport default TodoInput;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">G\u00e9rer le Focus lors de l&rsquo;Ajout de T\u00e2ches<\/h4>\n\n\n\n<p>Assurez-vous que le champ de saisie reprend le focus apr\u00e8s qu&rsquo;une nouvelle t\u00e2che ait \u00e9t\u00e9 ajout\u00e9e, ce qui am\u00e9liore le flux d&rsquo;utilisation. Vous pouvez lire plus \u00e0 ce sujet dans notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-suppression-to-do-list-react\" target=\"_blank\" rel=\"noopener\">la gestion des suppressions dans une TO-DO list avec React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function TodoInput({ onAdd }) {\n  const inputRef = useRef(null);\n  const [task, setTask] = useState('');\n\n  const addTask = () => {\n    onAdd(task);\n    setTask('');\n    inputRef.current.focus();  \/\/ Re-met le focus sur l'input\n  };\n\n  const handleKeyPress = (e) => {\n    if (e.key === 'Enter') {\n      addTask();\n    }\n  };\n\n  return (\n    <div>\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={task}\n        onChange={(e) => setTask(e.target.value)}\n        onKeyPress={handleKeyPress}\n        placeholder=\"Nouvelle t\u00e2che...\"\n      \/>\n      <button onClick={addTask}>Ajouter<\/button>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur le Focus Affichage Page TO-DO List React<\/h2>\n\n\n\n<p>En appliquant le focus automatique dans une page TO-DO List React, vous simplifiez consid\u00e9rablement l&rsquo;interaction utilisateur et am\u00e9liorez globalement l&rsquo;exp\u00e9rience utilisateur. Au fur et \u00e0 mesure que vous d\u00e9veloppez vos comp\u00e9tences avec React, explorez d&rsquo;autres fa\u00e7ons de rendre vos applications plus accessibles et engageantes. \u00c0 mesure que vous progressez, pensez \u00e0 explorer des concepts comme les <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-react-fragments-utiliser\" target=\"_blank\" rel=\"noopener\">fragments React<\/a>, <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-hoc-react-explications\" target=\"_blank\" rel=\"noopener\">HOC (Higher-Order Components)<\/a>, Redux pour la gestion de l&rsquo;\u00e9tat ou m\u00eame des int\u00e9grations avec d&rsquo;autres biblioth\u00e8ques pour enrichir vos applications.<\/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-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 Redux et React Offre 50%\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Focus Affichage Page TO-DO List React est une fonctionnalit\u00e9 essentielle qui peut transformer la mani\u00e8re dont les utilisateurs interagissent avec votre application. Comprendre comment&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3195,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6144","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\/6144","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=6144"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6144\/revisions"}],"predecessor-version":[{"id":6145,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6144\/revisions\/6145"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3195"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}