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.

En résumé

React utilise une approche déclarative pour construire les interfaces utilisateur, contrairement au JavaScript traditionnel qui est impératif. Plutôt que d'ordonnancer où et quand créer des éléments HTML, React te permet de déclarer simplement quels éléments personnalisés doivent exister et les combiner ensemble. Cette philosophie simplifie la création de composants réutilisables et réactifs.

Points clés

• Les interfaces utilisateur combinent HTML, CSS et JavaScript dans des composants réutilisables
• Approche déclarative : tu déclares la structure souhaitée plutôt que d'ordonnancer les mutations DOM
• Approche impérative (JavaScript traditionnel) : tu dis exactement où créer chaque élément et quand le modifier
• Les composants React se combinent pour former l'interface utilisateur complète
• La déclaration plutôt que l'impération rend le code plus lisible et facile à maintenir

Questions fréquentes

Quelle est la différence entre une approche déclarative et impérative en React ?

L'approche impérative (JavaScript traditionnel) ordonne précisément où créer chaque élément HTML et quand le modifier. React est déclaratif : tu décris simplement comment l'interface doit être structurée, et React gère le rendu et les mises à jour.

Pourquoi React utilise-t-il une approche déclarative ?

Cette approche rend le code plus simple à comprendre et à maintenir, car tu décris l'objectif final plutôt que chaque étape intermédiaire. Elle facilite aussi la création de composants réutilisables et réactifs.

Comment les composants React forment-ils l'interface utilisateur ?

Chaque composant regroupe HTML, CSS et JavaScript dans une unité réutilisable. On combine tous ces composants ensemble pour construire l'interface utilisateur complète, ce qui simplifie la gestion de la complexité.