{"id":5906,"date":"2024-09-07T12:14:13","date_gmt":"2024-09-07T12:14:13","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/rest-parameter-javascript-react-guide\/"},"modified":"2024-09-07T12:14:17","modified_gmt":"2024-09-07T12:14:17","slug":"rest-parameter-javascript-react-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/rest-parameter-javascript-react-guide\/","title":{"rendered":"2.8 Le REST Parameter en JavaScript pour React : Guide"},"content":{"rendered":"\n<p><strong>Le REST Parameter en JavaScript pour React<\/strong> est une fonctionnalit\u00e9 essentielle qui permet de g\u00e9rer les fonctions \u00e0 nombre d&rsquo;arguments variables. Ma\u00eetriser le REST Parameter peut vous aider \u00e0 \u00e9crire des composants React plus flexibles et r\u00e9utilisables. Plongeons dans son fonctionnement et son utilisation avec des exemples pratiques de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>REST Parameter en JavaScript<\/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\/706050940?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>Le REST Parameter permet de regrouper plusieurs arguments en un tableau de valeurs, ce qui est particuli\u00e8rement utile dans les fonctions de composant React qui n\u00e9cessitent une flexibilit\u00e9 des arguments. Actuellement, dans React, on utilise massivement ce concept pour propager des propri\u00e9t\u00e9s ou pour g\u00e9rer des \u00e9v\u00e9nements avec des arguments multiples.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation du REST Parameter en JavaScript<\/h3>\n\n\n\n<p>Voyons un exemple basique de l&rsquo;utilisation du REST Parameter dans une fonction JavaScript :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function addition(...nombres) {\n    return nombres.reduce((a, b) => a + b, 0);\n}\n\nconsole.log(addition(1, 2, 3)); \/\/ 6\nconsole.log(addition(10, 20, 30, 40)); \/\/ 100\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Application dans un Composant React<\/h3>\n\n\n\n<p>Pour int\u00e9grer le REST Parameter dans un composant React, prenons l&rsquo;exemple d&rsquo;un composant qui affiche une liste d&rsquo;\u00e9l\u00e9ments :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\n\nconst ListeDynamique = ({ titre, ...elements }) => {\n    return (\n        <div>\n            <h2>{titre}<\/h2>\n            <ul>\n                {Object.keys(elements).map((cle, index) => (\n                    <li key={index}>{elements[cle]}<\/li>\n                ))}\n            <\/ul>\n        <\/div>\n    );\n}\n\nexport default ListeDynamique;\n<\/code><\/pre>\n\n\n\n<p>Ensuite, vous pouvez utiliser ce composant en passant un titre et divers \u00e9l\u00e9ments de la liste comme arguments :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport ReactDOM from 'react-dom';\nimport ListeDynamique from '.\/ListeDynamique';\n\nconst App = () => {\n    return (\n        <div>\n            <ListeDynamique titre=\"Ma Liste\" item1=\"Chocolat\" item2=\"Vanille\" item3=\"Fraise\" item4=\"Menthe\"\/>\n        <\/div>\n    )\n}\n\nReactDOM.render(&lt;App\/>, document.getElementById('root'));\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Passer des Props Dynamiques \u00e0 des Composants<\/h3>\n\n\n\n<p>Un autre cas d&rsquo;utilisation du REST Parameter en React est de passer des props dynamiques \u00e0 des composants enfants. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\n\nconst AffichageProps = ({ titre, ...rest }) => {\n    return (\n        <div>\n            <h3>{titre}<\/h3>\n            {Object.entries(rest).map(([key, value]) => (\n                <p key={key}>{key}: {value}<\/p>\n            ))}\n        <\/div>\n    );\n}\n\nconst Parent = () => {\n    const propsDynamique = {\n        prop1: \"Valeur 1\",\n        prop2: \"Valeur 2\",\n        prop3: \"Valeur 3\"\n    };\n\n    return <AffichageProps titre=\"Props Dynamiques\" {...propsDynamique} \/>;\n}\n\nexport default Parent;\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, toutes les props suppl\u00e9mentaires sont regroup\u00e9es et affich\u00e9es dynamiquement par le composant enfant <code>AffichageProps<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion des \u00c9v\u00e9nements avec des Arguments Multiples<\/h3>\n\n\n\n<p>Le REST Parameter peut \u00e9galement \u00eatre utile pour les fonctions de gestion des \u00e9v\u00e9nements qui n\u00e9cessitent plusieurs arguments. Par exemple, une fonction de gestion de clics qui doit enregistrer des informations suppl\u00e9mentaires :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\n\nconst GestionClicExemple = ({ texte, ...actions }) => {\n    const handleClick = (e, ...params) => {\n        console.log('\u00c9v\u00e9nement: ', e);\n        console.log('Param\u00e8tres suppl\u00e9mentaires: ', params);\n    }\n\n    return (\n        <button onClick={(e) => handleClick(e, ...Object.values(actions))}>\n            {texte}\n        <\/button>\n    );\n}\n\nexport default GestionClicExemple;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser le REST Parameter \u00e0 des Fins de Composition de Composants<\/h3>\n\n\n\n<p>Pour des cas plus avanc\u00e9s, le REST Parameter peut \u00eatre utilis\u00e9 pour la composition de composants, permettant de passer des props \u00e0 une cha\u00eene de composants sans connaitre au pr\u00e9alable leur nombre exact. Consid\u00e9rez ceci dans un setup HOC (Higher Order Component) :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\n\nconst withExtraInfo = (WrappedComponent) => {\n    return ({ extraInfo, ...props }) => (\n        <WrappedComponent extraInfo={extraInfo} {...props} \/>\n    );\n}\n\nconst ComposantBase = ({ extraInfo, name }) => (\n    <div>\n        <p>Nom: {name}<\/p>\n        <p>Info Suppl\u00e9mentaire: {extraInfo}<\/p>\n    <\/div>\n);\n\nconst ComposantAvecInfo = withExtraInfo(ComposantBase);\n\nexport default function App() {\n    return (\n        <ComposantAvecInfo name=\"Alice\" extraInfo=\"Aime le code\" \/>\n    );\n}\n<\/code><\/pre>\n\n\n\n<p>Ce mod\u00e8le HOC peut \u00eatre \u00e9tendu pour une injection de props plus complexe, favorisant la r\u00e9utilisation et la composition modulaire dans vos composants React.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Le <strong>REST Parameter en JavaScript<\/strong> est une fonctionnalit\u00e9 puissante et flexible qui enrichit consid\u00e9rablement l&rsquo;\u00e9criture de composants React. Que ce soit pour g\u00e9rer des props dynamiques, des \u00e9v\u00e8nements complexes, ou pour composer des composants, il s&rsquo;av\u00e8re \u00eatre un outil indispensable. Continuez \u00e0 explorer ces concepts pour ma\u00eetriser davantage React et cr\u00e9er des applications dynamiques et r\u00e9actives. Pour plus de tutoriels sur React et JavaScript, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\">la cr\u00e9ation de sites interactifs avec React et Redux<\/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 Formation Redux et React Offre 50%\" title=\"\"><\/a>\n\n\n<!-- Internal Links -->\n<p>Pour en savoir plus sur les diff\u00e9rents aspects de React, vous pouvez consulter les articles suivants :<\/p>\n<ul>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">Qu&rsquo;est-ce que React ? Introduction et Avantages<\/a><\/li>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\" target=\"_blank\" rel=\"noopener\">Extensions Indispensables pour D\u00e9velopper avec React<\/a><\/li>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">Cr\u00e9er sa Premi\u00e8re Application React<\/a><\/li>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/a-la-decouverte-des-props-react-guide\" target=\"_blank\" rel=\"noopener\">\u00c0 la D\u00e9couverte des Props en React<\/a><\/li>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-javascript-dans-jsx-react\" target=\"_blank\" rel=\"noopener\">Utiliser JavaScript dans JSX avec React<\/a><\/li>\n<\/ul>\n\n<!-- External Links -->\n<p>Pour aller plus loin avec JavaScript et React, voici quelques ressources externes :<\/p>\n<ul>\n    <li><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Reference\/Functions\/rest_parameters\" target=\"_blank\" rel=\"nofollow noopener\">MDN Web Docs sur les Rest Parameters<\/a><\/li>\n    <li><a href=\"https:\/\/reactjs.org\/docs\/components-and-props.html\" target=\"_blank\" rel=\"nofollow noopener\">Documentation Officielle de React sur les Composants et les Props<\/a><\/li>\n    <li><a href=\"https:\/\/reactjs.org\/docs\/hooks-intro.html\" target=\"_blank\" rel=\"nofollow noopener\">Introduction aux Hooks React<\/a><\/li>\n    <li><a href=\"https:\/\/www.javascripttutorial.net\/es6\/javascript-rest-parameters\/\" target=\"_blank\" rel=\"nofollow noopener\">Tutoriel sur les Rest Parameters en JavaScript<\/a><\/li>\n    <li><a href=\"https:\/\/www.youtube.com\/watch?v=5Z7lSSMwL40\" target=\"_blank\" rel=\"nofollow noopener\">Vid\u00e9o YouTube sur les Rest Parameters<\/a><\/li>\n<\/ul>\n\n\n<p>En comprenant et en utilisant le <strong>REST Parameter en JavaScript<\/strong> correctement, vous pouvez am\u00e9liorer consid\u00e9rablement la flexibilit\u00e9 et la r\u00e9utilisabilit\u00e9 de vos composants React. N&rsquo;h\u00e9sitez pas \u00e0 consulter des ressources suppl\u00e9mentaires pour approfondir vos connaissances, comme les articles mentionn\u00e9s ci-dessus, ainsi que la formation disponible sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"nofollow noopener\">la cr\u00e9ation de sites interactifs avec React et Redux<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le REST Parameter en JavaScript pour React est une fonctionnalit\u00e9 essentielle qui permet de g\u00e9rer les fonctions \u00e0 nombre d&rsquo;arguments variables. Ma\u00eetriser le REST Parameter&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3268,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5906","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\/5906","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=5906"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5906\/revisions"}],"predecessor-version":[{"id":5907,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5906\/revisions\/5907"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3268"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}