{"id":6174,"date":"2025-07-28T11:54:21","date_gmt":"2025-07-28T11:54:21","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utiliser-ancres-requetes-get-react\/"},"modified":"2025-07-28T11:54:26","modified_gmt":"2025-07-28T11:54:26","slug":"utiliser-ancres-requetes-get-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utiliser-ancres-requetes-get-react\/","title":{"rendered":"15.9 Utiliser Ancres et Requ\u00eates GET en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Ancres Requ\u00eates GET React<\/strong> est essentiel pour cr\u00e9er des applications web dynamiques et r\u00e9actives. Comprendre comment ces \u00e9l\u00e9ments fonctionnent et interagissent vous permettra d&rsquo;am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur et la navigation de votre application. Explorons, \u00e0 travers des exemples pratiques, comment impl\u00e9menter des ancres et g\u00e9rer les requ\u00eates GET dans vos projets React.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Ancres et Requ\u00eates GET en 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\/706139751?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>Les ancres en HTML nous permettent de naviguer \u00e0 travers diff\u00e9rentes sections d&rsquo;une page. En React, bien que nous utilisons principalement le Router pour la navigation, les ancres jouent toujours un r\u00f4le important pour cr\u00e9er des liens directs vers des sections sp\u00e9cifiques. D&rsquo;autre part, les requ\u00eates GET sont utilis\u00e9es pour envoyer des donn\u00e9es au serveur sans modifier quoi que ce soit de notre c\u00f4t\u00e9, id\u00e9al pour r\u00e9cup\u00e9rer des ressources. Pour en savoir plus sur les diff\u00e9rences avec les requ\u00eates POST, vous pouvez visiter notre guide sur les <a href=\"https:\/\/wikiform.fr\/codespace\/mettre-en-place-route-application-react\" target=\"_blank\" rel=\"noopener\">routes en React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Liens d&rsquo;Ancrage en React<\/h3>\n\n\n\n<p>Pour cr\u00e9er un lien d&rsquo;ancrage en React, nous pouvons utiliser le bon vieux tag <code>&lt;a&gt;<\/code>, tout en s&rsquo;assurant que l&rsquo;\u00e9l\u00e9ment de destination a l&rsquo;identifiant correct que nous voulons atteindre :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\n\nfunction AncreExample() {\n  return (\n    <div>\n      <header>\n        <nav>\n          <a href=\"#section1\">Section 1<\/a>\n          <a href=\"#section2\">Section 2<\/a>\n        <\/nav>\n      <\/header>\n      <section id=\"section1\">\n        <h2>Section 1<\/h2>\n        <p>Contenu de la section 1...<\/p>\n      <\/section>\n      <section id=\"section2\">\n        <h2>Section 2<\/h2>\n        <p>Contenu de la section 2...<\/p>\n      <\/section>\n    <\/div>\n  );\n}\nexport default AncreExample;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Faire des Requ\u00eates GET avec Axios en React<\/h3>\n\n\n\n<p>Pour effectuer des requ\u00eates GET en React, une librairie populaire et simple d&rsquo;utilisation est <code>Axios<\/code>. Elle simplifie les appels HTTP et la gestion des promesses :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useEffect, useState } from 'react';\nimport axios from 'axios';\n\nfunction FetchData() {\n  const [data, setData] = useState([]);\n\n  useEffect(() => {\n    axios.get('https:\/\/api.example.com\/data')\n      .then(response => {\n        setData(response.data);\n      })\n      .catch(error => {\n        console.error('Error fetching data:', error);\n      });\n  }, []);\n\n  return (\n    <ul>\n      {data.map(item => (\n        <li key={item.id}>{item.name}<\/li>\n      ))}\n    <\/ul>\n  );\n}\n\nexport default FetchData;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Requ\u00eates GET pour la Navigation Dynamique<\/h3>\n\n\n\n<p>En utilisant les requ\u00eates GET, on peut dynamiquement obtenir des donn\u00e9es qui d\u00e9termineront le contenu affich\u00e9 sur notre page, ce qui est particuli\u00e8rement utile pour cr\u00e9er des listes ou des carrousels bas\u00e9s sur des donn\u00e9es externes. Pour approfondir vos connaissances sur la gestion dynamique des composants, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-dynamiquement-composants-react\" target=\"_blank\" rel=\"noopener\">comment modifier dynamiquement des composants React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useEffect, useState } from 'react';\nimport axios from 'axios';\n\nfunction DynamicNavigation() {\n  const [menuItems, setMenuItems] = useState([]);\n\n  useEffect(() => {\n    axios.get('https:\/\/api.example.com\/menu')\n      .then(response => {\n        setMenuItems(response.data);\n      })\n      .catch(error => {\n        console.error('Error loading menu:', error);\n      });\n  }, []);\n\n  return (\n    <nav>\n      <ul>\n        {menuItems.map(item => (\n          <li key={item.id}><a href={item.url}>{item.title}<\/a><\/li>\n        ))}\n      <\/ul>\n    <\/nav>\n  );\n}\n\nexport default DynamicNavigation;\n<\/code><\/pre>\n\n\n\n<p>En utilisant les ancres et les requ\u00eates GET avec prudence dans vos applications React, vous pouvez transformer la mani\u00e8re dont les utilisateurs interagissent avec votre site. Ces outils, bien compris et bien appliqu\u00e9s, peuvent grandement am\u00e9liorer la navigabilit\u00e9 et la richesse de contenu accessible, tout en garantissant une efficacit\u00e9 maximale. Pour explorer davantage sur l&rsquo;utilisation des ancres, d\u00e9couvrez comment <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-ancres-requetes-get-react\" target=\"_blank\" rel=\"noopener\">les ancres fonctionnent avec les requ\u00eates GET dans React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Ma\u00eetriser les <strong>ancres et requ\u00eates GET en React<\/strong> est crucial pour tout d\u00e9veloppeur qui souhaite cr\u00e9er des applications web modernes et r\u00e9actives. Que ce soit pour une navigation efficace ou pour une r\u00e9cup\u00e9ration de donn\u00e9es optimis\u00e9e, ces techniques sont la cl\u00e9 du succ\u00e8s dans la conception d&rsquo;exp\u00e9riences utilisateur fluides et engageantes. Continuez \u00e0 explorer ces concepts pour pousser les limites de ce que peut offrir le web d&rsquo;aujourd&rsquo;hui. Pour plus d&rsquo;informations sur les r\u00e9centes nouveaut\u00e9s, consultez notre article sur les <a href=\"https:\/\/wikiform.fr\/codespace\/nouveautes-javascript-savoir-react\" target=\"_blank\" rel=\"noopener\">nouvelles fonctionnalit\u00e9s de JavaScript n\u00e9cessaires pour 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=\"Learnify Formation Redux et React Offre 50%\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Ancres Requ\u00eates GET React est essentiel pour cr\u00e9er des applications web dynamiques et r\u00e9actives. Comprendre comment ces \u00e9l\u00e9ments fonctionnent et interagissent vous permettra d&rsquo;am\u00e9liorer&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3278,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6174","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\/6174","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=6174"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6174\/revisions"}],"predecessor-version":[{"id":6175,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6174\/revisions\/6175"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3278"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}