Les Composants React

Les composants sont les blocs de construction fondamentaux de React. Ils permettent de créer des éléments d'interface utilisateur réutilisables et autonomes.

Qu'est-ce qu'un composant React ?

Un composant React est une fonction ou une classe qui retourne du JSX (JavaScript XML). Il peut être aussi simple qu'un bouton ou aussi complexe qu'un formulaire complet.

Types de composants

Il existe deux types principaux de composants React :

1. Composants fonctionnels (recommandés) :

function Welcome(props) {
  return <h1>Bonjour, {props.name}</h1>;
}

2. Composants de classe (legacy) :

class Welcome extends React.Component {
  render() {
    return <h1>Bonjour, {this.props.name}</h1>;
  }
}

Création de votre premier composant

Créons un composant simple pour afficher une carte de profil :

// ProfileCard.js
function ProfileCard({ name, role, avatar }) {
  return (
    <div className="profile-card">
      <img src={avatar} alt={name} className="avatar" />
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
}

export default ProfileCard;