3.4 Le code React est écrit de manière "déclarative"

Avant de plonger dans le code concret, prenons un instant pour comprendre comment un composant React est réellement construit. En fin de compte, une interface utilisateur web repose sur trois technologies fondamentales : HTML, CSS et JavaScript. Tout ce que nous voyons à l'écran est le résultat de ces trois briques travaillant ensemble.

Composants : la combinaison HTML + CSS + JavaScript

Lorsque nous travaillons avec React et que nous construisons des composants, c'est exactement ce que nous faisons : nous combinons HTML, CSS et JavaScript dans chaque composant. Ensuite, nous assemblons tous ces composants pour bâtir l'interface utilisateur complète. En résumé, React tourne entièrement autour de la notion de composants et de la construction de ces composants pour les composer entre eux.

React vous permet de créer des composants réutilisables et réactifs. Chaque composant contient son propre morceau de HTML (la structure), son JavaScript (la logique) et, comme nous le verrons plus tard, son fragment de CSS (le style). Cette modularité change complètement la façon de penser une application : au lieu d'écrire une grosse page monolithique, on assemble des briques indépendantes.

React utilise ce qu'on appelle une approche déclarative pour construire ses composants. Avec React, vous ne dites pas explicitement qu'un certain élément HTML doit être créé et inséré à un endroit précis de l'interface, comme vous le feriez en JavaScript pur avec document.createElement ou appendChild. À la place, vous déclarez à quoi votre interface doit ressembler, et React s'occupe lui-même de manipuler le DOM pour atteindre ce résultat.

Concrètement, nous construisons simplement nos propres éléments HTML personnalisés (nos composants) et nous les combinons pour créer l'interface. C'est une approche élégante et beaucoup plus maintenable que la manipulation directe du DOM. Passons enfin au code et commençons à construire nos premiers composants.