{"id":6057,"date":"2024-11-25T12:56:20","date_gmt":"2024-11-25T12:56:20","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/comprendre-react-fragments-utiliser\/"},"modified":"2024-11-25T12:56:24","modified_gmt":"2024-11-25T12:56:24","slug":"comprendre-react-fragments-utiliser","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/comprendre-react-fragments-utiliser\/","title":{"rendered":"10.1 Comprendre les React Fragments et les Utiliser"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>React Fragments<\/strong> jouent un r\u00f4le essentiel pour simplifier et moderniser le d\u00e9veloppement avec React. Apprendre \u00e0 utiliser et \u00e0 comprendre les <strong>React Fragments<\/strong> peut grandement am\u00e9liorer l&rsquo;organisation et la lisibilit\u00e9 de votre code sans encombrer le DOM avec des \u00e9l\u00e9ments superflus. Explorons leur fonctionnement avec des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>React Fragments<\/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\/706116066?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;\">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                    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();\n    }\n});\n<\/script>\n\n\n\n<p>Un fragment dans React est un moyen d&rsquo;englober plusieurs \u00e9l\u00e9ments sans ajouter de n\u0153ud suppl\u00e9mentaire au DOM. Cela r\u00e9sout notamment le probl\u00e8me o\u00f9 un composant React doit retourner plusieurs \u00e9l\u00e9ments. En utilisant les fragments, vous pouvez regrouper ces \u00e9l\u00e9ments de mani\u00e8re propre sans affecter la structure du DOM. Pour une introduction plus compl\u00e8te \u00e0 React, consultez notre article sur <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>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9ation de Fragments de Base en React<\/h3>\n\n\n\n<p>Pour commencer \u00e0 utiliser les fragments, React propose deux syntaxes principales : <code>React.Fragment<\/code> et la syntaxe abr\u00e9g\u00e9e <code>&lt;&gt;&lt;\/&gt;<\/code>. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\n\nfunction MyComponent() {\n  return (\n    <React.Fragment>\n      <h1>Salut, monde!<\/h1>\n      <p>Ceci est un exemple d'utilisation des fragments.<\/p>\n    <\/React.Fragment>\n  );\n}\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la Syntaxe Abr\u00e9g\u00e9e des Fragments<\/h3>\n\n\n\n<p>Pour simplifier encore plus, React permet l&rsquo;utilisation de la syntaxe abr\u00e9g\u00e9e pour les fragments, ce qui rend votre code bien plus \u00e9l\u00e9gant. Voici comment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\n\nfunction MyComponent() {\n  return (\n    <>\n      <h1>Bonjour, React !<\/h1>\n      <p>Les fragments simplifient notre structure.<\/p>\n    <\/>\n  );\n}\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Pourquoi Utiliser des Fragments ?<\/h3>\n\n\n\n<p>Les fragments sont utiles car ils permettent de r\u00e9duire la profondeur du DOM, ce qui peut am\u00e9liorer les performances et la manipulation du DOM. En outre, ils rendent le code plus propre en supprimant les \u00e9l\u00e9ments wrappers inutiles. Pour en savoir plus sur la gestion du DOM dans React, explorez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/differences-entre-props-et-state-react\" target=\"_blank\" rel=\"noopener\">les diff\u00e9rences entre props et state dans React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\n\nfunction ParentComponent() {\n  return (\n    <div>\n      <MyComponent \/>\n      <AnotherComponent \/>\n    <\/div>\n  );\n}\n\nfunction MyComponent() {\n  return (\n    <React.Fragment>\n      <h1>Hello!<\/h1>\n      <p>This is a component using a fragment.<\/p>\n    <\/React.Fragment>\n  );\n}\n\nfunction AnotherComponent() {\n  return (\n    <>\n      <h1>Another Title<\/h1>\n      <p>Another description.<\/p>\n    <\/>\n  );\n}\n\nexport default ParentComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Limitations des Fragments<\/h3>\n\n\n\n<p>Bien que les fragments soient puissants, ils pr\u00e9sentent certaines limitations, comme l&rsquo;impossibilit\u00e9 d&rsquo;attacher des attributs ou des cl\u00e9s directement \u00e0 un fragment dans certaines circonstances. Cela dit, React a introduit la possibilit\u00e9 d&rsquo;utiliser des fragments avec des cl\u00e9s depuis React 16.2. Pour une compr\u00e9hension approfondie de ces limitations, pensez \u00e0 lire sur <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\" target=\"_blank\" rel=\"noopener\">le cycle de vie des applications React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\n\nfunction ListComponent() {\n  return (\n    <>\n      {items.map(item => (\n        <React.Fragment key={item.id}>\n          <h1>{item.title}<\/h1>\n          <p>{item.description}<\/p>\n        <\/React.Fragment>\n      ))}\n    <\/>\n  );\n}\n\nexport default ListComponent;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>React Fragments<\/strong> sont un excellent outil pour organiser votre code sans encombrer le DOM. Ils permettent de cr\u00e9er des composants plus lisibles et performants en regroupant des \u00e9l\u00e9ments sans aucun impact sur la structure r\u00e9elle du DOM. Pour en savoir plus sur les fragments et d&rsquo;autres fonctionnalit\u00e9s avanc\u00e9es de React, consultez notre guide <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-react-fragments-utiliser\" target=\"_blank\" rel=\"noopener\">Comprendre et utiliser les React Fragments<\/a>. Continuez \u00e0 am\u00e9liorer vos comp\u00e9tences en JavaScript et React pour devenir un d\u00e9veloppeur front-end professionnel. Pour un apprentissage approfondi, d\u00e9couvrez notre cours complet intitul\u00e9 <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/ma\u00eetriser-react\/144\">\u00ab\u00a0Ma\u00eetriser React\u00a0\u00bb<\/a> et continuez \u00e0 explorer des concepts avanc\u00e9s comme <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-hoc-react-explications\" target=\"_blank\" rel=\"noopener\">les composants HOC dans 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-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Redux et React Offre 50%\" title=\"\"><\/a>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" 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=\"Apprenez Redux et React\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html React Fragments jouent un r\u00f4le essentiel pour simplifier et moderniser le d\u00e9veloppement avec React. Apprendre \u00e0 utiliser et \u00e0 comprendre les React Fragments peut&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3182,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6057","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\/6057","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=6057"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6057\/revisions"}],"predecessor-version":[{"id":6058,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6057\/revisions\/6058"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3182"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6057"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6057"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}