{"id":5994,"date":"2024-10-13T09:24:09","date_gmt":"2024-10-13T09:24:09","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/conditions-if-else-afficher-contenu-react\/"},"modified":"2024-10-13T09:24:14","modified_gmt":"2024-10-13T09:24:14","slug":"conditions-if-else-afficher-contenu-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/conditions-if-else-afficher-contenu-react\/","title":{"rendered":"8.2 Conditions if else pour Afficher du Contenu en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Conditions if else Contenu React<\/strong> jouent un r\u00f4le fondamental dans la gestion de l&rsquo;affichage conditionnel des composants et du contenu. Comprendre comment les utiliser efficacement peut consid\u00e9rablement am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur de vos applications React en rendant les interfaces plus dynamiques et interactives. Explorons ensemble comment les conditions if else fonctionnent en React et comment les impl\u00e9menter \u00e0 travers des exemples pratiques de code. D\u00e9couvrez \u00e9galement comment <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\">les diff\u00e9rences entre Single Page et Multi Page<\/a> influent sur l&rsquo;utilisation des conditions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Conditions if else Contenu 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\/706095626?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<div>\n  <p>Dans React, l&rsquo;affichage conditionnel est souvent utilis\u00e9 pour afficher ou masquer certains composants en fonction de l&rsquo;\u00e9tat de l&rsquo;application ou des propri\u00e9t\u00e9s pass\u00e9es aux composants. Cela permet de rendre l&rsquo;interface utilisateur plus r\u00e9active aux actions de l&rsquo;utilisateur. Pour aller plus loin, vous pouvez consulter notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/conditions-if-else-afficher-contenu-react\">l&rsquo;utilisation optimale des conditions<\/a> dans l&rsquo;affichage React.<\/p>\n<\/div>\n\n\n\n<p>Une condition if est utilis\u00e9e pour ex\u00e9cuter une action uniquement si une condition sp\u00e9cifi\u00e9e est vraie. La fonction else suit if et ex\u00e9cute une autre action si la condition est fausse. Voyons comment cela peut \u00eatre appliqu\u00e9 dans le contexte de React.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation basique des conditions <strong>if else<\/strong> en React<\/h3>\n\n\n\n<p>Commen\u00e7ons par un exemple simple o\u00f9 nous affichons un message de bienvenue si l&rsquo;utilisateur est connect\u00e9, et un autre message demandant \u00e0 l&rsquo;utilisateur de se connecter s&rsquo;il ne l&rsquo;est pas. Pour approfondir la gestion des utilisateurs, explorez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">la cr\u00e9ation d&rsquo;une premi\u00e8re application React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\n\nfunction Greeting({ isLoggedIn }) {\n  if (isLoggedIn) {\n    return <h1>Bienvenue !<\/h1>;\n  } else {\n    return <h1>Veuillez vous connecter<\/h1>;\n  }\n}\n\nexport default Greeting;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Afficher des Composants avec les Conditions <strong>ternaires<\/strong> en React<\/h3>\n\n\n\n<p>Outre l&rsquo;utilisation traditionnelle des if else, React permet \u00e9galement d&rsquo;utiliser des expressions ternaires pour rendre le code plus concis, en particulier lorsqu&rsquo;une seule expression est conditionnellement rendue. D\u00e9couvrez comment les expressions ternaires peuvent \u00eatre utilis\u00e9es pour <a href=\"https:\/\/wikiform.fr\/codespace\/conditions-ternaires-afficher-contenu-react\">afficher du contenu en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\n\nfunction UserStatus({ isOnline }) {\n  return (\n    <div>\n      {isOnline ? <span className=\"status-online\">En ligne<\/span> : <span className=\"status-offline\">Hors ligne<\/span>}\n    <\/div>\n  );\n}\n\nexport default UserStatus;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Conditions <strong>And (&#038;&#038;)<\/strong> pour un rendu conditionnel en React<\/h3>\n\n\n\n<p>L&rsquo;op\u00e9rateur logique &#038;&#038; (et) est une option populaire en React pour rendre du contenu de mani\u00e8re conditionnelle. Si la condition \u00e9valu\u00e9e est vraie, le JSX qui suit l&rsquo;op\u00e9rateur &#038;&#038; est rendu, sinon React ignore ce contenu. Pour en savoir plus sur les composants conditionnels, lisez notre ressource sur <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\">les diff\u00e9rences entre composants par classe et fonction<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\n\nfunction UserProfile({ user }) {\n  return (\n    <div>\n      {user && <h1>Hello, {user.name}<\/h1>}\n    <\/div>\n  );\n}\n\nexport default UserProfile;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation avanc\u00e9e des conditions <strong>if else<\/strong> en React<\/h3>\n\n\n\n<p>Pour des cas plus complexes o\u00f9 vous avez besoin d&rsquo;une logique conditionnelle plus d\u00e9taill\u00e9e, il est souvent utile de d\u00e9finir des conditions if en dehors du code JSX pour plus de clart\u00e9. Apprenez comment structurer votre code efficacement avec notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/sections\/s-ameliorer-react-guide\">l&rsquo;am\u00e9lioration de votre code React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction Dashboard() {\n  const [isAdmin, setIsAdmin] = useState(false);\n  const [isLoggedIn, setIsLoggedIn] = useState(true);\n\n  let content;\n  if (!isLoggedIn) {\n    content = <div>Connexion requise<\/div>;\n  } else if (isAdmin) {\n    content = <div>Tableau de bord administrateur<\/div>;\n  } else {\n    content = <div>Tableau de bord utilisateur<\/div>;\n  }\n\n  return <div>{content}<\/div>;\n}\n\nexport default Dashboard;\n<\/code><\/pre>\n\n\n\n<p>Comme d\u00e9montr\u00e9, les conditions if else peuvent \u00eatre tr\u00e8s puissantes pour g\u00e9rer la logique d&rsquo;affichage complexe dans les applications React. Elles permettent de concevoir des interfaces qui r\u00e9agissent en temps r\u00e9el aux changements d&rsquo;\u00e9tat ou aux donn\u00e9es re\u00e7ues. Consultez notre guide complet sur <a href=\"https:\/\/wikiform.fr\/codespace\/differences-entre-props-et-state-react\">les diff\u00e9rences entre props et state<\/a> pour comprendre comment g\u00e9rer efficacement l&rsquo;\u00e9tat et les propri\u00e9t\u00e9s dans React.<\/p>\n\n\n\n<p>En approfondissant votre ma\u00eetrise des conditions dans React, vous gagnerez en efficacit\u00e9 dans la cr\u00e9ation d&rsquo;applications modernes et responsives. Continuez votre apprentissage en explorant davantage la documentation officielle de <a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noopener\">React<\/a> ou en suivant des tutoriels avanc\u00e9s pour d\u00e9couvrir d&rsquo;autres techniques de programmation conditionnelle.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>conditions if else Contenu React<\/strong> sont essentielles pour contr\u00f4ler le flux d&rsquo;affichage dans vos composants. Gr\u00e2ce \u00e0 ces outils, vous pouvez personnaliser chaque aspect de l&rsquo;interface utilisateur de mani\u00e8re pr\u00e9cise et intuitive. Continuez \u00e0 explorer les possibilit\u00e9s offertes par React pour maximiser les potentialit\u00e9s de votre d\u00e9veloppement front-end. Pour d&rsquo;autres tutoriels et ressources avanc\u00e9es sur React, visitez des plateformes comme <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noopener\">Udemy<\/a> et <a href=\"https:\/\/www.codecademy.com\/\" target=\"_blank\" rel=\"noopener\">Codecademy<\/a>.<\/p>\n\n\n\n<p>Profitez d\u00e8s maintenant de nos formations en ligne pour am\u00e9liorer vos comp\u00e9tences en React et Redux. Cliquez sur l&rsquo;image ci-dessous pour en savoir plus sur notre cours <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\">Cr\u00e9er des sites interactifs avec React et Redux<\/a> sur Learnify.<\/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\">\n  <img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Formation React et Redux sur Learnify\" style=\"display: block; margin: 20px auto; max-width: 100%;\" title=\"\">\n<\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Conditions if else Contenu React jouent un r\u00f4le fondamental dans la gestion de l&rsquo;affichage conditionnel des composants et du contenu. Comprendre comment les utiliser&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3184,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5994","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\/5994","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=5994"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5994\/revisions"}],"predecessor-version":[{"id":5995,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5994\/revisions\/5995"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3184"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5994"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5994"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5994"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}