Notion de Composant

Introduction

La programmation web front-end s’appuie historiquement sur l’association de trois langages : le HTML pour la définition sémantique du contenu, le CSS pour la mise en forme et le JavaScript pour la gestion des intégrations logiques de l’application. Ce découpage conduit naturellement à des regroupements du code par langage plutôt que par responsabilité au sein de l’interface web.

Le concept de composant (component), exploité par les frameworks front-end, favorise le regroupement du code lié à un élément visuel spécifique (HTML, CSS et JavaScript) afin de former un bloc distinct, potentiellement dans un même fichier.

Cette approche par composant offre une façon plus élégante d’organiser une application, suivant le principe de séparation des préoccupations. Elle favorise également une meilleure réutilisation du code et contribue à le rendre plus maintenable.

Créer un composant

Pour créer un composant, prenons l’exemple caractéristique de l’implémentation d’un bouton. Un bouton est un élément visuel simple s’appuyant sur les trois langages :

• Le HTML, afin de déclarer et positionner le bouton dans l’application ainsi que définir son contenu :

  <button id="my-button">Click me</button>

• Le CSS, pour sa mise en forme :

  #my-button {
      background-color: blue;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: '5px';
  }

• Le Javascript, enfin, pour gérer l’interaction avec le bouton:

  const myButton = document.getElementById('my-button');
  myButton.addEventListener('click', () => {
      console.log('Button clicked');
  });

Dans une application plus large, chaque partie de ce code peut facilement se retrouver mélangée avec d’autres implémentations, n’ayant potentiellement rien à voir avec cette partie de l'application.

Voyons maintenant comment les frameworks facilitent le regroupement de ce code au sein d’un même fichier.

En React.js, les composants sont généralement créés au sein d’un fichier JSX (pour JavaScript Syntax Extension). Ce langage, basé sur le JavaScript, vise à en augmenter les capacités, notamment en permettant d’écrire du code HTML au sein du code JavaScript :

/* MyButton.jsx */
export default function MyButton() {
  const handleClick = () => {
    console.log('Button clicked');
  };

  return (
    <button onClick={handleClick}>Click me</button>
  )
}

Cette fonction JSX, contient d’abord du code Javascript standard, mais retourne ensuite du code HTML.

Notez un changement important par rapport à la version Javascript native : la fonction handleClick décrivant l’action du bouton est directement référencée dans le code HTML à l’aide d'un attribut. Il n'est plus nécessaire d'utiliser un query selector pour lier le Javascript à un élément HTML particulier.

NOTE

📌 La syntaxe employée pour lier la fonction à la balise HTML fera l’objet d’un chapitre ultérieur sur la gestion des événements. Il n’est pas nécessaire de la maîtriser pour le moment.

Vous pouvez également ajouter du code CSS à ce composant:

/* MyButton.jsx */
export default function MyButton() {
  const handleClick = () => {
    console.log('Button clicked');
  };

  const buttonStyle = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
  };

  return (
    <button onClick={handleClick} style={buttonStyle}>
      Click me
    </button>
  );
}

Dans cet exemple, le style CSS est décrit sous la forme d'un objet JavaScript, avant d'être associé à la balise HTML via l'attribut style, de façon similaire à la fonction handleClick avec l'attribut onClick.

INFO

👉 Notez que les attributs CSS composés de plusieurs mots comme background-color doivent être écrits en camelCase (backgroundColor) lorsqu'il sont définit dans un fichier JSX.

Une autre façon de faire assez populaire est de joindre un fichier CSS à chaque composant (MyButton.css) définissant le style de celui-ci, puis de l'importer en javascript :

/* MyButton.css */
.custom-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* MyButton.jsx */
import "./MyButton.css";

export default function MyButton() {
  const handleClick = () => {
    console.log("Button clicked");
  };

  return (
    <button onClick={handleClick} className="custom-button">
      Click me
    </button>
  );
}

Les propriétés CSS importées peuvent ensuite être associées aux balises HTML comme habituellement, à l'aide d'IDs et de classes notamment, comme ici avec la classe custom-button.

WARNING

⚠️ L'attribut de balise class doit être remplacé par className en JSX afin de ne pas entrer en conflit avec le mot-clé class de JavaScript.

Pour tester ce code, il est possible de lancer une application en environnement de développement. Placez ensuite le code défini précédemment dans le fichier App situé dans le dossier src. Ouvrez l'URL fournie par l'application à son lancement dans un navigateur internet pour voir l'interface de l'application.

NOTE

📌 Le fichier App joue le rôle de “composant racine” de l’application. L’ensemble du code HTML défini par ce fichier sera automatiquement placé par le framework dans le fichier index.html de l'application (grace au fichier point d'entrée JavaScript).

🐶 DogCenter

Pour notre application de chenil, nous souhaitons avoir une galerie présentant les différents chiens actuellement présents à notre centre DogCenter. Les blocs qui composent cette galerie, présentant chacun des chiens, sont un élément central de l'application. Chaque bloc se compose d’une photo du chien, de son nom, de sa race et de son age.

Pour débuter simplement cette application, nous pouvons commencer à créer un composant représentant l'un de ces blocs dans le fichier App, en prenant arbitrairement les informations d’un des chiens du chenil :

/* App.jsx */
import "./App.css";

export default function App() {
  return (
    <div id="dog-card">
      <img
        id="dog-picture"
        src="https://images.pexels.com/photos/1490908/pexels-photo-1490908.jpeg"
        alt="Dog"
      />
      <div id="dog-description">
        <h3>Rex</h3>
        <p className="dog-description-line">Age: 3 years</p>
        <p className="dog-description-line">Breed: Golden Retriever</p>
      </div>
    </div>
  );
};

/* App.css */
#dog-card {
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  margin: 10px;
}

#dog-picture {
  width: 100%;
  height: 105px;
  object-fit: cover;
}

#dog-description {
  padding: 10px;
  color: #000000;
}

#dog-description h3 {
  font-size: 18px;
  margin: 0;
}

.dog-description-line {
  color: #353535;
  font-size: 12px;
  margin: 5px 0;
}

Nous disposons maintenant d'un entité de code représentant un des éléments visuelles fondamentaux de notre application. Nous verrons plus tard comment exploiter ce bloc dans une structure plus complète.

Conclusion

Grâce à la création d'un composant, l’ensemble du code lié à un élément visuel de l'application est facilement regroupé au sein d’un même fichier. Cela simplifie la compréhension de cette implémentation et facilite également le référencement de l’élément HTML dans le code CSS et JavaScript.

Mais ce découpage en composant n’a de sens que s’il est possible d’associer plusieurs composants entre eux pour former une application complète. C’est ce que nous verrons au prochain chapitre.