{"id":5918,"date":"2024-09-10T00:14:09","date_gmt":"2024-09-10T00:14:09","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/a-la-decouverte-des-props-react-guide\/"},"modified":"2024-09-10T00:14:13","modified_gmt":"2024-09-10T00:14:13","slug":"a-la-decouverte-des-props-react-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/a-la-decouverte-des-props-react-guide\/","title":{"rendered":"3.4 \u00c0 la D\u00e9couverte des Props en React : Guide"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>\u00c0 la D\u00e9couverte des Props en React<\/strong> : Les props en React sont des outils essentiels permettant le passage des donn\u00e9es d&rsquo;un composant parent \u00e0 un composant enfant. Cette transmission de donn\u00e9es est cruciale pour construire des interfaces utilisateur dynamiques et modulables. Dans ce guide, nous allons explorer en profondeur le fonctionnement des props, leur utilisation, et leur gestion \u00e0 travers des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Props 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\/706055024?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 props (propri\u00e9t\u00e9s) en React sont des objets que l&rsquo;on peut transmettre de composants parents \u00e0 composants enfants. Elles permettent de passer des donn\u00e9es et des m\u00e9thodes n\u00e9cessaires pour le fonctionnement et le rendu des composants enfants. Comprendre l&rsquo;utilisation des props vous permettra de cr\u00e9er des applications React plus flexibles et maintenables.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir et Utiliser les Props<\/h3>\n\n\n\n<p>Voici comment d\u00e9finir et utiliser des props dans un composant React. Pour ce faire, nous allons cr\u00e9er un composant parent qui passera des props \u00e0 un composant enfant.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>\/\/ ParentComponent.js\nimport React from 'react';\nimport ChildComponent from '.\/ChildComponent';\n\nconst ParentComponent = () => {\n  const userInfo = {\n    name: 'John Doe',\n    age: 30\n  };\n\n  return (\n    <div>\n      <h1>Informations Utilisateur<\/h1>\n      <ChildComponent user={userInfo} \/>\n    <\/div>\n  );\n};\n\nexport default ParentComponent;\n\n\/\/ ChildComponent.js\nimport React from 'react';\n\nconst ChildComponent = ({ user }) => {\n  return (\n    <div>\n      <p>Nom: {user.name}<\/p>\n      <p>\u00c2ge: {user.age}<\/p>\n    <\/div>\n  );\n};\n\nexport default ChildComponent;\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, le composant <code>ParentComponent<\/code> passe l&rsquo;objet <code>userInfo<\/code> comme prop au <code>ChildComponent<\/code>. Le composant enfant acc\u00e8de et utilise ces donn\u00e9es pour rendre les informations de l&rsquo;utilisateur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Validation des Props avec PropTypes<\/h3>\n\n\n\n<p>Il est important de valider le type des props que re\u00e7oivent vos composants pour s&rsquo;assurer que les bonnes donn\u00e9es sont pass\u00e9es et utilis\u00e9es. Pour cela, React propose un utilitaire nomm\u00e9 <code>PropTypes<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>\/\/ ChildComponent.js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nconst ChildComponent = ({ user }) => {\n  return (\n    <div>\n      <p>Nom: {user.name}<\/p>\n      <p>\u00c2ge: {user.age}<\/p>\n    <\/div>\n  );\n};\n\nChildComponent.propTypes = {\n  user: PropTypes.shape({\n    name: PropTypes.string.isRequired,\n    age: PropTypes.number.isRequired\n  }).isRequired\n};\n\nexport default ChildComponent;\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, nous utilisons le package <code>PropTypes<\/code> pour d\u00e9finir des types pour les props du <code>ChildComponent<\/code>. Nous signalons que la prop <code>user<\/code> doit \u00eatre un objet contenant une cha\u00eene de caract\u00e8res <code>name<\/code> et un nombre <code>age<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Props par D\u00e9faut<\/h3>\n\n\n\n<p>Les props par d\u00e9faut permettent de d\u00e9finir des valeurs par d\u00e9faut pour les props non fournies. Cela aide \u00e0 \u00e9viter les erreurs lorsque les composants ont besoin de certaines donn\u00e9es pour fonctionner correctement.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>\/\/ ChildComponent.js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nconst ChildComponent = ({ user }) => {\n  return (\n    <div>\n      <p>Nom: {user.name}<\/p>\n      <p>\u00c2ge: {user.age}<\/p>\n    <\/div>\n  );\n};\n\nChildComponent.propTypes = {\n  user: PropTypes.shape({\n    name: PropTypes.string,\n    age: PropTypes.number\n  })\n};\n\nChildComponent.defaultProps = {\n  user: {\n    name: \"Anonyme\",\n    age: 0\n  }\n};\n\nexport default ChildComponent;\n<\/code><\/pre>\n\n\n\n<p>Ici, nous d\u00e9finissons des valeurs par d\u00e9faut pour la prop <code>user<\/code>. Si le composant parent ne fournit pas la prop <code>user<\/code>, le composant enfant affichera \u00ab\u00a0Anonyme\u00a0\u00bb pour le nom et \u00ab\u00a00\u00a0\u00bb pour l&rsquo;\u00e2ge.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Passer des Fonctions via Props<\/h3>\n\n\n\n<p>Les props ne se limitent pas aux simples valeurs, elles peuvent \u00e9galement inclure des fonctions. Cela permet de d\u00e9clencher des comportements dans le composant parent \u00e0 partir du composant enfant.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>\/\/ ParentComponent.js\nimport React from 'react';\nimport ChildComponent from '.\/ChildComponent';\n\nconst ParentComponent = () => {\n  const handleClick = () => {\n    alert('Bouton cliqu\u00e9 dans le composant enfant');\n  };\n\n  return (\n    <div>\n      <h1>Composant Parent<\/h1>\n      <ChildComponent onClick={handleClick} \/>\n    <\/div>\n  );\n};\n\nexport default ParentComponent;\n\n\/\/ ChildComponent.js\nimport React from 'react';\n\nconst ChildComponent = ({ onClick }) => {\n  return (\n    <div>\n      <button onClick={onClick}>Cliquez-moi<\/button>\n    <\/div>\n  );\n};\n\nexport default ChildComponent;\n<\/code><\/pre>\n\n\n\n<p>Ici, le composant <code>ParentComponent<\/code> passe une fonction <code>handleClick<\/code> comme prop au <code>ChildComponent<\/code>. Lorsque l&rsquo;utilisateur clique sur le bouton dans le composant enfant, la fonction <code>handleClick<\/code> du parent est d\u00e9clench\u00e9e.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Manipuler les Donn\u00e9es avec Props<\/h3>\n\n\n\n<p>Parfois, vous devrez manipuler ou transformer les donn\u00e9es re\u00e7ues via les props avant de les utiliser. Voici un exemple de comment faire cela efficacement.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>\/\/ ChildComponent.js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nconst ChildComponent = ({ numbers }) => {\n  const doubledNumbers = numbers.map(num => num * 2);\n\n  return (\n    <ul>\n      {doubledNumbers.map((num, index) => (\n        <li key={index}>{num}<\/li>\n      ))}\n    <\/ul>\n  );\n};\n\nChildComponent.propTypes = {\n  numbers: PropTypes.arrayOf(PropTypes.number).isRequired\n};\n\nexport default ChildComponent;\n<\/code><\/pre>\n\n\n\n<p>Ici, le composant enfant re\u00e7oit un tableau de nombres comme prop, qu\u2019il manipule ensuite en doublant chaque nombre avant de les afficher.<\/p>\n\n\n\n<p>Pour approfondir vos connaissances sur les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\">bases de React<\/a> ainsi que sur les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\">React Hooks<\/a>, vous pouvez visiter notre site. Nous recommandons \u00e9galement d&rsquo;explorer les <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\">\u00e9quipements de d\u00e9veloppement<\/a> modernes pour am\u00e9liorer votre flux de travail en tant que d\u00e9veloppeur React. Enfin, pour des tutoriels plus d\u00e9taill\u00e9s, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/comment-ajouter-nouveau-composant-react\">l&rsquo;ajout de nouveaux composants en React<\/a>.<\/p>\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>Props en React<\/strong> sont fondamentales pour la cr\u00e9ation d&rsquo;applications dynamiques et modulaires. En les ma\u00eetrisant, vous pouvez passer des donn\u00e9es et des m\u00e9thodes entre vos composants de mani\u00e8re efficace. Continuez \u00e0 explorer les possibilit\u00e9s offertes par React pour cr\u00e9er des interfaces utilisateur robustes et interactives. Pour plus de tutoriels sur React, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/react-avanc\u00e9\/150\">guide avanc\u00e9 sur React<\/a>. Pour apprendre \u00e0 cr\u00e9er vos premiers composants, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-des-composants-avec-react-tutoriel\">tutoriel d\u00e9taill\u00e9<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d\u00e9veloppeur-react\/144\" 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 \u00c0 la D\u00e9couverte des Props en React : Les props en React sont des outils essentiels permettant le passage des donn\u00e9es d&rsquo;un composant parent&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3166,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5918","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\/5918","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=5918"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5918\/revisions"}],"predecessor-version":[{"id":5919,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5918\/revisions\/5919"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3166"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}