Skip to main content

Composants

Les composants React

Un composant est une fonction (ou classe) qui retourne du JSX. Il est réutilisable, indépendant et encapsule sa logique.

Composant fonctionnel (recommandé)

// Déclaration avec function
function Bouton({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

// Déclaration avec arrow function
const Bouton = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);

Composant de classe (héritage, moins utilisé)

import { Component } from 'react';

class Compteur extends Component {
  state = { count: 0 };

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          +
        </button>
      </div>
    );
  }
}

Règles de nommage

  • Un composant doit commencer par une majuscule : MonComposant
  • Un nom en minuscule est interprété comme une balise HTML native

Composition

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

// Utilisation
<Card title="Mon titre">
  <p>Contenu quelconque</p>
</Card>
Back to top