Rendu des interfaces utilisateur (UI)

Pour comprendre comment React fonctionne, nous devons d'abord avoir une compréhension de base de la manière dont les navigateurs interprètent votre code pour créer (ou rendre) des interfaces utilisateur (UI).

Lorsqu'un utilisateur visite une page web, le serveur renvoie un fichier HTML au navigateur qui peut ressembler à ceci :

Le navigateur lit ensuite le HTML et construit le Document Object Model (DOM).

Qu'est-ce que le DOM ?

Le DOM est une représentation objet des éléments HTML. Il agit comme un pont entre votre code et l'interface utilisateur, et possède une structure arborescente avec des relations parent-enfant.

Vous pouvez utiliser des méthodes DOM et JavaScript pour écouter les événements utilisateur et manipuler le DOM en sélectionnant, ajoutant, mettant à jour et supprimant des éléments spécifiques dans l'interface utilisateur. La manipulation du DOM vous permet non seulement de cibler des éléments spécifiques, mais aussi de modifier leur style et leur contenu.

Dans la section suivante, vous apprendrez comment utiliser JavaScript et les méthodes DOM.

Ressources supplémentaires :

• Introduction au DOM
• Comment visualiser le DOM dans Google Chrome
• Comment visualiser le DOM dans Firefox