{"id":5936,"date":"2024-09-16T09:24:33","date_gmt":"2024-09-16T09:24:33","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/voir-modifier-props-states-navigateur-react\/"},"modified":"2024-09-16T09:24:37","modified_gmt":"2024-09-16T09:24:37","slug":"voir-modifier-props-states-navigateur-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/voir-modifier-props-states-navigateur-react\/","title":{"rendered":"3.13 Voir et Modifier les Props et States depuis le Navigateur"},"content":{"rendered":"\n<p><strong>Voir et Modifier les Props et States depuis le Navigateur<\/strong> est une comp\u00e9tence puissante pour tout d\u00e9veloppeur React. Cette fonctionnalit\u00e9 permet de d\u00e9boguer et de comprendre le comportement des composants de mani\u00e8re efficace. Apprenons comment nous pouvons visualiser et modifier les props et \u00e9tats (states) depuis le navigateur gr\u00e2ce \u00e0 des outils comme React DevTools.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>React DevTools<\/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\/706058402?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>React DevTools est une extension de navigateur qui vous permet d&rsquo;inspecter la hi\u00e9rarchie des composants React, les props, les states et leur flux de donn\u00e9es. Cet outil est indispensable pour un d\u00e9bogage efficace et une meilleure compr\u00e9hension du fonctionnement interne de votre application React.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Installer React DevTools<\/h3>\n\n\n\n<p>Pour commencer, installez l&rsquo;extension React DevTools pour votre navigateur pr\u00e9f\u00e9r\u00e9. Vous pouvez la trouver dans le Chrome Web Store ou la galerie d&rsquo;extensions de Firefox. Une fois install\u00e9e, red\u00e9marrez votre navigateur pour activer l&rsquo;extension. Vous pouvez en apprendre plus sur les extensions essentielles pour les d\u00e9veloppeurs React ici : <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\">https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/react-icons.example\/images\/react-devtools.png\" loading=\"lazy\" alt=\"React DevTools\" title=\"\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2. Inspection des Props et States<\/h3>\n\n\n\n<p>Apr\u00e8s avoir install\u00e9 React DevTools, ouvrez votre application React dans le navigateur et acc\u00e9dez aux outils de d\u00e9veloppement. Vous verrez un nouvel onglet \u00ab\u00a0React\u00a0\u00bb appara\u00eetre. Cliquez sur cet onglet pour commencer l&rsquo;inspection des props et states des composants. Pour une introduction d\u00e9taill\u00e9e \u00e0 React, veuillez consulter <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\">qu-est-ce-que-react-introduction-avantages<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/react-icons.example\/images\/inspect-props-states.png\" loading=\"lazy\" alt=\"Inspecter Props et States\" title=\"\"><\/figure>\n\n\n\n<p>S\u00e9lectionnez un composant dans la hi\u00e9rarchie pour voir ses propri\u00e9t\u00e9s (props) et \u00e9tats (states). Vous pouvez \u00e9galement voir les hooks utilis\u00e9s par le composant et les valeurs actuelles de chaque hook.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Modifier les Props et States<\/h3>\n\n\n\n<p>Une fois un composant s\u00e9lectionn\u00e9 dans React DevTools, vous pouvez modifier les props et states en temps r\u00e9el. Cela permet de voir imm\u00e9diatement comment les modifications affectent le comportement de votre application. Pour ce faire, cliquez sur la valeur d&rsquo;une prop ou d&rsquo;un state, modifiez-la, puis appuyez sur Entr\u00e9e pour appliquer le changement.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/react-icons.example\/images\/edit-props-states.png\" loading=\"lazy\" alt=\"Modifier Props et States\" title=\"\"><\/figure>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Exemple de composant React \u00e0 inspecter et modifier\nimport React, { useState } from 'react';\n\nfunction ExampleComponent({ initialCount }) {\n  const [count, setCount] = useState(initialCount);\n\n  return (\n    <div>\n      <p>Le compteur est \u00e0 : {count}<\/p>\n      <button onClick={() => setCount(count + 1)}>Incr\u00e9menter<\/button>\n    <\/div>\n  );\n}\n\nexport default ExampleComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">4. Utiliser React DevTools pour D\u00e9boguer<\/h3>\n\n\n\n<p>En plus de visualiser et de modifier les props et states, React DevTools offre des fonctionnalit\u00e9s de d\u00e9bogage avanc\u00e9es. Vous pouvez par exemple :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n  <li>Voir la hi\u00e9rarchie des composants pour mieux comprendre la structure de votre application<\/li>\n  <li>Suivre les mises \u00e0 jour des composants en temps r\u00e9el<\/li>\n  <li>Utiliser la console pour ex\u00e9cuter du code et acc\u00e9der aux composants directement via l&rsquo;API <code>window.$r<\/code><\/li>\n<\/ul>\n\n\n\n<p>Ces outils vous aident \u00e0 isoler des probl\u00e8mes et \u00e0 optimiser les performances de votre application. Pour plus d&rsquo;informations sur la gestion des states dans React, consultez <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-dynamiquement-classes-react-guide\">comment modifier dynamiquement les classes dans React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Exercices Pratiques<\/h3>\n\n\n\n<p>Pour tirer le meilleur parti de React DevTools, voici quelques exercices pratiques :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n  <li>Ouvrez une application React que vous avez d\u00e9velopp\u00e9e et essayez de modifier les props et states de diff\u00e9rents composants<\/li>\n  <li>Ajoutez des hooks suppl\u00e9mentaires \u00e0 un composant et observez comment les valeurs changent dans React DevTools<\/li>\n  <li>Utilisez la console pour acc\u00e9der aux composants et manipuler les props et states<\/li>\n<\/ul>\n\n\n\n<p>D\u00e9velopper cette comp\u00e9tence vous permettra de d\u00e9boguer plus efficacement et de mieux comprendre le fonctionnement de vos applications React. Pour explorer davantage, vous pouvez consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">tutoriel sur la cr\u00e9ation de votre premi\u00e8re application React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Ressources Compl\u00e9mentaires<\/h3>\n\n\n\n<p>Pour approfondir vos connaissances sur React et React DevTools, consultez les ressources suivantes :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n  <li><a href=\"https:\/\/reactjs.org\/docs\/hooks-intro.html\" target=\"_blank\" rel=\"noopener\">Documentation officielle sur les hooks React<\/a><\/li>\n  <li><a href=\"https:\/\/reactjs.org\/blog\/2019\/08\/15\/new-react-devtools.html\" target=\"_blank\" rel=\"noopener\">Article sur les nouvelles fonctionnalit\u00e9s de React DevTools<\/a><\/li>\n  <li><a href=\"https:\/\/www.udemy.com\/course\/react-redux\/\" target=\"_blank\" rel=\"noopener\">Cours Udemy sur React et Redux<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>En utilisant <strong>React DevTools<\/strong>, vous pouvez voir et modifier les props et states de vos composants directement depuis votre navigateur. Cela facilite non seulement le d\u00e9bogage mais aussi la compr\u00e9hension de la dynamique de votre application. Continuez \u00e0 explorer React DevTools pour optimiser et am\u00e9liorer vos projets React. Pour plus de tutoriels, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\">cours complet sur React et Redux<\/a>. Pour apprendre \u00e0 cr\u00e9er des composants avec hooks, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-des-composants-avec-hooks-react-tutoriel\">tutoriel d\u00e9taill\u00e9<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-PYTHON-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Python 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 Redux et React Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Voir et Modifier les Props et States depuis le Navigateur est une comp\u00e9tence puissante pour tout d\u00e9veloppeur React. Cette fonctionnalit\u00e9 permet de d\u00e9boguer et de&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3287,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5936","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\/5936","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=5936"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5936\/revisions"}],"predecessor-version":[{"id":5937,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5936\/revisions\/5937"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3287"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5936"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5936"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}