01 — Introduction à React

🔍 Qu'est-ce que React ?

React est une bibliothèque JavaScript créée par Facebook (Meta) en 2013 pour construire des interfaces utilisateur (UI). Ce n'est pas un framework complet comme Angular — c'est uniquement la couche vue.

Pourquoi React ?

🏗️ Le Virtual DOM

En JavaScript classique, on manipule le DOM directement (document.getElementById, etc.). C'est lent car chaque modification déclenche un recalcul de la page.

React maintient une copie légère du DOM en mémoire (le Virtual DOM). Quand l'état change :

  1. React crée un nouveau Virtual DOM.
  2. Il le compare avec l'ancien (diffing).
  3. Il applique uniquement les différences au vrai DOM (reconciliation).

⚙️ Setup avec CDN (sans Node)

Pour utiliser React sans Node.js, on charge 3 scripts via CDN :

<!-- 1. React : le cœur de la bibliothèque -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>

<!-- 2. ReactDOM : le pont entre React et le navigateur -->
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<!-- 3. Babel : transforme le JSX en JavaScript classique -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
⚠️ Note : L'utilisation de Babel côté client est parfaite pour apprendre, mais en production on utilise un bundler (Vite, Webpack) via Node.js pour de meilleures performances.

🎯 Premier rendu React

Le code minimal pour afficher quelque chose avec React :

<!-- Un conteneur dans le HTML -->
<div id="root"></div>

<script type="text/babel">
    // On crée une "racine" React
    const root = ReactDOM.createRoot(document.getElementById('root'));

    // On rend du JSX dedans
    root.render(<h2>Hello React ! 🎉</h2>);
</script>

Décomposition :

ÉlémentRôle
<div id="root">Le point d'ancrage dans le HTML réel
ReactDOM.createRoot()Crée la racine React (API React 18)
root.render()Injecte le JSX dans le DOM
type="text/babel"Indique à Babel de transformer ce script

🔬 Sans JSX (React pur)

JSX est du sucre syntaxique. Sous le capot, <h2>Hello</h2> devient :

// Sans JSX — API React.createElement
React.createElement('h2', null, 'Hello React ! 🎉');

// Avec attributs :
// <p className="intro">Texte</p>
React.createElement('p', { className: 'intro' }, 'Texte');

On comprend vite pourquoi JSX est préféré ! 😄

🚀 Démo interactive

▼ Résultat du premier rendu React

📝 Résumé

← Sommaire 02 — JSX →