Rendu JSX de la liste d'articles

Dans ce chapitre, vous apprendrez à utiliser des expressions JSX pour afficher des données JS dans l'interface utilisateur, ce qui permettra à la page d'accueil du blog d'afficher une liste de cartes d'articles.

{} Intégration d'expressions dans JSX

Dans JSX,les accolades {}sont le point d'entrée dans le monde JavaScript.

Toute expression JS peut être placée entre accolades : variables, opérations, appels de fonction, expressions ternaires, etc.

Exemple

function HomePage() {
  const blogTitle = 'EXAMPLE Front-end Notes'
  const author = 'Xiao Ming'

  return (
    <div>
      <h1>{blogTitle}</h1>
      <p>Auteur :{author}</p>
      <p>Heure actuelle :{new Date().toLocaleDateString()}</p>
      <p>Message d'accueil :{author ?`Hello, ${author}` : 'Welcome, visitor'}</p>
    </div>
  )
}

La page affichera :

EXAMPLE 前端笔记
作者：小明
当前时间：2024/5/15
欢迎语：你好，小明

Les accolades ne peuvent contenir que desexpressions(du code qui s'évalue en une valeur), pas des instructions. Par exemple,{if (condition) ...}est invalide, mais{condition ? 'A' : 'B'}est valide.

Liaison d'attributs

Les attributs HTML dans JSX doivent être liés dynamiquement à l'aide d'accolades.

Exemple

function ArticleCard() {
  const coverUrl = '/images/react-cover.png'
  const linkUrl = '/post/1'

  return (
    <div>
      {/* Attribut dynamique : les accolades lient une variable JS */}
      <img src={coverUrl} alt="Couverture de l'article" />
      <a href={linkUrl}>Lire la suite</a>

      {/* Remarque : class doit s'écrire className */}
      <div className="card active">Contenu de la carte</div>

      {/* style accepte un objet, avec les noms de propriétés en camelCase */}
      <div style={{ color: '#427DB8', fontSize: '16px' }}>
Texte vert
      </div>
    </div>
  )
}
HTMLJSXExplication
class="btn"className="btn"class est un mot réservé en JS
style="color: red"style={{ color: 'red' }}Reçoit un objet, noms de propriétés en camelCase
src="xxx.html"src={variable}Les valeurs dynamiques utilisent des accolades
onclick="fn()"onClick={fn}Noms d'événements en camelCase, passer une référence de fonction

Rendu de listes : array.map()

React n'a pas de directives comme Vuev-forle fait.

Pour afficher des listes en JSX, utilisez directement la méthodearray.map()de JavaScript.

Exemple

function ArticleList() {
  // Utiliser un tableau d'objets JS pour simuler les données des articles
  const articles = [
    {
      id: 1,
      title: 'Le guide complet pour bien démarrer avec React',
      summary: 'Apprenez les Hooks React à partir de zéro, en couvrant les concepts de base tels que useState, useEffect, et plus encore.',
      date: '2024-05-10',
      category: 'React',
      cover: '/images/react.png'
    },
    {
      id: 2,
      title: 'Explication détaillée de la programmation asynchrone en JavaScript' 66) 'Comprendre Promise, async/await, la boucle d’événements et la file des microtâches en un seul article.',
      summary: 'Un article pour bien comprendre Promise, async/await, la boucle d’événements et la file des microtâches.',
      date: '2024-05-08',
      category: 'JavaScript',
      cover: '/images/js.png'
    },
    {
      id: 3,
      title: 'Mise en pratique de CSS Grid Layout',
      summary: 'Implémentez facilement des mises en page responsives complexes avec CSS Grid.',
      date: '2024-05-05',
      category: 'CSS',
      cover: '/images/css.png'
    }
  ]

  return (
    <div className="article-list">
      {/* map parcourt le tableau, en renvoyant un morceau de JSX pour chaque élément */}
      {articles.map(article => (
        <div key={article.id} className="card">
          <img src={article.cover} alt={article.title} />
          <div className="card-body">
            <span className="category">{article.category}</span>
            <h3>{article.title}</h3>
            <p>{article.summary}</p>
            <span className="date">{article.date}</span>
          </div>
        </div>
      ))}
    </div>
  )
}

L'importance de l'attribut key

keyest un identifiant unique attribué à chaque élément d'une liste, aidant React à identifier quels éléments ont changé.

Sans key, React utilise une stratégie de "mise à jour sur place", ce qui peut entraîner une confusion d'état et une dégradation des performances.

Valeur de keyConséquence
Identifiant unique (recommandé)Suit correctement chaque élément, Diff efficace
Indice de tableauL'insertion/la suppression peut entraîner un désordre du contenu du champ de saisie
Aucune cléAvertissement dans la console, performances médiocres

Ajoutez toujours uneclé unique et stableau JSX retourné par map. N'utilisez pas index comme clé, surtout lorsque des éléments de liste peuvent être ajoutés, supprimés ou réordonnés.

Rendu conditionnel

React n'a pas de v-if, mais il existe trois façons d'implémenter le rendu conditionnel.

Exemple

function ArticlePage() {
  const articles = []
  const isLoading = false

  return (
    <div>
      {/* Méthode 1 : expression ternaire — adaptée pour choisir entre deux */}
      {isLoading ? (
        <p>Chargement, veuillez patienter...</p>
      ) : (
        <p>Chargement terminé !</p>
      )}

      {/* Méthode 2 : && court-circuit — adapté pour "afficher si la condition est vraie, ne pas afficher sinon" */}
      {articles.length === 0 && <p>Aucun article pour le moment, restez à l'écoute.</p>}

      {/* Méthode 3 : if/else au niveau supérieur d'un composant — adapté pour une logique complexe à conditions multiples */}
      {articles.length > 0 ? (
        <div>
          {articles.map(a => <div key={a.id}>{a.title}</div>)}
        </div>
      ) : (
        <p>Aucune donnée</p>
      )}
    </div>
  )
}

Comparaison de trois approches de rendu conditionnel

ApprocheSyntaxeScénario applicable
Ternaire? :{cond ? <A /> : <B />}Choisir l'un des deux, doit retourner quelque chose
Court-circuit&&{cond && <A />}Afficher si présent, ne pas afficher sinon
Vérification if anticipéeStocker le JSX dans une variable avant le returnScénarios complexes de branchement conditionnel

&&Le court-circuit a un piège : lorsque la condition est le nombre 0, il affiche "0". Il est recommandé que le&&côté gauche soit toujours un booléen :{list.length > 0 && ...}au lieu de{list.length && ...}。

Exercice pratique : Page d'accueil complète du blog

Exemple

// Chemin du fichier : src/App.jsx
import './App.css'

function App() {
  const articles = [
    {
      id: 1, title: 'Le guide complet pour démarrer avec React',
      summary: 'Apprenez les Hooks React à partir de zéro, en couvrant les concepts de base tels que useState, useEffect, et plus encore.',
      date: '2024-05-10', category: 'React', cover: '/images/react.png'
    },
    {
      id: 2, title: 'Explication détaillée de la programmation asynchrone en JavaScript',
      summary: 'Comprendre Promise, async/await, la boucle d'événements et la file de microtâches en un seul article.',
      date: '2024-05-08', category: 'JavaScript', cover: '/images/js.png'
    },
    {
      id: 3, title: 'CSS Grid Layout en pratique',
      summary: 'Implémentez facilement des mises en page responsives complexes avec CSS Grid.',
      date: '2024-05-05', category: 'CSS', cover: '/images/css.png'
    }
  ]

  return (
    <div className="app">
      <header className="navbar">
        <h1 className="logo">Blog EXEMPLE</h1>
        <nav>
          <a href="/">Accueil</a>
          <a href="#">À propos</a>
        </nav>
      </header>

      <main className="container">
        <h2 className="section-title">Derniers articles</h2>

        {/* Rendu conditionnel : afficher les articles s'ils existent, sinon afficher un état vide */}
        {articles.length === 0 ? (
          <p className="empty-tip">Pas encore d'articles, restez à l'écoute.</p>
        ) : (
          <div className="article-grid">
            {/* Rendu de liste : map parcourt le tableau */}
            {articles.map(article => (
              <div key={article.id} className="article-card">
                <img src={article.cover} alt={article.title} className="card-cover" />
                <div className="card-content">
                  <span className="card-category">{article.category}</span>
                  <h3 className="card-title">{article.title}</h3>
                  <p className="card-summary">{article.summary}</p>
                  <span className="card-date">{article.date}</span>
                </div>
              </div>
            ))}
          </div>
        )}
      </main>

      <footer className="footer">
        <p>© 2024 EXEMPLE Blog. Propulsé par React.</p>
      </footer>
    </div>
  )
}

export default App

Exemple

/* Chemin du fichier : src/App.css ajoutez les styles suivants */
.section-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.article-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.card-cover {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.card-content {
  padding: 16px;
}

.card-category {
  display: inline-block;
  padding: 2px 10px;
  background: #e3f2fd;
  color: #1976d2;
  border-radius: 12px;
  font-size: 12px;
  margin-bottom: 8px;
}

.card-title {
  font-size: 18px;
  margin-bottom: 8px;
  color: #222;
}

.card-summary {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 12px;
}

.card-date {
  font-size: 12px;
  color: #999;
}

.empty-tip {
  text-align: center;
  color: #999;
  padding: 60px 0;
  font-size: 16px;
}

Résumé du chapitre

Dans ce chapitre, vous avez appris quatre opérations essentielles en JSX :{}Intégration d'expressions, liaison d'attributs (className / style),map()Rendu de liste + key, rendu conditionnel (ternaire / court-circuit).

À ce stade, la page d'accueil du blog peut afficher dynamiquement des cartes d'article à partir des données JS.

Extensions supplémentaires