{"id":6208,"date":"2025-11-24T12:54:16","date_gmt":"2025-11-24T12:54:16","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/afficher-uniquement-articles-publies-react\/"},"modified":"2025-11-24T12:54:21","modified_gmt":"2025-11-24T12:54:21","slug":"afficher-uniquement-articles-publies-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/afficher-uniquement-articles-publies-react\/","title":{"rendered":"16.13 Afficher Uniquement les Articles Publi\u00e9s en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Articles Publi\u00e9s React<\/strong> est une fonctionnalit\u00e9 essentielle pour de nombreuses applications web. En ma\u00eetrisant la mani\u00e8re d&rsquo;afficher seulement certains articles en fonction de leur \u00e9tat dans React, vous pouvez am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur et la gestion du contenu de votre application. Dans cet article, nous explorerons ce concept \u00e0 travers des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Affichage Conditionnel en React<\/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\/706144583?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>Dans les applications React, l&rsquo;affichage conditionnel est une technique largement utilis\u00e9e pour d\u00e9terminer quel contenu montrer en fonction de certaines conditions. Cela inclut l&rsquo;affichage d&rsquo;articles uniquement lorsqu&rsquo;ils remplissent certains crit\u00e8res, comme un statut de \u00ab\u00a0publi\u00e9\u00a0\u00bb. Gr\u00e2ce \u00e0 cet article, vous apprendrez comment impl\u00e9menter cette technique dans vos projets React.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9ation de Composants React pour les Articles<\/h3>\n\n\n\n<p>Commen\u00e7ons par cr\u00e9er une structure de base pour nos composants. Imaginons que nous avons une liste d&rsquo;articles, et chaque article a un statut indiquant s&rsquo;il est publi\u00e9 ou non. Voici un mod\u00e8le simple pour un composant Article :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\n\nconst Article = ({ title, content }) => {\n    return (\n        <div className=\"article\">\n            <h2>{title}<\/h2>\n            <p>{content}<\/p>\n        <\/div>\n    );\n};\n\nexport default Article;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion de l&rsquo;\u00c9tat et Filtrage des Articles<\/h3>\n\n\n\n<p>Pour g\u00e9rer et filtrer les articles \u00e0 afficher, nous allons utiliser l&rsquo;\u00e9tat local (ou global) pour stocker notre liste d&rsquo;articles. Voici comment mettre cela en place :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\nimport Article from '.\/Article';\n\nconst ArticlesList = () => {\n    const [articles, setArticles] = useState([\n        { id: 1, title: 'Article 1', content: 'Contenu de l\\'article 1', isPublished: true },\n        { id: 2, title: 'Article 2', content: 'Contenu de l\\'article 2', isPublished: false },\n        { id: 3, title: 'Article 3', content: 'Contenu de l\\'article 3', isPublished: true },\n    ]);\n\n    const publishedArticles = articles.filter(article => article.isPublished);\n\n    return (\n        <div>\n            {publishedArticles.map(article => (\n                <Article key={article.id} title={article.title} content={article.content} \/>\n            ))}\n        <\/div>\n    );\n};\n\nexport default ArticlesList;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Hooks pour Interagir avec l&rsquo;API<\/h3>\n\n\n\n<p>Dans une application r\u00e9elle, vous souhaiterez probablement r\u00e9cup\u00e9rer les articles depuis une API. React nous offre le hook <code>useEffect<\/code> pour effectuer des op\u00e9rations secondaires telles que des appels r\u00e9seau :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState, useEffect } from 'react';\nimport Article from '.\/Article';\n\nconst ArticlesList = () => {\n    const [articles, setArticles] = useState([]);\n\n    useEffect(() => {\n        fetch('\/api\/articles')\n            .then(response => response.json())\n            .then(data => {\n                setArticles(data);\n            })\n            .catch(error => console.error('Error fetching articles:', error));\n    }, []);\n\n    const publishedArticles = articles.filter(article => article.isPublished);\n\n    return (\n        <div>\n            {publishedArticles.map(article => (\n                <Article key={article.id} title={article.title} content={article.content} \/>\n            ))}\n        <\/div>\n    );\n};\n\nexport default ArticlesList;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Affichage Responsif et Accessibilit\u00e9<\/h3>\n\n\n\n<p>Outre la logique de filtrage, assurez-vous d&rsquo;am\u00e9liorer l&rsquo;accessibilit\u00e9 et le design de votre affichage. L&rsquo;utilisation de classes CSS r\u00e9actives et de pratiques accessibles comme les balises aria est par exemple crucial pour l&rsquo;exp\u00e9rience utilisateur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.article {\n  margin-bottom: 20px;\n}\n\n.article h2 {\n  font-size: 1.5rem;\n  color: #333;\n}\n\n.article p {\n  font-size: 1rem;\n  color: #666;\n}\n<\/code><\/pre>\n\n\n\n<p>Pour une meilleure compr\u00e9hension du <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\" target=\"_blank\" rel=\"noopener\">comportement de React<\/a>, vous pouvez \u00e9galement vous tourner vers notre comparatif entre les applications <a href=\"https:\/\/wikiform.fr\/codespace\/prets-a-decouvrir-react-guide-introduction\" target=\"_blank\" rel=\"noopener\">single-page et multi-page<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Disposer d&rsquo;une fonctionnalit\u00e9 permettant d&rsquo;Afficher Uniquement les Articles Publi\u00e9s en React implique de combiner l&rsquo;usage de composants, l&rsquo;\u00e9tat de gestion, et l&rsquo;affichage conditionnel. Cela permet de cr\u00e9er des interfaces dynamiques et utilisateurs responsables. Continuez \u00e0 explorer React et ses capacit\u00e9s pour maximiser le potentiel de vos applications web.<\/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 noreferrer\"><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 React et Redux Offre 50%\" title=\"\"><\/a>\n.\n\n<!-- Ajout de liens internes -->\n\n<p>Pour aller plus loin avec React et ma\u00eetriser par exemple la gestion des <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-react-fragments-utiliser\" target=\"_blank\" rel=\"noopener\">fragments<\/a> ou encore l&rsquo;utilisation des <a href=\"https:\/\/wikiform.fr\/codespace\/analyse-differents-etats-cycle-vie-react\" target=\"_blank\" rel=\"noopener\">states et props<\/a>, consultez nos articles d\u00e9di\u00e9s. Explorez aussi nos ressources sur les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\" target=\"_blank\" rel=\"noopener\">React Hooks<\/a> pour \u00e9largir votre comp\u00e9tence.<\/p>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Articles Publi\u00e9s React est une fonctionnalit\u00e9 essentielle pour de nombreuses applications web. En ma\u00eetrisant la mani\u00e8re d&rsquo;afficher seulement certains articles en fonction de leur&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3155,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6208","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\/6208","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=6208"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6208\/revisions"}],"predecessor-version":[{"id":6209,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6208\/revisions\/6209"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3155"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}