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;

Pour utiliser ce composant :

// App.js
import ProfileCard from './ProfileCard';

function App() {
  return (
    <div className="app">
      <ProfileCard
        name="Marie Dupont"
        role="Développeuse Frontend"
        avatar="/images/avatar.jpg"
      />
    </div>
  );
}

JSX : La syntaxe de React

JSX est une extension de JavaScript qui permet d’écrire du HTML dans votre code JavaScript. Voici les règles principales :

1. Expression JavaScript :

const name = "Marie";
const element = <h1>Bonjour, {name}</h1>;

2. Attributs :

// Utilisez camelCase pour les attributs
const element = <div className="container" tabIndex="0"></div>;

3. Éléments enfants :

const element = (
  <div>
    <h1>Bonjour</h1>
    <p>Comment allez-vous ?</p>
  </div>
);

Organisation des composants

Structure des dossiers recommandée

src/
  ├── components/
  │   ├── common/
  │   │   ├── Button.js
  │   │   └── Input.js
  │   ├── layout/
  │   │   ├── Header.js
  │   │   └── Footer.js
  │   └── features/
  │       ├── auth/
  │       └── dashboard/
  ├── styles/
  └── App.js

Bonnes pratiques

1. Un composant par fichier :

// Button.js
export default function Button({ children, onClick }) {
  return <button onClick={onClick}>{children}</button>;
}

2. Nommage des composants :

• Utilisez PascalCase pour les noms de composants
• Utilisez des noms descriptifs
• Préfixez les composants réutilisables avec le nom de votre application

3. Composants atomiques :

• Gardez les composants petits et focalisés
• Un composant devrait avoir une seule responsabilité
• Évitez les composants trop complexes

Exercices pratiques

1. Créez un composant Card qui affiche :

   • Un titre
   • Une description
   • Une image
   • Un bouton d’action

2. Créez un composant Navbar qui contient :

   • Un logo
   • Des liens de navigation
   • Un menu utilisateur

3. Créez un composant Form qui inclut :

   • Des champs de saisie
   • Des labels
   • Un bouton de soumission

Conclusion

Les composants sont le cœur de React. Ils permettent de créer des interfaces utilisateur modulaires et réutilisables. Dans le prochain chapitre, nous allons explorer les props et le state, qui permettent de rendre les composants dynamiques et interactifs.