Frontend Academy · Leçon

Composants fonctionnels et props

Créez des composants sous forme de fonctions, acceptez et déstructurez les props, puis utilisez PropTypes ou les types TypeScript pour documenter les structures de données attendues.

Composants fonctionnels et props est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Qu’est-ce qu’un composant React ?

Un composant React est une fonction JavaScript qui renvoie du JSX. Les composants sont les éléments de base des applications React : des parties d’interface utilisateur réutilisables et composables.

function Welcome() {
  return <h1>Welcome to CoddyKit!</h1>;
}

// Arrow function style:
const Welcome = () => <h1>Welcome to CoddyKit!</h1>;

Propriétés — transmettre des données vers le bas

Les propriétés permettent de transmettre des données du parent à l’enfant. Le composant les reçoit comme premier argument, sous la forme d’un objet simple.

function Greeting({ name, role }: { name: string; role: string }) {
  return <p>Hello, {name}! Your role is {role}.</p>;
}

// Usage:
<Greeting name="Alice" role="admin" />

Interface TypeScript pour les propriétés

Définissez une interface nommée pour les propriétés afin d’obtenir la complétion automatique, la vérification des types et la documentation.

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
  variant?: 'primary' | 'secondary' | 'ghost';
}

function Button({ label, onClick, disabled = false, variant = 'primary' }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`btn btn-${variant}`}
    >
      {label}
    </button>
  );
}

Propriété children

La propriété children contient le contenu situé entre les balises ouvrante et fermante du composant. Déclarez-la avec le type React.ReactNode pour accepter tout contenu affichable.

interface CardProps {
  title: string;
  children: React.ReactNode;
}

function Card({ title, children }: CardProps) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </div>
  );
}

// Usage:
<Card title="Hello">
  <p>Card content goes here.</p>
</Card>

Propriétés par défaut avec déstructuration

Définissez les valeurs par défaut directement dans le motif de déstructuration. Il s’agit de l’approche moderne : l’API obsolète defaultProps n’est plus recommandée.

function Alert({ type = 'info', message, onClose }: AlertProps) {
  return (
    <div className={`alert alert-${type}`}>
      <span>{message}</span>
      <button onClick={onClose}>×</button>
    </div>
  );
}

Composition de composants

Les composants se composent les uns avec les autres : une Page utilise un Layout, qui utilise un Nav et une Sidebar, lesquels utilisent chacun de petits atomes comme Button et Icon. Cet ensemble forme l’arbre de composants React.

Conventions de nommage

Les noms de composants doivent commencer par une majuscule. Les noms en minuscules sont traités comme des éléments HTML. <div> est un élément div HTML ; <Div> est un composant React nommé Div.

Composants purs

Un composant est pur si les mêmes propriétés produisent toujours la même sortie et qu’aucun effet secondaire ne se produit pendant le rendu. Les composants purs sont plus faciles à comprendre et à optimiser.

// Pure:
const Greeting = ({ name }: { name: string }) => <h1>Hi, {name}</h1>;

// Impure (side effect in render):
const Bad = ({ id }: { id: string }) => {
  localStorage.setItem('id', id); // SIDE EFFECT in render — avoid
  return <p>{id}</p>;
};

Transmettre des fonctions comme propriétés

Les fonctions, ou fonctions de rappel, sont transmises comme propriétés pour permettre aux enfants de communiquer avec leurs parents. Le parent définit la fonction ; l’enfant l’appelle.

function TodoItem({ text, onDelete }: { text: string; onDelete: () => void }) {
  return (
    <li>
      {text}
      <button onClick={onDelete}>Delete</button>
    </li>
  );
}

Décomposition des propriétés

L’opérateur de décomposition transmet toutes les propriétés d’un objet à un composant. C’est utile pour les composants enveloppes ou de transmission, mais utilisez-le avec prudence : des propriétés inattendues pourraient être transmises.

function InputWrapper(props: React.InputHTMLAttributes<HTMLInputElement>) {
  return <input {...props} className={`input-base ${props.className || ''}`} />;
}

Fragments et clés dans le contexte des propriétés

Lorsqu’une liste de composants est affichée comme enfants, chacun doit posséder une propriété key unique. Les clés aident React à identifier les éléments qui ont changé, ont été ajoutés ou ont été supprimés.

Vérification rapide

Comment fournir une valeur par défaut pour une propriété dans un composant fonctionnel React moderne ?

Récapitulatif : composants et propriétés

Les composants fonctionnels sont des fonctions JavaScript qui renvoient du JSX. Les propriétés transmettent les données du parent à l’enfant. Utilisez des interfaces TypeScript pour typer les propriétés. Utilisez children : React.ReactNode pour le contenu d’emplacement. Définissez les valeurs par défaut dans la déstructuration. Transmettez des fonctions de rappel comme propriétés pour permettre la communication de l’enfant vers le parent. Les noms commencent par une majuscule.

Questions Fréquemment Posées

La leçon « Composants fonctionnels et props » est-elle gratuite ?

Oui — le texte complet de « Composants fonctionnels et props » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Composants fonctionnels et props » ?

Créez des composants sous forme de fonctions, acceptez et déstructurez les props, puis utilisez PropTypes ou les types TypeScript pour documenter les structures de données attendues. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Composants fonctionnels et props » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Frontend Academy