16.13 Afficher Uniquement les Articles Publiés en React

Articles Publiés React est une fonctionnalité essentielle pour de nombreuses applications web. En maîtrisant la manière d’afficher seulement certains articles en fonction de leur état dans React, vous pouvez améliorer l’expérience utilisateur et la gestion du contenu de votre application. Dans cet article, nous explorerons ce concept à travers des exemples concrets de code.

Introduction à l’Affichage Conditionnel en React

Dans les applications React, l’affichage conditionnel est une technique largement utilisée pour déterminer quel contenu montrer en fonction de certaines conditions. Cela inclut l’affichage d’articles uniquement lorsqu’ils remplissent certains critères, comme un statut de “publié”. Grâce à cet article, vous apprendrez comment implémenter cette technique dans vos projets React.

Création de Composants React pour les Articles

Commençons par créer une structure de base pour nos composants. Imaginons que nous avons une liste d’articles, et chaque article a un statut indiquant s’il est publié ou non. Voici un modèle simple pour un composant Article :

import React from 'react';

const Article = ({ title, content }) => {
    return (
        

            
{title}
            
{content}
        
    );
};

export default Article;

Gestion de l’État et Filtrage des Articles

Pour gérer et filtrer les articles à afficher, nous allons utiliser l’état local (ou global) pour stocker notre liste d’articles. Voici comment mettre cela en place :

import React, { useState } from 'react';
import Article from './Article';

const ArticlesList = () => {
    const [articles, setArticles] = useState([
        { id: 1, title: 'Article 1', content: 'Contenu de l\'article 1', isPublished: true },
        { id: 2, title: 'Article 2', content: 'Contenu de l\'article 2', isPublished: false },
        { id: 3, title: 'Article 3', content: 'Contenu de l\'article 3', isPublished: true },
    ]);

    const publishedArticles = articles.filter(article => article.isPublished);

    return (
        

            {publishedArticles.map(article => (
                

            ))}
        
    );
};

export default ArticlesList;

Utilisation des Hooks pour Interagir avec l’API

Dans une application réelle, vous souhaiterez probablement récupérer les articles depuis une API. React nous offre le hook useEffect pour effectuer des opérations secondaires telles que des appels réseau :

import React, { useState, useEffect } from 'react';
import Article from './Article';

const ArticlesList = () => {
    const [articles, setArticles] = useState([]);

    useEffect(() => {
        fetch('/api/articles')
            .then(response => response.json())
            .then(data => {
                setArticles(data);
            })
            .catch(error => console.error('Error fetching articles:', error));
    }, []);

    const publishedArticles = articles.filter(article => article.isPublished);

    return (
        

            {publishedArticles.map(article => (
                

            ))}
        
    );
};

export default ArticlesList;

Affichage Responsif et Accessibilité

Outre la logique de filtrage, assurez-vous d’améliorer l’accessibilité et le design de votre affichage. L’utilisation de classes CSS réactives et de pratiques accessibles comme les balises aria est par exemple crucial pour l’expérience utilisateur :

.article {
  margin-bottom: 20px;
}

.article h2 {
  font-size: 1.5rem;
  color: #333;
}

.article p {
  font-size: 1rem;
  color: #666;
}

Pour une meilleure compréhension du comportement de React, vous pouvez également vous tourner vers notre comparatif entre les applications single-page et multi-page.

Conclusion

Disposer d’une fonctionnalité permettant d’Afficher Uniquement les Articles Publiés en React implique de combiner l’usage de composants, l’état de gestion, et l’affichage conditionnel. Cela permet de créer des interfaces dynamiques et utilisateurs responsables. Continuez à explorer React et ses capacités pour maximiser le potentiel de vos applications web.

Pour aller plus loin avec React et maîtriser par exemple la gestion des fragments ou encore l’utilisation des states et props, consultez nos articles dédiés. Explorez aussi nos ressources sur les React Hooks pour élargir votre compétence.