{"id":6258,"date":"2026-04-06T11:53:52","date_gmt":"2026-04-06T11:53:52","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utiliser-types-proptypes-react\/"},"modified":"2026-04-06T11:53:58","modified_gmt":"2026-04-06T11:53:58","slug":"utiliser-types-proptypes-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utiliser-types-proptypes-react\/","title":{"rendered":"20.5 Utiliser des Types avec PropTypes en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>PropTypes React<\/strong> est essentiel pour s&rsquo;assurer que les composants re\u00e7oivent les donn\u00e9es qu&rsquo;ils attendent. Cette pratique am\u00e9liore non seulement la robustesse de votre application, mais rend \u00e9galement votre code plus lisible en agissant comme une documentation \u00e9vitant ainsi les erreurs courantes. Voyons comment l&rsquo;impl\u00e9menter avec des exemples concrets. D\u00e9couvrez plus sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">l&rsquo;introduction et les avantages de React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 PropTypes en React<\/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\/706158364?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>PropTypes est un module int\u00e9gr\u00e9 de React permettant de valider les donn\u00e9es que les composants re\u00e7oivent sous forme de props. Cela aide \u00e0 pr\u00e9venir les erreurs, notamment dans les applications de grande taille o\u00f9 les composants sont souvent r\u00e9utilis\u00e9s. Pour plus d&rsquo;informations, consultez notre guide <a href=\"https:\/\/wikiform.fr\/codespace\/a-la-decouverte-des-props-react-guide\" target=\"_blank\" rel=\"noopener\">\u00e0 la d\u00e9couverte des props<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pourquoi Utiliser PropTypes ?<\/h3>\n\n\n\n<p>L&rsquo;utilisation des PropTypes est crucial pour :<\/p>\n<ul>\n  <li><strong>Validation des Propri\u00e9t\u00e9s<\/strong>: Assurez-vous que chaque prop est du type attendu, comme expliqu\u00e9 dans notre <a href=\"https:\/\/wikiform.fr\/codespace\/comprenez-les-state-react-guide\" target=\"_blank\" rel=\"noopener\">guide sur les states React<\/a>.<\/li>\n  <li><strong>D\u00e9bogage Facile<\/strong>: Les erreurs de types peuvent \u00eatre plus facilement identifi\u00e9es.<\/li>\n  <li><strong>Compr\u00e9hension<\/strong>: Les d\u00e9veloppeurs peuvent savoir imm\u00e9diatement quels types d&rsquo;arguments un composant est suppos\u00e9 recevoir. Lisez aussi sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-redux-pourquoi-utiliser\" target=\"_blank\" rel=\"noopener\">l&rsquo;utilisation de Redux avec React<\/a>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Comment Utiliser PropTypes<\/h3>\n\n\n\n<p>Pour utiliser PropTypes dans votre application React, il faut d&rsquo;abord s&rsquo;assurer que le package <code>prop-types<\/code> est install\u00e9. Utilisez le gestionnaire de paquets npm ou yarn :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-shell\"><code>npm install prop-types<\/code><\/pre>\n\n\n\n<p>Voici comment d\u00e9clarer et appliquer vos PropTypes sur des composants fonctionnels ou de classe :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\nimport PropTypes from 'prop-types';\n\n\/\/ Composant Fonctionnel\nconst MyComponent = ({ name, age }) => {\n    return (\n        <div>\n            <h1>Hello, {name}!<\/h1>\n            <p>You are {age} years old.<\/p>\n        <\/div>\n    );\n};\n\nMyComponent.propTypes = {\n    name: PropTypes.string.isRequired,\n    age: PropTypes.number.isRequired\n};\n\n\/\/ Composant de Classe\nclass MyComponentClass extends React.Component {\n    render() {\n        const { name, age } = this.props;\n        return (\n            <div>\n                <h1>Hello, {name}!<\/h1>\n                <p>You are {age} years old.<\/p>\n            <\/div>\n        );\n    }\n}\n\nMyComponentClass.propTypes = {\n    name: PropTypes.string.isRequired,\n    age: PropTypes.number.isRequired\n};\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Types Disponibles avec PropTypes<\/h3>\n\n\n\n<p>PropTypes propose plusieurs types pr\u00e9d\u00e9finis que vous pouvez utiliser :<\/p>\n<ul>\n  <li><code>PropTypes.array<\/code>: Un tableau<\/li>\n  <li><code>PropTypes.bool<\/code>: Un bool\u00e9en<\/li>\n  <li><code>PropTypes.func<\/code>: Une fonction<\/li>\n  <li><code>PropTypes.number<\/code>: Un nombre<\/li>\n  <li><code>PropTypes.object<\/code>: Un objet<\/li>\n  <li><code>PropTypes.string<\/code>: Une cha\u00eene de caract\u00e8res<\/li>\n  <li><code>PropTypes.symbol<\/code>: Un symbole<\/li>\n  <li>Et d&rsquo;autres combinaisons comme <code>PropTypes.arrayOf()<\/code>, <code>PropTypes.objectOf()<\/code>, etc.<\/li>\n<\/ul>\n<p>Pour une liste plus exhaustive, vous pouvez consulter <a href=\"https:\/\/reactjs.org\/docs\/typechecking-with-proptypes.html\" target=\"_blank\" rel=\"dofollow noopener\">la documentation officielle de React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Advanced Usage &#8211; Custom Validate Functions<\/h3>\n\n\n\n<p>Parfois, vous aurez besoin de r\u00e8gles de validation plus complexes. PropTypes permet l&rsquo;utilisation de fonctions de validation personnalis\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst MyComponent = ({ numberArray }) => {\n    return (\n        <ul>\n            {numberArray.map((number, index) => (\n                <li key={index}>{number}<\/li>\n            ))}\n        <\/ul>\n    );\n};\n\nMyComponent.propTypes = {\n    numberArray: function (props, propName, componentName) {\n        if (!Array.isArray(props[propName])) {\n            return new Error(\n                'Invalid prop `' + propName + '` supplied to' + ' `' + componentName + '`. Validation failed.'\n            );\n        }\n        if (props[propName].length < 3) {\n            return new Error(\n                'Invalid prop `' + propName + '` supplied to' + ' `' + componentName + '`. Minimum length of 3 is required.'\n            );\n        }\n    }\n};\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion - PropTypes React<\/h2>\n\n\n\n<p>En impl\u00e9mentant des <strong>PropTypes en React<\/strong>, vous renforcez la stabilit\u00e9 et la maintenabilit\u00e9 de votre application. Bien qu'ils ne soient pas obligatoires, les PropTypes peuvent alerter rapidement sur les mauvais usages de vos composants. Cela est particuli\u00e8rement utile sur de gros projets collaboratifs o\u00f9 la documentation claire des relations de donn\u00e9es est cruciale. Continuez \u00e0 d\u00e9couvrir plus sur React via des ressources en ligne et des formations sp\u00e9cialis\u00e9es pour perfectionner vos comp\u00e9tences. Vous pouvez \u00e9galement explorer notre <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\" target=\"_blank\" rel=\"noopener\">analyse du cycle de vie des applications React<\/a> ou notre section sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\" target=\"_blank\" rel=\"noopener\">les React Hooks<\/a> pour approfondir vos connaissances. <\/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 React Offre 50%\" title=\"\"><\/a>\n\n```","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html PropTypes React est essentiel pour s&rsquo;assurer que les composants re\u00e7oivent les donn\u00e9es qu&rsquo;ils attendent. Cette pratique am\u00e9liore non seulement la robustesse de votre application,&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3286,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6258","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\/6258","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=6258"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6258\/revisions"}],"predecessor-version":[{"id":6259,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6258\/revisions\/6259"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3286"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}