{"id":5996,"date":"2024-10-14T09:25:07","date_gmt":"2024-10-14T09:25:07","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/lister-dynamiquement-composants-react\/"},"modified":"2024-10-14T09:25:12","modified_gmt":"2024-10-14T09:25:12","slug":"lister-dynamiquement-composants-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/lister-dynamiquement-composants-react\/","title":{"rendered":"8.3 Lister Dynamiquement des Composants en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Lister Composants Dynamiques React<\/strong> est une technique puissante qui permet de cr\u00e9er des interfaces utilisateur interactives et modulaires. Ma\u00eetriser cette comp\u00e9tence peut transformer la fa\u00e7on dont vous d\u00e9veloppez des applications en React. Apprenons comment proc\u00e9der avec des exemples concrets et du code pratique.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Liste Dynamique de Composants 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\/706095776?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>Dans React, lister dynamiquement des composants permet de g\u00e9n\u00e9rer et rendre des listes de composants sur la base de donn\u00e9es pouvant varier. Cela se fait g\u00e9n\u00e9ralement en utilisant la m\u00e9thode <code>map()<\/code> pour transformer un tableau de donn\u00e9es en une s\u00e9rie de composants React. D\u00e9montrons cela avec un exemple simple. D\u00e9couvrez \u00e9galement les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">avantages de React<\/a> et comment il se distingue des autres frameworks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er et Rendre une Liste Dynamique de Composants<\/h3>\n\n\n\n<p>Pour d\u00e9buter, nous allons cr\u00e9er un tableau d&rsquo;\u00e9l\u00e9ments que nous souhaitons afficher dynamiquement. Puis, nous utiliserons la m\u00e9thode <code>map()<\/code> pour rendre chaque \u00e9l\u00e9ment de ce tableau sous forme de composant React. Consid\u00e9rons cet exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\n\nconst ItemList = () => {\n    const items = ['Pomme', 'Banane', 'Orange'];\n\n    return (\n        <ul>\n            {items.map((item, index) => (\n                <li key={index}>{item}<\/li>\n            ))}\n        <\/ul>\n    );\n};\n\nexport default ItemList;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Rendre une Liste d&rsquo;Objets Complexes<\/h3>\n\n\n\n<p>Pour illustrer le rendu de listes \u00e0 partir de donn\u00e9es plus complexes, prenons un tableau d&rsquo;objets. Chaque objet contiendra plusieurs propri\u00e9t\u00e9s que nous voulons rendre de mani\u00e8re dynamique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\n\nconst UserList = () => {\n    const users = [\n        { id: 1, name: 'Alice', age: 25 },\n        { id: 2, name: 'Bob', age: 30 },\n        { id: 3, name: 'Charlie', age: 35 }\n    ];\n\n    return (\n        <table>\n            <thead>\n                <tr>\n                    <th>Nom<\/th>\n                    <th>\u00c2ge<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody>\n                {users.map(user => (\n                    <tr key={user.id}>\n                        <td>{user.name}<\/td>\n                        <td>{user.age}<\/td>\n                    <\/tr>\n                ))}\n            <\/tbody>\n        <\/table>\n    );\n};\n\nexport default UserList;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Fragments pour Le Rendu de Composants<\/h3>\n\n\n\n<p>Lors du rendu de listes de composants enfants, il est parfois n\u00e9cessaire de les regrouper sans ajouter de n\u0153ud DOM. Pour ce faire, React propose les Fragments. Si vous \u00eates curieux d&rsquo;en savoir plus, explorez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-react-fragments-utiliser\" target=\"_blank\" rel=\"noopener\">l&rsquo;utilisation des Fragments en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\n\nconst ListWithFragments = () => {\n    const fruits = ['Pommes', 'Bananes', 'Oranges'];\n\n    return (\n        <>\n            {fruits.map((fruit, index) => (\n                <React.Fragment key={index}>\n                    <h4>Fruit:<\/h4>\n                    <p>{fruit}<\/p>\n                <\/React.Fragment>\n            ))}\n        <\/>\n    );\n};\n\nexport default ListWithFragments;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La capacit\u00e9 de <strong>Lister Composants Dynamiques React<\/strong> offre une flexibilit\u00e9 incroyable dans le d\u00e9veloppement d&rsquo;interfaces utilisateur. En comprenant comment transformer des ensembles de donn\u00e9es en composants React dynamiques, vous pouvez cr\u00e9er des applications plus modulaires et r\u00e9actives. Continuez \u00e0 explorer React avec des ressources comme le <a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"noopener\">Site Officiel de la Documentation React<\/a> et des formations pratiques pour ma\u00eetriser le d\u00e9veloppement de vos applications. Pour en savoir plus sur la gestion d&rsquo;\u00e9v\u00e9nements en React, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/changer-state-avec-evenements-react\" target=\"_blank\" rel=\"noopener\">comment changer l&rsquo;\u00e9tat avec des \u00e9v\u00e9nements en React<\/a>.<\/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-REACT-offre.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`\n\nHere is your enhanced article with integrated SEO improvements like additional internal links, keyword optimization, and external links. The article now provides a detailed exploration of how to dynamically list components in React, while also encouraging readers to explore further resources and training in a natural, SEO-friendly manner.","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Lister Composants Dynamiques React est une technique puissante qui permet de cr\u00e9er des interfaces utilisateur interactives et modulaires. Ma\u00eetriser cette comp\u00e9tence peut transformer la&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3221,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5996","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\/5996","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=5996"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5996\/revisions"}],"predecessor-version":[{"id":5997,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5996\/revisions\/5997"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3221"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}