3.9 Comment fonctionne React

Voyons maintenant comment React fonctionne concrètement. Nous sommes actuellement dans le fichier App.js, où se trouve la fonction App. Pour illustrer, nous allons simplement écrire un paragraphe dans le <div> retourné par cette fonction, avec le texte « Cours React ». Une fois le fichier sauvegardé, le navigateur recharge automatiquement et le texte s'affiche immédiatement sur la page.

Approche déclarative vs approche impérative

Pour bien comprendre la magie de React, comparons avec ce qu'il faudrait écrire en JavaScript standard. En JS pur, on commence par sélectionner un élément de la page, par exemple avec :

const root = document.getElementById('root');
const para = document.createElement('p');
para.textContent = 'Cours React';
root.appendChild(para);

On retrouve d'ailleurs document.getElementById('root') dans index.js — c'est l'élément racine où React s'attache. En JavaScript pur, il faut donner des instructions précises au navigateur, étape par étape : créer un élément, définir son contenu, puis l'attacher au DOM. C'est ce qu'on appelle une approche impérative.

Avec React, on n'écrit jamais ce genre de code. À la place, on déclare directement le JSX dans le return de notre composant et React s'occupe lui-même de toute la manipulation du DOM. C'est beaucoup plus court, beaucoup plus lisible, et beaucoup plus maintenable. Bien sûr, nous n'allons pas garder ce code JavaScript impératif dans App.js — c'était juste pour illustrer la différence. Place maintenant à la construction du premier composant de notre outil de suivi des dépenses.

En résumé

Cette leçon introduit le fonctionnement de React en montrant d'abord l'approche vanilla JavaScript pour manipuler le DOM. Elle démontre comment utiliser document.getElementById(), document.createElement(), appendChild() et textContent pour ajouter du contenu à une page web de manière impérative étape par étape. La leçon souligne que cette approche vanilla devient encombrante et justifie l'utilisation de React pour construire un premier composant qui simplifiera ce processus.

Points clés

• En JavaScript vanilla, on manipule le DOM de manière impérative en sélectionnant des éléments avec document.getElementById() et en les modifiant avec textContent, appendChild(), ou createElement()
• L'approche impérative du JavaScript standard nécessite des instructions manuelles claires et étape par étape pour chaque modification du DOM
• Cette approche vanilla devient encombrante et peu pratique, ce qui justifie le recours à React pour une meilleure gestion des interfaces
• React permet de construire des composants pour simplifier la création et la gestion des éléments dynamiques
• La leçon prépare la transition vers la création d'un premier composant React pour un outil de suivi de dépenses

Questions fréquentes

Comment ajoute-t-on du contenu à une page web en JavaScript vanilla ?

On utilise document.getElementById() pour sélectionner un élément cible, document.createElement() pour créer un nouvel élément, et appendChild() pour l'ajouter à la page. On peut définir le contenu texte avec textContent.

Qu'est-ce qu'une approche impérative en JavaScript ?

C'est une méthode où vous donnez des instructions claires et détaillées étape par étape au navigateur pour chaque modification du DOM. JavaScript standard fonctionne de cette manière, contrairement aux approches déclaratives.

Pourquoi React est-il préférable à la manipulation vanilla du DOM ?

Parce que la manipulation vanilla du DOM est encombrante et requiert de nombreuses lignes de code pour des opérations simples. React simplifie cela en permettant de construire des composants réutilisables et faciles à maintenir.