Composants : un kit de construction pour le web

Construis tes premiers composants personnalisés et assemble une page à partir d'eux comme des LEGO.

Montre-moi : ton premier composant personnalisé

Un composant est une fonction avec une majuscule au début qui retourne du JSX. C’est l’usage de mettre chacun dans son propre fichier. Crée le fichier src/Header.jsx :

function Header() {
  return (
    <header>
      <h1>FC Riverside</h1>
      <nav>
        <a href="#team">Team</a>
        <a href="#results">Results</a>
      </nav>
    </header>
  );
}

export default Header;

Et utilise-le dans src/App.jsx :

import Header from './Header.jsx';

function App() {
  return (
    <div>
      <Header />
      <main>
        <p>Welcome to our club's website!</p>
      </main>
    </div>
  );
}

export default App;

import ... from ... – « emprunte un composant d’un autre fichier. » Ça va avec export default.
<Header /> – une balise personnalisée ! La majuscule dit à React : ce n’est pas du HTML, c’est mon composant.

Tu te souviens de la douleur du Niveau 1 – le menu copié sur chaque page ? Elle vient de disparaître. L’en-tête existe une fois, dans un seul fichier.

Montre-moi : un composant avec des données interchangeables (props)

Un tampon avec des lettres interchangeables – les données sont passées à un composant comme props (propriétés). Fichier src/PlayerCard.jsx :

function PlayerCard({ name, position, number }) {
  return (
    <div className="card">
      <h3>{name} · #{number}</h3>
      <p>{position}</p>
    </div>
  );
}

export default PlayerCard;

Utilisé dans App.jsx :

import PlayerCard from './PlayerCard.jsx';

<PlayerCard name="Jake" position="goalkeeper" number={1} />
<PlayerCard name="Alex" position="midfield" number={8} />
<PlayerCard name="Tom" position="forward" number={9} />

Les props s’écrivent comme des attributs HTML. Le texte va entre guillemets, les nombres et le JavaScript vont dans {}. Le composant les dépaquète dans ({ name, position, number }) et les utilise.

Montre-moi : une liste à partir d’un tableau

Trois cartes à la main – ça va. Mais s’il y en a vingt ? Mets les données dans un tableau et utilise .map() :

const players = [
  { name: "Jake", position: "goalkeeper", number: 1 },
  { name: "Matt", position: "defense", number: 4 },
  { name: "Alex", position: "midfield", number: 8 },
  { name: "Tom", position: "forward", number: 9 },
];

function App() {
  return (
    <div className="cards">
      {players.map((player) => (
        <PlayerCard
          key={player.number}
          name={player.name}
          position={player.position}
          number={player.number}
        />
      ))}
    </div>
  );
}

.map() parcourt le tableau et crée une carte pour chaque élément. Ajouter un joueur = ajouter une ligne au tableau. Aucun HTML n’est copié. (key est juste un aide pour React à distinguer les cartes – mets n’importe quoi d’unique.)

À toi 💪

Construis un kit de composants pour ton propre projet dans ton projet React :

Un composant Header avec le nom de ton site web et le menu.
Un composant carte avec des props correspondant à ton projet : 🏫 TeacherCard (name, subject) · 🙋 HobbyCard (name, description) · 🌍 TripCard (place, description) · ⚽ PlayerCard (name, position, number).
Mets les données dans un tableau et affiche-les avec .map() – au moins 4 éléments.
Copie les styles de tes cartes de ton ancien site web dans src/App.css – tes connaissances CSS se transfèrent sans changement !

✅

Vérifie : La page est assemblée à partir de tes propres balises (<Header />, <PlayerCard />…), les cartes naissent d’un tableau de données, et ajouter un élément au tableau ajoute une carte à la page. C’est exactement comme les vraies applications sont construites.

Ce que tu retiens de cette leçon

Un composant = un fichier + une fonction avec une majuscule + export default ; utilisé via import et <Tag />.
Props = les données interchangeables d’un composant : <Card name="Jake" number={1} />.
Les listes se dessinent avec array.map() – les données pilotent l’écran.