Composants & Props

Dans React, un composant est une fonction qui retourne du JSX. Les composants te permettent de diviser ton interface en morceaux indépendants et réutilisables. Pense à eux comme des éléments HTML personnalisés que tu définis toi-même.

Un composant de fonction est simplement une fonction JavaScript avec deux règles :

1. Le nom doit commencer par une majuscule. React utilise ceci pour distinguer les composants (<MyButton />) des éléments HTML classiques (<button>).
2. Il doit retourner du JSX (ou null s'il ne doit rien afficher).

function UserCard() {
  return (
    <div className="card">
      <h2>John Doe</h2>
      <p>Software Developer</p>
    </div>
  );
}

Tu peux aussi écrire des composants sous forme de fonctions flèches :

const UserCard = () => (
  <div className="card">
    <h2>John Doe</h2>
    <p>Software Developer</p>
  </div>
);

Les deux styles sont valides et fonctionnellement identiques. La syntaxe de fonction classique est légèrement plus courante dans la documentation et les tutoriels React.

Une fois défini, tu utilises un composant comme une balise HTML :

function App() {
  return (
    <div>
      <UserCard />
      <UserCard />
      <UserCard />
    </div>
  );
}

Ceci affiche trois cartes utilisateur identiques. Mais des cartes identiques ne sont pas très utiles — nous avons besoin d'un moyen de rendre chacune différente. C'est là qu'interviennent les props.

Les props (abréviation de "properties") sont le mécanisme pour transmettre des données d'un composant parent à un composant enfant. Les props rendent les composants dynamiques et réutilisables — le même composant peut afficher un contenu différent selon les props qu'il reçoit.

Les props sont transmises comme des attributs en JSX, exactement comme les attributs HTML :

<UserCard name="Alice" role="Designer" />
<UserCard name="Bob" role="Developer" />

À l'intérieur du composant, les props sont reçues comme un seul paramètre objet :

function UserCard(props) {
  return (
    <div className="card">
      <h2>{props.name}</h2>
      <p>{props.role}</p>
    </div>
  );
}

L'objet props pour le premier <UserCard> serait { name: 'Alice', role: 'Designer' }.

La déstructuration des props est le pattern privilégié car il rend le code plus propre et montre immédiatement quelles props le composant attend :

function UserCard({ name, role }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
}

Tu peux transmettre n'importe quelle valeur JavaScript comme prop — chaînes de caractères, nombres, booléens, tableaux, objets, et même des fonctions :

<ProductCard
  title="Laptop"
  price={999}
  inStock={true}
  tags={['electronics', 'sale']}
  onBuy={() => console.log('Bought!')}
/>

Note : Les props de type chaîne de caractères utilisent des guillemets, mais tous les autres types utilisent des accolades {}.

Les valeurs par défaut pour les props peuvent être définies en utilisant la syntaxe des paramètres par défaut de JavaScript :

function Button({ text = 'Click me', color = 'blue' }) {
  return (
    <button style={{ backgroundColor: color }}>
      {text}
    </button>
  );
}

// Utilise les valeurs par défaut :
<Button />

// Remplace text :
<Button text="Submit" />

// Remplace les deux :
<Button text="Delete" color="red" />

La prop children est une prop spéciale qui contient tout ce que tu mets entre les balises ouvrante et fermante d'un composant :

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

// Utilisation :
<Card>
  <h2>Title</h2>
  <p>Some content goes here.</p>
</Card>

La prop children est puissante car elle te permet de créer des composants enveloppeurs — des composants qui fournissent une structure ou un style tout en permettant n'importe quel contenu à l'intérieur. Ce pattern est utilisé partout dans React :

function Layout({ children }) {
  return (
    <div className="layout">
      <nav>Navigation</nav>
      <main>{children}</main>
      <footer>Footer</footer>
    </div>
  );
}

function App() {
  return (
    <Layout>
      <h1>Home Page</h1>
      <p>Welcome to my site!</p>
    </Layout>
  );
}

La prop children rend Layout réutilisable — tu peux envelopper n'importe quel contenu avec la même navigation et le même footer.

React t'encourage à diviser ton interface en un arbre de petits composants ciblés. Chaque composant devrait faire une seule chose bien. C'est ce qu'on appelle la composition.

Considère la construction d'une page de profil utilisateur :

function Avatar({ src, alt }) {
  return <img src={src} alt={alt} className="avatar" />;
}

function UserInfo({ name, bio }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{bio}</p>
    </div>
  );
}

function ProfileCard({ user }) {
  return (
    <div className="profile-card">
      <Avatar src={user.avatar} alt={user.name} />
      <UserInfo name={user.name} bio={user.bio} />
    </div>
  );
}

function App() {
  const user = {
    name: 'Alice',
    bio: 'React developer',
    avatar: 'alice.jpg'
  };
  return <ProfileCard user={user} />;
}

Remarque comme chaque composant est petit et ciblé :

• Avatar gère uniquement l'affichage d'une image.
• UserInfo affiche uniquement un nom et une bio.
• ProfileCard les compose ensemble.
• App fournit les données.

Règles importantes concernant les props :

1. Les props sont en lecture seule. Un composant ne doit jamais modifier les props qu'il reçoit. C'est une règle fondamentale dans React.
2. Les données circulent vers le bas. Les props circulent du parent vers l'enfant, jamais dans l'autre sens. Ce flux unidirectionnel rend ton application prévisible.
3. Les props peuvent être n'importe quoi. Chaînes de caractères, nombres, tableaux, objets, fonctions, même d'autres composants.

// Ne fais jamais ceci — les props sont en lecture seule !
function Bad(props) {
  props.name = 'hacked'; // Ceci viole les règles de React
  return <h1>{props.name}</h1>;
}