React et front moderne
Ce cours t'apprend à comprendre ce qu'est React et pourquoi il structure le développement web actuel. Tu verras les concepts clés un par un, avec des exemples simples. À la fin, tu sauras situer React dans une page web réelle et éviter les pièges classiques du débutant.
1.Le front-end et la place de React
Une application web repose sur deux parties. Le back-end gère les données côté serveur, par exemple une base qui stocke des comptes utilisateurs. Le front-end, lui, gère ce que voit et manipule la personne dans son navigateur : les boutons, les formulaires, l'affichage. Avant, on écrivait ce front-end en HTML, CSS et JavaScript mélangés directement dans des pages. Avec la complexité croissante des sites, comme Facebook dans les années 2010, ce mélange devenait ingérable. React est une bibliothèque JavaScript créée par Facebook en 2013 pour organiser ce code front-end. Elle permet de découper une interface en petits morceaux réutilisables. Un site comme Instagram, par exemple, réutilise le même composant pour afficher chaque photo de son fil, au lieu de réécrire le code à chaque fois.
- Le front-end gère l'affichage et l'interaction dans le navigateur.
- React est une bibliothèque JavaScript créée en 2013 par Facebook.
- Elle sert à organiser un code d'interface devenu trop complexe.
2.Les composants, briques de base de React
Un composant est un morceau d'interface autonome, écrit sous forme de fonction JavaScript. Il retourne ce qui doit s'afficher à l'écran. Imagine un bouton "J'aime" sur un réseau social. Au lieu d'écrire son code à chaque endroit où il apparaît, tu crées un composant Bouton une seule fois. Ensuite, tu le réutilises partout, comme une pièce détachée qu'on assemble. Un composant peut aussi contenir d'autres composants : une page entière devient un assemblage de blocs plus petits, un peu comme des briques de Lego. Cette approche s'appelle la composition. Elle rend le code plus lisible, car chaque composant a une responsabilité précise. Elle facilite aussi la maintenance : si tu modifies le composant Bouton, le changement s'applique partout où il est utilisé, sans dupliquer le travail.
- Un composant est une brique d'interface réutilisable écrite en JavaScript.
- Une page devient un assemblage de composants imbriqués.
- Modifier un composant met à jour tous ses usages automatiquement.
3.JSX, mélanger HTML et JavaScript
React utilise une syntaxe particulière appelée JSX, pour JavaScript XML. Elle ressemble à du HTML mais s'écrit directement dans le code JavaScript. Par exemple, un composant peut contenir la ligne suivante : return <h1>Bonjour {prenom}</h1>. Ici, prenom est une variable JavaScript insérée directement dans le texte affiché grâce aux accolades. Ce mélange surprend au début, car on a l'habitude de séparer HTML et JavaScript dans des fichiers différents. Mais JSX permet de garder ensemble la logique et l'affichage d'un même composant, ce qui évite de chercher dans plusieurs fichiers pour comprendre ce qui se passe. Le navigateur ne comprend pas directement le JSX : un outil appelé transpileur, comme Babel, le convertit en JavaScript classique avant de l'exécuter. C'est une étape invisible pour l'utilisateur final du site.
- JSX mélange balises proches du HTML et code JavaScript.
- Les accolades insèrent des variables ou expressions dans l'affichage.
- Un outil comme Babel convertit le JSX en JavaScript compréhensible par le navigateur.
4.L'état, ce qui change dans l'interface
L'état, appelé state en anglais, désigne une donnée qui peut changer au fil du temps dans un composant. Prenons un compteur de likes : il commence à 0, puis passe à 1 quand on clique. Ce nombre est un état. React fournit un outil nommé useState pour déclarer cet état dans un composant. Quand la valeur change, React met automatiquement à jour l'affichage à l'écran, sans que tu aies à manipuler toi-même la page comme avant. Ce mécanisme s'appelle le rendu réactif : l'interface réagit aux changements de données. Sur Twitter par exemple, le compteur de retweets se met à jour visuellement dès que l'action est confirmée, grâce à ce principe. Comprendre l'état est essentiel, car la majorité des bugs en React viennent d'une mauvaise gestion de ces données changeantes.
- L'état est une donnée qui change et déclenche une mise à jour de l'affichage.
- useState permet de créer et modifier un état dans un composant.
- React réaffiche automatiquement l'interface quand l'état change.
5.Les props, faire communiquer les composants
Les props, abréviation de properties, sont des informations transmises d'un composant parent vers un composant enfant. Imagine un composant Carte qui affiche le titre et le prix d'un produit. Plutôt que d'écrire un composant différent pour chaque produit, tu crées un seul composant Carte et tu lui passes le titre et le prix en props, comme des arguments de fonction. Un site comme Amazon affiche ainsi des milliers de fiches produits avec un seul composant réutilisé, alimenté par des props différentes à chaque fois. Une règle importante : les props sont en lecture seule dans le composant enfant, il ne peut pas les modifier lui-même. Seul le parent contrôle ces données. Cette organisation crée un flux de données à sens unique, du parent vers l'enfant, ce qui rend le comportement d'une application plus prévisible et plus facile à déboguer.
- Les props transmettent des données du composant parent vers l'enfant.
- Un composant enfant ne peut pas modifier les props reçues.
- Le flux de données à sens unique rend l'application plus prévisible.
6.Erreurs fréquentes et points d'examen
Trois erreurs reviennent souvent chez les débutants. La première : modifier l'état directement, par exemple écrire compteur = compteur + 1 au lieu d'utiliser la fonction fournie par useState, ce qui empêche React de détecter le changement. La deuxième : oublier la propriété key lors de l'affichage d'une liste d'éléments, ce qui provoque des bugs d'affichage difficiles à repérer. La troisième : confondre props et state, en pensant qu'un composant peut modifier les données reçues de son parent. À l'examen, on te demandera souvent d'expliquer la différence entre props et state, de lire un extrait de JSX pour identifier une erreur de syntaxe, ou de prédire ce qui s'affiche après un changement d'état. Il faut aussi savoir expliquer pourquoi React réutilise des composants plutôt que de dupliquer du code, en citant un exemple concret comme une liste de produits ou de commentaires.
- Ne jamais modifier l'état directement, toujours passer par la fonction dédiée.
- Toujours ajouter une clé unique aux éléments générés dans une liste.
- Savoir distinguer clairement les props, reçues, du state, interne au composant.
À retenir
- 1React est une bibliothèque JavaScript qui organise l'interface d'un site en composants réutilisables.
- 2Un composant est une fonction JavaScript qui retourne du JSX, un mélange de balises et de code.
- 3L'état représente une donnée qui change et provoque une mise à jour automatique de l'affichage.
- 4Les props transportent des données du composant parent vers l'enfant, sans possibilité de modification par l'enfant.
- 5La plupart des erreurs viennent d'une modification directe de l'état ou d'une confusion entre props et state.
Dix questions sur ce sujet démarrent tout de suite, corrigées et expliquées.
L'essentiel en six phrases, à relire la veille.
Cours rédigé par intelligence artificielle et relu au fil des retours. Pour un examen officiel, garde tes cours et les textes en vigueur comme référence.