{"id":5904,"date":"2024-09-07T02:14:23","date_gmt":"2024-09-07T02:14:23","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/affectation-par-decomposition-javascript-react\/"},"modified":"2024-09-07T02:14:26","modified_gmt":"2024-09-07T02:14:26","slug":"affectation-par-decomposition-javascript-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/affectation-par-decomposition-javascript-react\/","title":{"rendered":"2.7 L&rsquo;affectation par D\u00e9composition en JavaScript pour React"},"content":{"rendered":"\n<p><strong>D\u00e9composition JavaScript React<\/strong> pour React est une technique \u00e9l\u00e9gante qui permet de simplifier et d&rsquo;am\u00e9liorer la lisibilit\u00e9 de votre code. Ma\u00eetriser l&rsquo;affectation par d\u00e9composition peut consid\u00e9rablement am\u00e9liorer votre productivit\u00e9 et la qualit\u00e9 de vos projets React. D\u00e9couvrons comment fonctionne cette technique et comment l&rsquo;utiliser avec des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>D\u00e9composition JavaScript 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\/706050823?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 JavaScript, l&rsquo;affectation par d\u00e9composition vous permet d&rsquo;extraire des donn\u00e9es de tableaux ou d&rsquo;objets en utilisant une syntaxe \u00e9l\u00e9gante et concise. Cela se traduit directement dans les applications React o\u00f9 la gestion de l&rsquo;\u00e9tat et des propri\u00e9t\u00e9s des composants est essentielle. Utiliser la d\u00e9composition permet de rendre le code plus lisible et de r\u00e9duire les erreurs potentielles.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9composition des Objets en JavaScript<\/h3>\n\n\n\n<p>La d\u00e9composition des objets vous permet d&rsquo;extraire des propri\u00e9t\u00e9s sp\u00e9cifiques depuis un objet et de les affecter \u00e0 des variables locales. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const user = {\n  name: \"John Doe\",\n  age: 28,\n  email: \"john.doe@example.com\",\n};\n\n\/\/ D\u00e9composition de l'objet user\nconst { name, age, email } = user;\n\nconsole.log(name);  \/\/ Output: \"John Doe\"\nconsole.log(age);   \/\/ Output: 28\nconsole.log(email); \/\/ Output: \"john.doe@example.com\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9composition des Tableaux en JavaScript<\/h3>\n\n\n\n<p>De la m\u00eame mani\u00e8re que pour les objets, les tableaux peuvent \u00eatre d\u00e9compos\u00e9s pour extraire des \u00e9l\u00e9ments sp\u00e9cifiques. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const numbers = [1, 2, 3, 4, 5];\n\n\/\/ D\u00e9composition du tableau numbers\nconst [first, second, ...rest] = numbers;\n\nconsole.log(first);  \/\/ Output: 1\nconsole.log(second); \/\/ Output: 2\nconsole.log(rest);   \/\/ Output: [3, 4, 5]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">L&rsquo;Affection par D\u00e9composition dans les Composants React<\/h3>\n\n\n\n<p>Dans React, la d\u00e9composition est fr\u00e9quemment utilis\u00e9e pour g\u00e9rer les props et l&rsquo;\u00e9tat des composants. Cela permet de simplifier le code et de se concentrer sur les variables essentielles. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from \"react\";\n\nfunction UserProfile({ name, age, email }) {\n  return (\n    <div>\n      <h2>{name}<\/h2>\n      <p>Age: {age}<\/p>\n      <p>Email: {email}<\/p>\n    <\/div>\n  );\n}\n\nexport default UserProfile;\n\n\/\/ Utilisation du composant UserProfile\n<UserProfile name=\"Jane Doe\" age={32} email=\"jane.doe@example.com\" \/>\n<\/code><\/pre>\n\n\n\n<p>Les props du composant <code>UserProfile<\/code> sont directement extraites et utilis\u00e9es dans la fonction de rendu, rendant le code plus lisible et facile \u00e0 g\u00e9rer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9composition des Etats avec les Hooks React<\/h3>\n\n\n\n<p>Les Hooks React, comme <code>useState<\/code> et <code>useEffect<\/code>, profitent \u00e9galement de la d\u00e9composition pour extraire et g\u00e9rer l&rsquo;\u00e9tat des composants de mani\u00e8re plus intuitive :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from \"react\";\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Count: {count}<\/p>\n      <button onClick={() => setCount(count + 1)}>Increment<\/button>\n    <\/div>\n  );\n}\n\nexport default Counter;\n<\/code><\/pre>\n\n\n\n<p>Ici, la d\u00e9composition permet de directement extraire <code>count<\/code> et <code>setCount<\/code> de l&rsquo;appel \u00e0 <code>useState<\/code>, simplifiant ainsi la gestion de l&rsquo;\u00e9tat du composant.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Intersection d&rsquo;Objets en React<\/h3>\n\n\n\n<p>Un autre usage courant de la d\u00e9composition en React est la fusion d&rsquo;objets pour g\u00e9rer les props par d\u00e9faut ou les mises \u00e0 jour d&rsquo;\u00e9tat complexes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const defaultSettings = {\n  theme: \"light\",\n  notifications: true,\n};\n\nconst userSettings = {\n  theme: \"dark\",\n};\n\n\/\/ Fusion des objets avec l'op\u00e9rateur de d\u00e9composition\nconst settings = { ...defaultSettings, ...userSettings };\n\nconsole.log(settings); \n\/\/ Output: { theme: \"dark\", notifications: true }\n<\/code><\/pre>\n\n\n\n<p>En fusionnant les objets, les props peuvent \u00eatre g\u00e9r\u00e9es plus efficacement, en particulier lorsque vous combinez des valeurs par d\u00e9faut avec des valeurs sp\u00e9cifiques fournies par l&rsquo;utilisateur.<\/p>\n\n\n<!-- Ajout de contenu additionnel pour atteindre 1200 mots avec des liens internes -->\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de D\u00e9composition JavaScript React<\/h3>\n\n\n\n<p>Pour mieux comprendre comment l&rsquo;affectation par d\u00e9composition peut \u00eatre utilis\u00e9e dans des contextes plus complexes, voyons quelques exemples avanc\u00e9s.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">D\u00e9composition avec des Objets Imbriqu\u00e9s<\/h4>\n\n\n\n<p>La gestion de l&rsquo;\u00e9tat dans des objets imbriqu\u00e9s peut devenir plus propre avec la d\u00e9composition :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const userProfile = {\n  name: \"Alice\",\n  address: {\n    street: \"123 Main St\",\n    city: \"Wonderland\",\n  },\n};\n\n\/\/ D\u00e9composition de l'objet imbriqu\u00e9\nconst { name, address: { street, city } } = userProfile;\n\nconsole.log(name);    \/\/ Output: \"Alice\"\nconsole.log(street);  \/\/ Output: \"123 Main St\"\nconsole.log(city);    \/\/ Output: \"Wonderland\"\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Passer des Props \u00e0 des Composants Enfants<\/h4>\n\n\n\n<p>La d\u00e9composition facilite \u00e9galement la transmission des props aux composants enfants, en optimisant la r\u00e9utilisation des donn\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\n\nfunction ParentComponent() {\n  const user = {\n    name: \"Bob\",\n    age: 40,\n    email: \"bob@example.com\",\n  };\n\n  return <ChildComponent {...user} \/>;\n}\n\nfunction ChildComponent({ name, age, email }) {\n  return (\n    <div>\n      <h1>{name}<\/h1>\n      <p>Age: {age}<\/p>\n      <p>Email: {email}<\/p>\n    <\/div>\n  );\n}\n\nexport default ParentComponent;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation d&rsquo;Objets D\u00e9compos\u00e9s avec useState<\/h4>\n\n\n\n<p>Les objets d\u00e9compos\u00e9s peuvent \u00eatre manipul\u00e9s facilement lors de la gestion de l&rsquo;\u00e9tat avec <code>useState<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction ProfileEditor() {\n  const [profile, setProfile] = useState({\n    name: 'Charlie',\n    age: 25,\n    email: 'charlie@example.com',\n  });\n\n  const updateName = (newName) => {\n    setProfile({ ...profile, name: newName });\n  };\n\n  return (\n    <div>\n      <input\n        type=\"text\"\n        value={profile.name}\n        onChange={(e) => updateName(e.target.value)}\n      \/>\n      <p>Name: {profile.name}<\/p>\n    <\/div>\n  );\n}\n\nexport default ProfileEditor;\n<\/code><\/pre>\n\n\n\n<p>En poursuivant votre exploration de JavaScript et React, vous pouvez \u00e9galement consulter des ressources externes pour \u00e9largir votre compr\u00e9hension. Par exemple, le <a href=\"https:\/\/reactjs.org\/docs\/hooks-intro.html\" target=\"_blank\" rel=\"noopener\">site officiel de React<\/a> propose des articles d\u00e9taill\u00e9s sur la programmation avec les Hooks, et le <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\" target=\"_blank\" rel=\"noopener\">site MDN Web Docs<\/a> offre une couverture exhaustive de l&rsquo;affectation par d\u00e9composition. Vous pouvez \u00e9galement suivre des cours en ligne comme ceux de <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noopener\">Udemy<\/a> pour un apprentissage structur\u00e9.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p><strong>D\u00e9composition JavaScript React<\/strong> est une technique puissante qui simplifie le code et am\u00e9liore la gestion des donn\u00e9es dans les applications React. En utilisant la d\u00e9composition, vous pouvez rendre vos composants plus lisibles et r\u00e9utilisables, ce qui rend le d\u00e9veloppement plus efficace et agr\u00e9able. Continuez \u00e0 explorer React pour ma\u00eetriser les nombreuses possibilit\u00e9s qu&rsquo;offre l&rsquo;affectation par d\u00e9composition et autres fonctionnalit\u00e9s avanc\u00e9es. Pour plus de tutoriels sur React, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\">qu&rsquo;est-ce que React: introduction et avantages<\/a>, ou d\u00e9couvrez le comparatif <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\">single-page vs multi-page React<\/a>. Pour aller plus loin, apprenez \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">cr\u00e9er votre premi\u00e8re application React<\/a> ou explorez <a href=\"https:\/\/wikiform.fr\/codespace\/maitriser-objets-javascript-developper-react\">comment ma\u00eetriser les objets JavaScript pour d\u00e9velopper avec React<\/a>. Enfin, d\u00e9couvrez les <a href=\"https:\/\/wikiform.fr\/codespace\/meilleurs-logiciels-developper-react\">meilleurs logiciels pour d\u00e9velopper avec 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 src=\"https","protected":false},"excerpt":{"rendered":"<p>D\u00e9composition JavaScript React pour React est une technique \u00e9l\u00e9gante qui permet de simplifier et d&rsquo;am\u00e9liorer la lisibilit\u00e9 de votre code. Ma\u00eetriser l&rsquo;affectation par d\u00e9composition peut&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3151,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5904","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\/5904","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=5904"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5904\/revisions"}],"predecessor-version":[{"id":5905,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5904\/revisions\/5905"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3151"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}