Qu'est-ce qu'un composant?

Un composant dans le développement frontend est un bloc indépendant et réutilisable de l'interface utilisateur. Il encapsule sa structure (HTML), son style (CSS) et son comportement (JavaScript). Les composants aident à diviser une interface complexe en parties plus petites et gérables, ce qui améliore la lisibilité du code, facilite la maintenance et les tests.

Caractéristiques principales:

• Encapsulation: La logique, la structure et le style sont liés à l'intérieur du composant.
• Réutilisabilité: Le composant peut être utilisé dans différentes parties de l'application ou même dans d'autres projets.
• Indépendance: Les modifications dans un composant affectent peu les autres.
• État et props: Les composants peuvent avoir un état interne (données pouvant changer) et recevoir des données de l'extérieur via des props (propriétés).

Exemple de structure d'un composant (React):

// Composant Button.js
import React from 'react';
import './Button.css'; // Importation des styles

function Button(props) {
  return (
    <button className="button-style" onClick={props.onClick}>
      {props.label}
    </button>
  );
}

export default Button;

/* Styles dans Button.css */
.button-style {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
}

// Utilisation du composant
import Button from './Button';

function App() {
  const handleClick = () => {
    console.log('Bouton cliqué!');
  };

  return (
    <div>
      <h1>Mon application</h1>
      <Button label="Clique moi" onClick={handleClick} />
    </div>
  );
}

export default App;

Le concept de composants est central dans les frameworks et bibliothèques modernes JavaScript comme React, Vue et Angular.