🧩 Le contexte : avant React (vers 2010–2012)
Avant React, les développeurs web utilisaient principalement :
- •jQuery pour manipuler le DOM
- •Des frameworks comme Backbone.js, AngularJS (v1), Ember.js, etc.
👉 Le problème :
Les interfaces web devenaient de plus en plus dynamiques et complexes (notifications, filtres en temps réel, dashboards, etc.). Mais le DOM du navigateur était lent et difficile à maintenir.
Quand l'état de ton application changeait (par exemple : un élément de la liste est ajouté), tu devais manuellement mettre à jour le DOM pour refléter ce changement.
Résultat :
- beaucoup de code spaghetti
- erreurs de synchronisation entre les données et l'affichage
- et une complexité croissante dès que l'app grossissait
⚛️ 1. React est né chez Facebook (2011–2013)
Facebook avait justement ce problème avec sa boîte de commentaires en temps réel et son fil d'actualité. Chaque petite mise à jour devait être rendue sans recharger toute la page, ce qui devenait ingérable.
👉Jordan Walke, ingénieur chez Facebook, crée React en interne vers 2011, et le framework est open-sourcé en 2013.
💡 2. Les idées révolutionnaires de React
a) Le Virtual DOM
Au lieu de modifier directement le DOM (lent), React utilise un Virtual DOM : un modèle en mémoire qui représente ton interface.
Quand l'état change :
- React crée une nouvelle version du Virtual DOM.
- Il la compare à l'ancienne (diffing).
- Il met à jour seulement les parties nécessaires du vrai DOM.
→ Résultat : plus rapide, plus prévisible, plus simple.
b) La logique par composants
Une interface = une arborescence de composants indépendants.
Chaque composant gère :
- son propre état (useState, setState)
- son affichage (return <JSX />)
C'est un paradigme déclaratif : "Dis-moi ce que tu veux voir à l'écran, pas comment le mettre à jour."
c) JSX
React introduit le JSX, une syntaxe qui mélange HTML et JavaScript :
function Hello({ name }) {
return <h1>Hello {name}</h1>;
}→ Cela rend la structure de l'interface lisible et expressive.
🚀 3. En résumé : pourquoi React a été créé
| Problème du web d'avant | Solution de React |
|---|---|
| DOM lent et difficile à manipuler | Virtual DOM performant |
| Code spaghetti et difficile à maintenir | Architecture par composants |
| Mises à jour manuelles du DOM | Rendu déclaratif automatique |
| Frameworks lourds et rigides | Librairie légère et flexible |
| Pas de standard clair pour les interfaces réactives | Paradigme universel basé sur l'état et les props |
📅 4. Et aujourd'hui ?
Depuis 2013, React est devenu :
la librairie la plus utilisée
pour construire des interfaces web
la base de frameworks modernes
comme Next.js, Remix, Gatsby, Expo, etc.
le modèle d'interface pour de nombreuses autres technos
Vue, Svelte, SolidJS s'en inspirent fortement