React
Définition
Bibliothèque JavaScript open-source maintenue par Meta pour construire des interfaces utilisateur à base de composants. Standard du marché front-end.
Comment ça marche
React est une bibliothèque JavaScript open-source, créée par Meta, pour construire des interfaces utilisateur à partir de composants réutilisables. Chaque composant est une fonction qui prend des props et retourne du JSX (du HTML enrichi). React maintient un arbre de composants en mémoire, et quand l'état change, il calcule la différence avec l'arbre précédent et applique uniquement les mises à jour nécessaires au DOM réel. Ce mécanisme de reconciliation rend les UI complexes performantes sans que le développeur écrive du code de manipulation DOM bas niveau.
Le modèle des composants
La logique fondamentale : on découpe l'interface en composants à responsabilité unique (un bouton, un input, une card, un formulaire), puis on les compose pour bâtir des pages entières. Chaque composant a son rendu, son état local si nécessaire, et expose une API par ses props. La composition est le levier principal de réutilisation : plutôt que d'hériter ou de configurer un mégacomposant, on assemble des petits composants spécialisés. Cette approche, banale aujourd'hui, a transformé le développement front-end depuis 2013.
Pourquoi c'est devenu le standard
React domine le marché front-end depuis dix ans. La quasi-totalité des nouvelles apps SaaS, des dashboards B2B et des sites complexes s'écrivent en React, soit en pur React, soit via un framework comme Next.js qui ajoute le routing, le rendu serveur et l'écosystème. Le marché de l'emploi suit, ce qui rend le recrutement et la maintenance plus simples. Les bibliothèques d'UI majeures (Radix, shadcn/ui, MUI, Mantine) ciblent React en priorité. Pour un projet sérieux, choisir React n'est pas un pari : c'est un investissement sur un écosystème mature.
Les hooks
Les hooks sont des fonctions React qui ajoutent état et effets aux composants fonctionnels : useState pour un état local, useEffect pour un effet de bord, useMemo pour mémoïser un calcul, useContext pour partager des données. Ils ont remplacé les classes depuis 2019 et simplifié radicalement le code. On peut aussi écrire ses propres hooks pour factoriser une logique entre composants (useDebounce, useLocalStorage, useFetch). C'est la façon idiomatique de partager du comportement, plus propre que les HOC (Higher-Order Components) d'autrefois.
React seul versus framework
React seul (via Vite ou Create React App, désormais déprécié) reste pertinent pour des apps internes type dashboard, où le SEO n'a pas d'importance et où on déploie une SPA sur un CDN. Pour un site public, un SaaS B2B avec SEO ou un produit qui mélange contenu et interactivité, on passe systématiquement par Next.js. Le framework apporte le routing par fichiers, le rendu serveur, les optimisations d'images, la metadata API, et un écosystème de déploiement (Vercel) qui économise des semaines de configuration infrastructure.
Apprendre React aujourd'hui
La courbe d'apprentissage de React s'est radoucie. Les hooks sont plus simples à comprendre que les anciennes classes, TypeScript apporte un filet de sécurité au refactoring, et les outils modernes (Vite, Next.js, Tailwind) éliminent l'essentiel de la configuration historique. Pour démarrer, on apprend dans l'ordre : JSX, props et composants, useState, useEffect, fetch et état dérivé, custom hooks, puis Next.js pour le routing serveur. Compter quelques semaines pour devenir productif, quelques mois pour maîtriser les patterns avancés.