{"id":5920,"date":"2024-09-10T10:14:15","date_gmt":"2024-09-10T10:14:15","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utiliser-javascript-dans-jsx-react\/"},"modified":"2024-09-10T10:14:19","modified_gmt":"2024-09-10T10:14:19","slug":"utiliser-javascript-dans-jsx-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utiliser-javascript-dans-jsx-react\/","title":{"rendered":"3.5 Utiliser du JavaScript dans du JSX avec React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>JavaScript JSX React<\/strong> permet de cr\u00e9er des interfaces utilisateur plus dynamiques et interactives. Comprendre comment int\u00e9grer du JavaScript dans le JSX de React peut consid\u00e9rablement am\u00e9liorer le d\u00e9veloppement de vos applications web. Apprenons comment cela fonctionne et comment l&rsquo;impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>Utiliser du JavaScript dans du JSX avec 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\/706056143?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 ? priceElement.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>Le JSX (JavaScript XML) est une extension de la syntaxe JavaScript qui permet de d\u00e9crire \u00e0 quoi ressemble l&rsquo;interface utilisateur de notre application React. Ce qui est g\u00e9nial avec JSX, c&rsquo;est que vous pouvez utiliser du code JavaScript directement dans votre code JSX. Pour en savoir plus, consultez notre article sur les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">avantages de React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9grer du JavaScript dans JSX<\/h3>\n\n\n\n<p>Vous pouvez int\u00e9grer des expressions JavaScript dans le JSX en les entourant d&rsquo;accolades <code>{}<\/code>. Cela signifie que tout ce qui se trouve \u00e0 l&rsquo;int\u00e9rieur des accolades sera \u00e9valu\u00e9 comme du code JavaScript.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>const name = 'John Doe';\nconst element = <h1>Hello, {name}<\/h1>;\n\nReactDOM.render(\n  element,\n  document.getElementById('root')\n);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des Fonctions JavaScript dans JSX<\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement appeler des fonctions JavaScript dans du JSX. C&rsquo;est particuli\u00e8rement utile pour le rendu conditionnel ou pour formater des donn\u00e9es avant de les afficher. Pour plus de d\u00e9tails, voyez notre tutoriel sur <a href=\"https:\/\/wikiform.fr\/codespace\/a-la-decouverte-des-props-react-guide\" target=\"_blank\" rel=\"noopener\">les props et le rendu conditionnel dans React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>function formatName(user) {\n    return user.firstName + ' ' + user.lastName;\n}\n\nconst user = {\n    firstName: 'Harper',\n    lastName: 'Perez'\n};\n\nconst element = (\n    <h1>\n        Hello, {formatName(user)}!\n    <\/h1>\n);\n\nReactDOM.render(\n  element,\n  document.getElementById('root')\n);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Op\u00e9rations Math\u00e9matiques et Logiques dans JSX<\/h3>\n\n\n\n<p>Vous pouvez aussi utiliser des op\u00e9rations math\u00e9matiques et logiques directement dans le JSX. Cela inclut les op\u00e9rateurs de comparaison, les op\u00e9rateurs arithm\u00e9tiques, les op\u00e9rateurs ternaires, etc. D\u00e9couvrez \u00e9galement comment cela peut \u00eatre utilis\u00e9 avec les <a href=\"https:\/\/wikiform.fr\/codespace\/composants-statefull-vs-stateless-react\" target=\"_blank\" rel=\"noopener\">composants Statefull et Stateless<\/a> dans React.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>const count = 10;\nconst element = (\n    <div>\n        <p>{count} est {count % 2 === 0 ? 'pair' : 'impair'}.<\/p>\n        <p>Le double de {count} est {count * 2}.<\/p>\n    <\/div>\n);\n\nReactDOM.render(\n  element,\n  document.getElementById('root')\n);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Rendu Conditionnel<\/h3>\n\n\n\n<p>Le rendu conditionnel est une technique permettant de rendre un composant ou un \u00e9l\u00e9ment en fonction d&rsquo;une condition. En React, vous pouvez utiliser plusieurs approches pour le rendu conditionnel, telles que les op\u00e9rateurs ternaires, les expressions logiques ET (&#038;&#038;) ou l&rsquo;utilisation de fonctions de rendu conditionnel. Pour approfondir, consultez notre guide sur les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\" target=\"_blank\" rel=\"noopener\">React Hooks<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>const isLoggedIn = true;\n\nconst element = (\n  <div>\n    {isLoggedIn ? (\n      <h1>Bienvenue!<\/h1>\n    ) : (\n      <h1>Veuillez vous connecter.<\/h1>\n    )}\n  <\/div>\n);\n\nReactDOM.render(\n  element,\n  document.getElementById('root')\n);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Boucles et It\u00e9rations<\/h3>\n\n\n\n<p>Bien que vous ne puissiez pas directement utiliser des boucles <code>for<\/code> ou <code>while<\/code> dans le JSX, vous pouvez utiliser des m\u00e9thodes telles que <code>map<\/code> pour it\u00e9rer sur des listes et g\u00e9n\u00e9rer des \u00e9l\u00e9ments dynamiquement. Apprenez \u00e9galement comment g\u00e9rer des projets complexes avec notre guide sur le <a href=\"https:\/\/wikiform.fr\/codespace\/projet-blog-react-plan-prochaines-sections\" target=\"_blank\" rel=\"noopener\">projet Blog avec React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>const numbers = [1, 2, 3, 4, 5];\n\nconst listItems = numbers.map((number) =>\n  <li key={number}>{number}<\/li>\n);\n\nconst element = (\n  <ul>{listItems}<\/ul>\n);\n\nReactDOM.render(\n  element,\n  document.getElementById('root')\n);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Interpolation de Cha\u00eenes de Caract\u00e8res<\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement utiliser des accolades pour int\u00e9grer des expressions JavaScript qui retournent des cha\u00eenes de caract\u00e8res, permettant ainsi une interpolation dynamique des cha\u00eenes. Pour en savoir plus sur l&rsquo;utilisation des cha\u00eenes en React, consultez notre guide sur la <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-javascript-dans-jsx-react\" target=\"_blank\" rel=\"noopener\">manipulation de cha\u00eenes dans JSX<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>const user = {\n  name: 'Chris',\n  age: 25\n};\n\nconst element = (\n  <p>{`Nom: ${user.name}, \u00c2ge: ${user.age}`}<\/p>\n);\n\nReactDOM.render(\n  element,\n  document.getElementById('root')\n);\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur l&rsquo;utilisation de JavaScript dans JSX avec React<\/h2>\n\n\n\n<p>Utiliser du JavaScript dans du JSX avec React est une technique puissante pour rendre votre code plus expressif et dynamique. En int\u00e9grant des expressions JavaScript, des fonctions, des op\u00e9rations logiques et des boucles, vous pouvez cr\u00e9er des interfaces utilisateur r\u00e9actives et interactives. Continuez \u00e0 explorer React pour tirer parti de toute sa puissance et am\u00e9liorez vos comp\u00e9tences en d\u00e9veloppement web. Pour des tutoriels plus avanc\u00e9s sur React, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/cr\u00e9er-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">tutoriel sur la cr\u00e9ation d&rsquo;une premi\u00e8re application React<\/a> et notre <a href=\"https:\/\/wikiform.fr\/codespace\/prets-a-decouvrir-react-guide-introduction\" target=\"_blank\" rel=\"noopener\">guide d&rsquo;introduction<\/a>.<\/p>\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<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 JavaScript JSX React permet de cr\u00e9er des interfaces utilisateur plus dynamiques et interactives. Comprendre comment int\u00e9grer du JavaScript dans le JSX de React peut&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3281,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5920","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\/5920","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=5920"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5920\/revisions"}],"predecessor-version":[{"id":5921,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5920\/revisions\/5921"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3281"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}