Tutoriel React — Chapitre 7

Plan du chapitre

• 0) JSX : la syntaxe qui décrit l’interface
• 1) Qu’est-ce qu’un composant ?
• 2) Créer un composant (exemple simple)
• 3) Import / Export : comment React relie les fichiers
• 4) Composition : assembler des composants
• 5) Props : passer des données à un composant
• 6) children : mettre du contenu “à l’intérieur”
• 7) Organiser les fichiers (structure recommandée)
• 8) Erreurs fréquentes
• 9) Résumé (à retenir)
• 10) Exercice pratique (débutant)

0) JSX : la syntaxe qui décrit l’interface

Avant même de parler “composants”, il faut comprendre JSX. JSX est une syntaxe qui ressemble à du HTML, mais ce n’est pas du HTML : c’est du JavaScript (transformé au build) qui décrit ce que React doit afficher.

À retenir

• JSX permet d’écrire l’interface “comme du HTML” dans du JavaScript.
• En réalité, JSX est transformé en appels JavaScript (ex : React.createElement).
• On peut intégrer du JS dans JSX avec {...} (expressions).
• Les attributs HTML ont parfois un nom différent : className, htmlFor.

Exemple simple

export default function Hello() {
  const name = "Ahmed";

  return (
    <div className="box">
      <h2>Bonjour {name} !</h2>
      <p>Ceci est du JSX.</p>
    </div>
  );
}

Ce qui est autorisé dans {...}

Dans les accolades, on met des expressions (valeurs, calculs, appels de fonctions), mais pas des instructions (pas de if “directement” dans le JSX). Pour des conditions, on utilise plutôt condition ? ... : ... ou condition && ....

return (
  <div>
    {isLogged ? <p>Connecté</p> : <p>Invité</p>}
    {items.length > 0 && <p>Vous avez des éléments.</p>}
  </div>
);

1) Qu’est-ce qu’un composant ?

Dans React, un composant est une fonction JavaScript qui retourne du JSX (donc un morceau d’interface).

Au lieu d’écrire une page entière d’un coup, vous découpez l’UI en blocs : un header, un menu, une carte produit, un bouton, etc.

Interface (UI)
├─ Header
├─ Menu
├─ Section principale
│  ├─ CarteProduit
│  ├─ CarteProduit
│  └─ CarteProduit
└─ Footer

2) Créer un composant (exemple simple)

Un composant React est souvent une fonction. Par convention, le nom commence par une majuscule.

Exemple : composant Header

function Header() {
  return (
    <header>
      <h1>Mon application</h1>
    </header>
  );
}

Ce composant affiche un header. Maintenant, comment l’utiliser dans App ?

Utilisation dans App (même fichier, pour commencer)

function Header() {
  return (
    <header>
      <h1>Mon application</h1>
    </header>
  );
}

export default function App() {
  return (
    <div>
      <Header />
      <p>Bienvenue !</p>
    </div>
  );
}

3) Import / Export : comment React relie les fichiers

Très vite, vous ne voulez pas tout mettre dans App.jsx. Vous allez créer un fichier par composant. Pour relier les fichiers, on utilise export et import.

A) Export par défaut (le plus courant)

Dans src/components/Header.jsx :

export default function Header() {
  return (
    <header>
      <h1>Mon application</h1>
    </header>
  );
}

Dans src/App.jsx :

import Header from "./components/Header.jsx";

export default function App() {
  return (
    <div>
      <Header />
      <p>Bienvenue !</p>
    </div>
  );
}

B) À retenir

• export default ... : le fichier exporte une chose principale.
• import X from "..." : on récupère cette chose et on lui donne un nom (souvent le même).

4) Composition : assembler des composants

L’idée de React est d’assembler des composants pour construire l’interface, comme des LEGO. On appelle ça la composition.

Exemple : App assemble plusieurs composants

import Header from "./components/Header.jsx";
import Footer from "./components/Footer.jsx";

export default function App() {
  return (
    <div>
      <Header />
      <main>
        <h2>Accueil</h2>
        <p>Contenu principal...</p>
      </main>
      <Footer />
    </div>
  );
}

Ici, App est le “chef d’orchestre” qui organise l’affichage.

5) Props : passer des données à un composant

Un composant devient vraiment utile quand il est réutilisable. Pour le rendre flexible, on lui envoie des données : ce sont les props (propriétés).

A) Exemple : composant Badge réutilisable

function Badge({ label }) {
  return <span>{label}</span>;
}

export default function App() {
  return (
    <div>
      <Badge label="Nouveau" />
      <Badge label="Promo" />
      <Badge label="Rupture" />
    </div>
  );
}

Ici, un seul composant Badge sert à afficher plusieurs badges différents.

B) Les props sont en lecture seule

6) children : mettre du contenu “à l’intérieur”

Parfois, on ne veut pas passer une simple valeur, mais un bloc complet de contenu. React propose une prop spéciale : children.

Exemple : composant Card

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Card>
        <h2>Titre</h2>
        <p>Du contenu dans la carte.</p>
      </Card>
    </div>
  );
}

7) Organiser les fichiers (structure recommandée)

Quand vous commencez à avoir plusieurs composants, il est essentiel d’organiser les fichiers. Une structure simple et très utilisée :

src/
├─ App.jsx
├─ main.jsx
└─ components/
   ├─ Header.jsx
   ├─ Footer.jsx
   ├─ Badge.jsx
   └─ Card.jsx

Règles pratiques

• Un composant = un fichier (au début, c’est le plus simple)
• Noms en majuscule : Header.jsx, ProductCard.jsx, etc.
• Importer avec des chemins clairs : ./components/Header.jsx

8) Erreurs fréquentes

9) Résumé (à retenir)

• Un composant React est une fonction qui retourne du JSX.
• On utilise des composants comme des balises : <Header />.
• On sépare les composants dans des fichiers et on les relie avec export / import.
• La composition = assembler des composants pour construire une page.
• Les props servent à rendre un composant réutilisable.
• children permet de passer un bloc de contenu à l’intérieur d’un composant.

10) Exercice pratique (débutant)

Objectif : créer une petite interface composée de composants séparés en fichiers. Faites l’exercice dans votre projet Vite/React.

Consigne

1. Créez un dossier src/components si nécessaire.
2. Créez Header.jsx qui affiche un titre.
3. Créez Footer.jsx qui affiche “© 2025”.
4. Créez Card.jsx qui affiche {children} dans un <div>.
5. Dans App.jsx, importez les 3 composants et assemblez-les.

Bonus (props)

Créez un composant Badge qui reçoit une prop label et affiche ce texte.