{"id":5902,"date":"2024-09-06T16:14:09","date_gmt":"2024-09-06T16:14:09","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/importer-exporter-modules-javascript-react\/"},"modified":"2024-09-06T16:14:13","modified_gmt":"2024-09-06T16:14:13","slug":"importer-exporter-modules-javascript-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/importer-exporter-modules-javascript-react\/","title":{"rendered":"2.6 Importer et Exporter des Modules en JavaScript pour React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Importer et Exporter des Modules en JavaScript pour React<\/strong> est une comp\u00e9tence essentielle pour structurer et organiser le code de vos applications React. En ma\u00eetrisant ces concepts, vous pouvez am\u00e9liorer la r\u00e9utilisabilit\u00e9, la maintenabilit\u00e9 et la clart\u00e9 de votre code. Apprenons comment importer et exporter des modules en JavaScript avec des exemples concrets et pertinents.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Import et l&rsquo;Export des Modules en JavaScript<\/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\/706050569?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, et particuli\u00e8rement en React, les modules permettent de diviser votre code en fichiers et fonctions plus petits et plus g\u00e9rables. Cela facilite la maintenance et augmente la r\u00e9utilisabilit\u00e9. Nous allons commencer par les bases de l&rsquo;import et de l&rsquo;export en JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Qu&rsquo;est-ce qu&rsquo;un Module en JavaScript ?<\/h3>\n\n\n\n<p>Un module est simplement un fichier qui encapsule certaines fonctionnalit\u00e9s. Vous pouvez d\u00e9finir des fonctions, des classes, des constantes et d&rsquo;autres variables dans un module, puis les exporter d&rsquo;un fichier pour les importer dans un autre fichier.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ greetings.js\nexport const sayHello = (name) => {\n  return `Hello, ${name}!`;\n};\n\nexport const sayGoodbye = (name) => {\n  return `Goodbye, ${name}!`;\n};\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exporter des Fonctions avec Export Nominal<\/h3>\n\n\n\n<p>Avec l&rsquo;export nominal, vous pouvez exporter plusieurs fonctions, classes ou variables depuis un module en utilisant le mot-cl\u00e9 <code>export<\/code>. Voici un exemple pour illustrer :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ mathFunctions.js\nexport const add = (a, b) => a + b;\nexport const subtract = (a, b) => a - b;\nexport const multiply = (a, b) => a * b;\nexport const divide = (a, b) => a \/ b;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Importer des Fonctions avec Import Nominal<\/h3>\n\n\n\n<p>Une fois que vous avez export\u00e9 quelque chose d&rsquo;un module, vous pouvez l&rsquo;importer dans un autre fichier en utilisant le mot-cl\u00e9 <code>import<\/code>. Voici comment importer et utiliser les fonctions export\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ app.js\nimport { add, subtract, multiply, divide } from '.\/mathFunctions';\n\nconsole.log(add(2, 3)); \/\/ 5\nconsole.log(subtract(5, 2)); \/\/ 3\nconsole.log(multiply(4, 2)); \/\/ 8\nconsole.log(divide(8, 2)); \/\/ 4\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exporter une Fonction par D\u00e9faut<\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement exporter une valeur par d\u00e9faut d&rsquo;un module. Cela permet d&rsquo;importer cette valeur sans utiliser les accolades. Utilisez le mot-cl\u00e9 <code>default<\/code> pour d\u00e9finir une exportation par d\u00e9faut :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ greet.js\nconst greet = (name) => {\n  return `Welcome, ${name}!`;\n};\n\nexport default greet;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Importer une Fonction par D\u00e9faut<\/h3>\n\n\n\n<p>Pour importer une exportation par d\u00e9faut, vous n&rsquo;avez pas besoin d&rsquo;utiliser des accolades. Voici comment vous proc\u00e9deriez :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ app.js\nimport greet from '.\/greet';\n\nconsole.log(greet('John')); \/\/ Welcome, John!\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner Exportations et Importations<\/h3>\n\n\n\n<p>Vous pouvez combiner les exportations et les importations dans une m\u00eame ligne pour une organisation plus optimis\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ combined.js\nexport const foo = () => \"foo\";\nexport const bar = () => \"bar\";\n\nconst defaultFunc = () => \"default function\";\nexport default defaultFunc;\n<\/code><\/pre>\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ app.js\nimport defaultFunc, { foo, bar } from '.\/combined';\n\nconsole.log(foo()); \/\/ foo\nconsole.log(bar()); \/\/ bar\nconsole.log(defaultFunc()); \/\/ default function\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Importations Dynamiques<\/h3>\n\n\n\n<p>Il est \u00e9galement possible d&rsquo;importer des modules dynamiquement en utilisant la syntaxe <code>import()<\/code>. Cela peut \u00eatre b\u00e9n\u00e9fique pour le chargement paresseux (lazy loading) des modules :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ app.js\nconst loadModule = async () => {\n  const { default: greet } = await import('.\/greet');\n  console.log(greet('Jane')); \/\/ Welcome, Jane!\n};\n\nloadModule();\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>En conclusion, comprendre comment <strong>importer et exporter des modules en JavaScript pour React<\/strong> est crucial pour structurer efficacement vos applications React. Ces techniques vous permettent de cr\u00e9er des applications modulaires, maintenables et r\u00e9utilisables. Continuez \u00e0 explorer et \u00e0 exp\u00e9rimenter pour tirer le meilleur parti des modules JavaScript dans vos projets React.<\/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-50.gif\" loading=\"lazy\" alt=\"Learnify Formation React Offre 50%\" title=\"\"><\/a>\n\n\n\n<p>En exploitant les modules, vous d\u00e9composez vos fonctionnalit\u00e9s en petites parties r\u00e9utilisables, facilitant ainsi la gestion et l&rsquo;extension de votre application gr\u00e2ce \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener noreferrer\">React<\/a>. Cette approche modulaire n&rsquo;est pas seulement applicable aux fonctions mais \u00e9galement aux composants, comme discut\u00e9 dans l&rsquo;article sur la <a href=\"https:\/\/wikiform.fr\/codespace\/comment-ajouter-nouveau-composant-react\" target=\"_blank\" rel=\"noopener noreferrer\">cr\u00e9ation de composants React<\/a>. L&rsquo;importation et l&rsquo;exportation de modules am\u00e9liorent \u00e9galement la collaboration sur des projets complexes en offrant une vue claire et structur\u00e9e du code.<\/p>\n\n\n\n<p>Pour aller plus loin, vous pouvez explorer comment utiliser les <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\" target=\"_blank\" rel=\"noopener noreferrer\">extensions indispensables<\/a> pour d\u00e9velopper avec React et JavaScript. Vous y d\u00e9couvrirez des outils qui optimiseront votre flux de travail. En outre, la compr\u00e9hension de concepts comme le <a href=\"https:\/\/wikiform.fr\/codespace\/affectation-par-decomposition-javascript-react\" target=\"_blank\" rel=\"noopener noreferrer\">destructuring<\/a> et les <a href=\"https:\/\/wikiform.fr\/codespace\/conditions-ternaires-afficher-contenu-react\" target=\"_blank\" rel=\"noopener noreferrer\">conditions ternaires<\/a> peut grandement simplifier la mani\u00e8re dont vous structurez et manipulez votre code React.<\/p>\n\n\n\n<p>L&rsquo;approfondissement de ces techniques sont des \u00e9tapes importantes vers la ma\u00eetrise de la <a href=\"https:\/\/wikiform.fr\/codespace\/nouveautes-javascript-savoir-react\" target=\"_blank\" rel=\"noopener noreferrer\">programmation moderne en JavaScript<\/a> et la cr\u00e9ation d&rsquo;applications interactives. La cl\u00e9 r\u00e9side dans la pratique et l&rsquo;application des connaissances \u00e0 des projets r\u00e9els, des <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\" target=\"_blank\" rel=\"noopener noreferrer\">React Hooks<\/a> aux nouvelles fonctionnalit\u00e9s ECMAScript.<\/p>\n\n\n\n<p>Enfin, une fois que vous avez acquis des comp\u00e9tences solides en mati\u00e8re de modules et de composants, vous pouvez envisager des projets plus ambitieux. D\u00e9couvrez par exemple comment int\u00e9grer <a href=\"https:\/\/wikiform.fr\/codespace\/firebase-axios-react-plan\" target=\"_blank\" rel=\"noopener noreferrer\">Firebase et Axios<\/a> dans vos applications pour renforcer leur robustesse et leur efficacit\u00e9.<\/p>\n\n\n\n<p>Pour ceux qui souhaitent approfondir leurs connaissances sur la transition fluide des modules vers l&rsquo;utilisation de State et de Props, la <a href=\"https:\/\/wikiform.fr\/codespace\/a-la-decouverte-des-props-react-guide\" target=\"_blank\" rel=\"noopener noreferrer\">gestion des props<\/a> en React est une suite logique. La compr\u00e9hension du lifecycle des composants, de la gestion des \u00e9v\u00e9nements et de l&rsquo;optimisation des rendus sont des comp\u00e9tences suppl\u00e9mentaires qui enrichiront vos projets.<\/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\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Importer et Exporter des Modules en JavaScript pour React est une comp\u00e9tence essentielle pour structurer et organiser le code de vos applications React. En&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3216,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5902","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\/5902","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=5902"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5902\/revisions"}],"predecessor-version":[{"id":5903,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5902\/revisions\/5903"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3216"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}