{"id":6200,"date":"2025-10-27T12:55:38","date_gmt":"2025-10-27T12:55:38","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/lister-seul-article-react-guide\/"},"modified":"2026-03-05T15:41:49","modified_gmt":"2026-03-05T15:41:49","slug":"lister-seul-article-react-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/lister-seul-article-react-guide\/","title":{"rendered":"16.9 Lister un Seul Article en React : Guide"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Lister Article React<\/strong> est une technique extr\u00eamement puissante pour construire des interfaces utilisateur modulaires et maintenables. En apprenant \u00e0 lister des articles et \u00e0 manipuler des composants avec une seule propri\u00e9t\u00e9, vous pourrez concevoir des applications React plus propres et plus efficaces. Dans cet article, nous allons explorer comment structurer et impl\u00e9menter ces composants gr\u00e2ce \u00e0 des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Cr\u00e9ation de Composants avec Une Propri\u00e9t\u00e9 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\/706143021?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>En React, un composant est une fonction ou une classe qui accepte une entr\u00e9e (des <strong>props<\/strong>) et renvoie une repr\u00e9sentation React des \u00e9l\u00e9ments de l&rsquo;interface utilisateur. Lorsqu&rsquo;un composant ne prend qu&rsquo;une seule propri\u00e9t\u00e9, cela simplifie la logique interne et facilite son int\u00e9gration dans diff\u00e9rents contextes. Pour une meilleure compr\u00e9hension de <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\">comment les composants s&rsquo;ins\u00e8rent dans le cycle de vie React<\/a>, consultez notre guide d\u00e9taill\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple de Composant \u00e0 Propri\u00e9t\u00e9 Unique<\/h3>\n\n\n\n<p>Commen\u00e7ons avec un exemple simple : un composant Button qui accepte une seule propri\u00e9t\u00e9 <code>label<\/code> pour d\u00e9finir son texte. Voici comment structurer ce composant. Pour comparer les <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\">diff\u00e9rences entre composants par classe et fonction<\/a>, consultez notre article d\u00e9di\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\n\nfunction Button({ label }) {\n  return <button>{label}<\/button>;\n}\n\nexport default Button;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9gration dans Une Application React<\/h3>\n\n\n\n<p>Pour utiliser ce composant dans une application React, vous pouvez l&rsquo;importer et le rendre en lui passant la propri\u00e9t\u00e9 <code>label<\/code>. Voici un exemple d&rsquo;int\u00e9gration dans une application plus large. Vous pouvez aussi voir <a href=\"https:\/\/wikiform.fr\/codespace\/integrer-composant-react-guide\">comment int\u00e9grer des composants dans React<\/a> :<\/p>\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Button from '.\/Button';\n\nfunction App() {\n  return (\n    <div>\n      <h1>Bienvenue dans Notre Application<\/h1>\n      <Button label=\"Cliquez-moi\" \/>\n    <\/div>\n  );\n}\n\nReactDOM.render(<App \/>, document.getElementById('root'));\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Avantages des Composants \u00e0 Propri\u00e9t\u00e9 Unique<\/h3>\n\n\n\n<p>En limitant le nombre de propri\u00e9t\u00e9s qu&rsquo;un composant accepte, vous obtenez plusieurs avantages :<\/p>\n<ul>\n  <li><strong>Clart\u00e9 :<\/strong> Le composant a une interface plus simple, facilitant sa compr\u00e9hension et son utilisation.<\/li>\n  <li><strong>R\u00e9utilisabilit\u00e9 :<\/strong> Ces composants sont plus faciles \u00e0 r\u00e9utiliser dans diff\u00e9rentes parties de votre application car leur comportement est pr\u00e9visible.<\/li>\n  <li><strong>Testabilit\u00e9 :<\/strong> Moins de propri\u00e9t\u00e9s signifie moins de combinaisons \u00e0 tester, ce qui conduit \u00e0 des tests plus rapides et plus pr\u00e9cis.<\/li>\n<\/ul>\n<p>Pour en savoir plus sur la <a href=\"https:\/\/wikiform.fr\/codespace\/avantages-du-react-pour-une-construction-efficace\">r\u00e9utilisabilit\u00e9 dans React<\/a>, consultez nos articles sp\u00e9cialis\u00e9s.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tendre les Fonctionnalit\u00e9s avec des Hooks<\/h3>\n\n\n\n<p>Pour enrichir le comportement du composant, vous pouvez utiliser les hooks de React, tels que <code>useState<\/code> et <code>useEffect<\/code>. Voici comment int\u00e9grer un \u00e9tat local dans notre composant Button. D\u00e9couvrez aussi <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-state-avec-react-hooks-guide\">comment l&rsquo;\u00e9tat est g\u00e9r\u00e9 avec les hooks<\/a> dans nos tutoriaux :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction Button({ label }) {\n  const [count, setCount] = useState(0);\n\n  return (\n    <button onClick={() => setCount(count + 1)}>\n      {label} (Vous avez cliqu\u00e9 {count} fois)\n    <\/button>\n  );\n}\n\nexport default Button;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La cr\u00e9ation de <strong>composants avec une seule propri\u00e9t\u00e9<\/strong> est une m\u00e9thode efficace pour construire des interfaces React simples et robustes. En r\u00e9duisant le nombre d&rsquo;entr\u00e9es \u00e0 g\u00e9rer, vous facilitez la maintenance et am\u00e9liorez la clart\u00e9 de votre code. Pour aller plus loin, envisagez d&rsquo;explorer des ressources suppl\u00e9mentaires comme les cours sur <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noopener\">Udemy<\/a> ou les documentations officielles de <a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noopener\">React<\/a>. Ces composants peuvent \u00eatre int\u00e9gr\u00e9s dans des projets plus complexes pour offrir une exp\u00e9rience utilisateur coh\u00e9rente et fluide. Pour davantage de conseils sur <a href=\"https:\/\/wikiform.fr\/codespace\/lister-seul-article-react-guide\/\">comment lister un article dans React<\/a>, n\u2019h\u00e9sitez pas \u00e0 explorer nos autres ressources.<\/p>\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 et Redux\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Lister Article React est une technique extr\u00eamement puissante pour construire des interfaces utilisateur modulaires et maintenables. En apprenant \u00e0 lister des articles et \u00e0&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3222,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6200","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\/6200","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=6200"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6200\/revisions"}],"predecessor-version":[{"id":6247,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6200\/revisions\/6247"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3222"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}