Mitium

Appearance

Usage d’un composant ​

Les composants sont particulièrement utiles pour regrouper l'implémentation d’un élément visuel spécifique. Dans ce chapitre, nous allons voir comment faire appel à un composant dans un autre pour qu'il y soit inclus visuellement et ainsi pouvoir construire une application à l'aide de divers composants. Nous aborderons ensuite le concept de DOM virtuel, qui conceptualise la hiérarchie des composants dans une application.

Utiliser un composant ​

Tout comme les balises natives HTML, les composants servent à définir un élément visuel spécifique. C’est pourquoi les frameworks JS proposent naturellement d’inclure un composant dans un autre à l’aide de balises HTML personnalisées :

html
<div>
  <h1>My website</h1>
  <MyButton />
</div>

Dans cet exemple, nous reprenons le composant MyButton défini dans le chapitre précédent pour l’inclure dans le code HTML d’un autre composant.

Afin d’identifier le code associé à la balise MyButton, il est nécessaire d’effectuer un import JavaScript du fichier définissant le composant :

jsx
import MyButton from "./components/MyButton.jsx"

export default function App() {
  return (
    <div>
      <h1>My website</h1>
      <MyButton />
    </div>
  )
}

Il est ensuite possible de référencer directement l’objet importé dans le code HTML afin de positionner le composant dans son parent. Le code HTML de MyButton, considéré comme composant enfant, sera automatiquement placé à l’endroit où se trouve la balise <MyButton/>.

Les composants peuvent ainsi être imbriqués les uns dans les autres de manière infinie.

L’usage d’un composant permet d’encapsuler les logiques spécifiques d’une partie de l’application. Ainsi, les composants parents voient leur code simplifié, en confiant les détails de certains éléments visuels de plus bas niveau à des composants enfants définis dans d’autres fichiers.

INFO

👉 À l'exception de App, les composants sont conventionnellement définis dans un dossier src/components. Il est possible d’y créer des sous-dossiers si les composants deviennent nombreux.

Usage multiple ​

Un composant peut être utilisé plusieurs fois au sein d’un autre composant :

html
<div>
  <h1>My first button</h1>
  <MyButton />
  <h1>The second, now</h1>
  <MyButton />
  <h1>And the third</h1>
  <MyButton />
</div>

Le composant MyButton sera ici visible plusieurs fois sur la page, à chaque emplacement où sa balise est positionnée.

Il est également possible de faire appel à un même composant dans différents composants de l'application. Cela permet d'uniformiser les implémentations de certains éléments récurrents, comme des boutons, des éléments de formulaire, voire des sections entières.

Notion de DOM virtuel ​

En HTML, la page web est visuellement composée à l’aide d’un ensemble de balises suivant une logique hiérarchique :

html
<body>
  <div>
    <h1>My website</h1>
    <p>This website is awesome !</p>
  </div>
</body>

Cette hiérarchie reprend l’ordonnancement visuel des éléments sur la page. Mais elle définit surtout un ensemble d’objets logiques pour le navigateur internet, symbolisés par les balises, et rattachant chaque objet aux autres par des liens de parenté. Ce système d'objets connectés est nommé Document Object Model (DOM) et est souvent représenté sous la forme d'un graphe :

Cette approche orientée objet est particulièrement efficace pour faciliter la décomposition du rendu complexe d’une page Web, en le représentant à plusieurs niveaux, du plus global au plus particulier.

INFO

📖 Retrouvez davantage de détails sur le concept de DOM dans cette annexe.

En permettant l’utilisation de balises HTML personnalisées, les composants offrent une représentation plus riche et plus précise dans la modélisation d’une page Web. Le DOM peut ainsi être envisagé en intégrant les composants dans sa représentation ou alors en traduisant les composants sous forme d’éléments HTML natifs :

DOM

La modélisation avec composants à gauche est appelée DOM virtuel, par opposition à celle en HTML natif à droite, appelée DOM réel. L’un des rôles centraux des frameworks JavaScript est de convertir le DOM virtuel en DOM réel, afin qu’il puisse être interprété par les navigateurs Internet. Le DOM virtuel constitue un concept clé que nous retrouverons dans plusieurs chapitres ultérieurs.

🐶 DogCenter ​

Dans le chapitre précédent, nous avons implémenté un bloc représentant un chien de notre galerie dans le fichier App. Copions désormais notre fichier App dans le dossier src/components et renommons-le DogCard:

src/
├── components/
│   ├── DogCard.jsx
│   └── DogCard.css
├── App.jsx
└── App.css

NOTE

👉 Pensez également à renommer la fonction App en DogCard dans le fichier JSX, et veillez à bien importer le fichier ./DogCard.css et non ./App.css.

Nous pouvons ensuite remplacer le code de notre fichier App d'origine pour qu'il fasse appel au composant DogCard et implémente désormais une galerie entière de DogCard:

jsx
/* App.jsx */
import DogCard from './components/DogCard';
import './App.css'

export default function App() {
  return (
    <div>
      <h1>Dog Center</h1>
      <div id="dog-gallery">
        <DogCard />
        <DogCard />
        <DogCard />
      </div>
    </div>
  );
}
css
/* App.css */
#dog-gallery {
  display: flex;
  flex: wrap;
}

Nous disposons maintenant d’une galerie de DogCard, mais celle-ci affiche toujours les informations du même chien. Nous verrons prochainement comment transmettre des données depuis le composant parent vers chaque instance du composant DogCard, afin de personnaliser le contenu de chacun des chiens présentés.

Conclusion ​

L’utilisation des composants permet d’encapsuler facilement certaines implémentations et de les réutiliser au sein d’une application. Ils enrichissent la représentation traditionnelle des objets de l’application (DOM réel) en introduisant des entités plus complexes et signifiante (DOM virtuel).

Dans le prochain chapitre, nous découvrirons comment définir les composants de manière plus dynamique grâce à la notion de Props.

Copyright © 2023-present Antoine Libert