⚛️ Qu'est-ce que React ?

React est une bibliothèque JavaScript développée par Facebook (Meta) pour construire des interfaces utilisateur. React ne gère que la vue — il est souvent combiné avec React Router (navigation) et des state managers (Redux, Zustand) pour former une application complète.

Concepts fondamentaux

• Composants — l'UI est décomposée en blocs réutilisables, chacun responsable d'une partie de l'interface
• Virtual DOM — React maintient une représentation légère du DOM en mémoire. Après chaque mise à jour, il compare l'ancien et le nouveau Virtual DOM (diffing) et ne met à jour que ce qui a changé
• Flux unidirectionnel — les données descendent des parents vers les enfants via props ; les enfants remontent des événements via callbacks
• Déclaratif — on décrit quoi afficher (pas comment mettre à jour le DOM)

📝 JSX — La syntaxe React

JSX (JavaScript XML) est une extension de syntaxe qui permet d'écrire du HTML-like directement dans JavaScript. Babel le compile en appels React.createElement().

// JSX (ce qu'on écrit)
const element = <h1 className="titre">Bonjour React !</h1>;

// Ce que Babel compile
const element = React.createElement('h1', { className: 'titre' }, 'Bonjour React !');

Règles JSX importantes

• Attribut class → className (class est un mot réservé JS)
• Attribut for → htmlFor
• Les balises vides doivent être auto-fermantes : <img />, <br />
• Un composant ne peut retourner qu'un seul élément racine
• Les commentaires dans JSX : {/* mon commentaire */}

// ❌ Plusieurs racines — ERREUR
function Bad() {
  return (
    <h1>Titre</h1>
    <p>Paragraphe</p>
  );
}

// ✅ Fragment — pas de div inutile
function Good() {
  return (
    <>
      <h1>Titre</h1>
      <p>Paragraphe</p>
    </>
  );
}

🧩 Premier composant

En React moderne, les composants sont des fonctions JavaScript qui retournent du JSX. La convention veut que leurs noms commencent par une majuscule.

// Déclaration d'un composant
function Salutation() {
  return (
    <div className="card">
      <h2>Bienvenue !</h2>
      <p>Ceci est mon premier composant React.</p>
    </div>
  );
}

// Avec arrow function
const Salutation = () => (
  <div className="card">
    <h2>Bienvenue !</h2>
  </div>
);

// Utilisation (comme une balise HTML)
function App() {
  return <Salutation />;
}

🔀 Expressions JavaScript dans JSX

Les accolades {} permettent d'insérer n'importe quelle expression JavaScript valide dans le JSX.

function Profil() {
  const nom = "Alice";
  const age = 25;
  const isAdmin = true;

  return (
    <div>
      {/* Variables */}
      <h2>{nom}</h2>

      {/* Expressions */}
      <p>Âge : {age}</p>
      <p>Née en {new Date().getFullYear() - age}</p>

      {/* Conditionnel ternaire */}
      <span>{isAdmin ? "👑 Admin" : "Utilisateur"}</span>

      {/* Conditionnel &&  */}
      {isAdmin && <button>Gérer les utilisateurs</button>}

      {/* Style inline : double accolades */}
      <p style={{ color: 'cyan', fontSize: '1rem' }}>
        Stylisé inline
      </p>
    </div>
  );
}

🚀 Monter l'application dans le DOM

Pour attacher React à une page HTML existante, on utilise ReactDOM.createRoot() (React 18+).

<!-- index.html -->
<div id="root"></div>
<script type="module" src="main.jsx"></script>

// main.jsx (avec Vite/bundler)
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

<!-- Sans bundler — via CDN UMD (mini-projets) -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">
  function App() { return <h1>Bonjour !</h1>; }
  ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>