{"id":6083,"date":"2024-12-09T12:56:06","date_gmt":"2024-12-09T12:56:06","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utiliser-refs-react-tutoriel\/"},"modified":"2024-12-09T12:56:11","modified_gmt":"2024-12-09T12:56:11","slug":"utiliser-refs-react-tutoriel","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utiliser-refs-react-tutoriel\/","title":{"rendered":"10.3 Utiliser les Refs en React : Tutoriel"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Refs React<\/strong> est une pratique essentielle pour g\u00e9rer les r\u00e9f\u00e9rences directes aux \u00e9l\u00e9ments du DOM dans vos composants React. Apprendre \u00e0 ma\u00eetriser les Refs vous permettra d&rsquo;am\u00e9liorer la performance et la flexibilit\u00e9 de vos applications. Explorons comment les impl\u00e9menter efficacement \u00e0 travers des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Refs 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\/706116327?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 Refs React permettent d&rsquo;acc\u00e9der directement aux \u00e9l\u00e9ments DOM ou aux instances de composants. Elles sont particuli\u00e8rement utiles pour g\u00e9rer des formulaires complexes, d\u00e9clencher des animations ou int\u00e9grer des biblioth\u00e8ques tiers qui manipulent directement le DOM. Pour plus d&rsquo;informations sur les diff\u00e9rences entre les single-page et multi-page applications avec React, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\">guide comparatif<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des References en React<\/h3>\n\n\n\n<p>Pour commencer avec les Refs React, vous pouvez cr\u00e9er une Ref en utilisant l&rsquo;API <code>React.createRef()<\/code> ou le hook <code>useRef<\/code>. Voici un exemple simple montrant comment cr\u00e9er et utiliser une Ref dans une fonction de composant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useRef } from 'react';\n\nfunction TextInputWithFocusButton() {\n    const inputEl = useRef(null);\n    const onButtonClick = () => {\n        \/\/ `current` pointe vers le champ texte mont\u00e9\n        inputEl.current.focus();\n    };\n    return (\n        <>\n            <input ref={inputEl} type=\"text\" \/>\n            <button onClick={onButtonClick}>Focus the input<\/button>\n        <\/>\n    );\n}\n<\/code><\/pre>\n\n\n\n<p>Pour un guide plus approfondi sur l&rsquo;utilisation des fonctions fl\u00e9ch\u00e9es en JavaScript dans votre projet React, vous pouvez consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\" target=\"_blank\" rel=\"noopener\">article d\u00e9di\u00e9<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Focus et S\u00e9lection des Inputs<\/h3>\n\n\n\n<p>Les Refs sont id\u00e9ales pour g\u00e9rer le focus des inputs dans une application. Par exemple, vous pouvez programmer une fonction qui met automatiquement le focus sur un champ de saisie lors de l&rsquo;ouverture d&rsquo;un modal :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useRef, useEffect } from 'react';\n\nfunction ModalForm({ isOpen }) {\n    const inputRef = useRef(null);\n\n    useEffect(() => {\n        if (isOpen) {\n            inputRef.current.focus();\n        }\n    }, [isOpen]);\n\n    return (\n        <div>\n            <input ref={inputRef} type=\"text\" placeholder=\"Votre nom\" \/>\n            <button>Soumettre<\/button>\n        <\/div>\n    );\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Avanc\u00e9e des Refs<\/h3>\n\n\n\n<p>En plus de l&rsquo;acc\u00e8s aux \u00e9l\u00e9ments DOM, les Refs React permettent \u00e9galement de conserver une valeur mutable qui ne d\u00e9clenche pas le re-render du composant quand elle change. Cela peut \u00eatre utile pour stocker des valeurs mises \u00e0 jour par des \u00e9couteurs d&rsquo;\u00e9v\u00e9nements.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useRef, useState, useEffect } from 'react';\n\nfunction TimerComponent() {\n    const [count, setCount] = useState(0);\n    const savedCallback = useRef();\n\n    \/\/ Se souvenir du dernier rappel pass\u00e9.\n    useEffect(() => {\n        savedCallback.current = () => setCount(count + 1);\n    }, [count]);\n\n    useEffect(() => {\n        function tick() {\n            savedCallback.current();\n        }\n        let intervalId = setInterval(tick, 1000);\n        return () => clearInterval(intervalId);\n    }, []); \/\/ ne se r\u00e9execute jamais\n\n    return <h1>{count}<\/h1>;\n}\n<\/code><\/pre>\n\n\n\n<p>Pour aller plus loin et comprendre les diff\u00e9rences entre les composants par classe et les fonctions, d\u00e9couvrez notre <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\">comparatif d\u00e9taill\u00e9<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Interactions avec les Biblioth\u00e8ques Tiers<\/h3>\n\n\n\n<p>Les Refs jouent un r\u00f4le crucial lorsque vos composants doivent interagir avec des biblioth\u00e8ques tiers qui manipulent directement le DOM, comme D3.js. Vous pouvez ainsi garder le contr\u00f4le tout en permettant \u00e0 la biblioth\u00e8que de manipuler la structure. Vous pouvez explorer l&rsquo;int\u00e9gration avec davantage de biblioth\u00e8ques sur notre <a href=\"https:\/\/faceidsolutions.com\/blog\/how-to-use-d3-js-with-react\" target=\"_blank\" rel=\"dofollow noopener\">guide sur D3.js avec React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useRef, useEffect } from 'react';\nimport * as d3 from 'd3';\n\nfunction D3Chart() {\n    const ref = useRef();\n\n    useEffect(() => {\n        const svg = d3.select(ref.current);\n        svg.append('circle')\n           .attr('cx', 50)\n           .attr('cy', 50)\n           .attr('r', 40)\n           .style('fill', 'blue');\n    }, []);\n    \n    return <svg ref={ref} width=\"100\" height=\"100\" \/>;\n}\n<\/code><\/pre>\n\n\n\n<p>Pour une compr\u00e9hension d\u00e9taill\u00e9e de l&rsquo;utilisation du Context API avec les Refs, n&rsquo;h\u00e9sitez pas \u00e0 visiter notre section <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-utiliser-context-api-react\">guide sur le Context API React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les Refs React constituent une fonctionnalit\u00e9 puissante pour interagir directement avec le DOM ou stocker des r\u00e9f\u00e9rences stables sans refaire le rendu. En tant que d\u00e9veloppeur, exploiter les Refs vous permet de peaufiner l&rsquo;exp\u00e9rience utilisateur et d&rsquo;am\u00e9liorer la fluidit\u00e9 de vos applications. Pour explorer plus en d\u00e9tail, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/ma%C3%AEtriser-react\">cours complet sur React<\/a> et d\u00e9couvrez des strat\u00e9gies avanc\u00e9es de gestion des states et des side-effects. Vous pourriez aussi vouloir explorer des <a href=\"https:\/\/wikiform.fr\/codespace\/react-tutorials\">tutoriels suppl\u00e9mentaires sur React<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/ma%C3%AEtriser-react\/210\" target=\"_blank\" rel=\"noopener\">\n  <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=\"\">\n<\/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\">\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=\"Learnify Formation Redux et React\" title=\"\">\n<\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Refs React est une pratique essentielle pour g\u00e9rer les r\u00e9f\u00e9rences directes aux \u00e9l\u00e9ments du DOM dans vos composants React. Apprendre \u00e0 ma\u00eetriser les Refs&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3283,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6083","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\/6083","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=6083"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6083\/revisions"}],"predecessor-version":[{"id":6084,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6083\/revisions\/6084"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3283"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}