JSX & Intro

JavaScript XML — La syntaxe de React

Le concept : Oubliez la séparation stricte HTML/CSS/JS ! Dans React, la logique et l'interface cohabitent harmonieusement grâce au JSX. Ce n'est ni une simple chaîne de caractères ni du HTML pur, mais une extension syntaxique élégante. Sous le capot, elle est compilée en pur JavaScript (React.createElement) pour générer votre Virtual DOM efficacement.

⚡ Rappels JavaScript essentiels avant React

React s'apprend mieux si vous maîtrisez ces concepts JS modernes :

Destructuring & Spread

// Destructuring objet
const { name, age } = user;

// Destructuring tableau
const [first, second] = arr;

// Spread (copier/fusionner)
const copy = { ...user, age: 25 };

Fonctions fléchées & map/filter

// Arrow function
const double = (x) => x * 2;

// .map() pour transformer un tableau
const names = users.map(u => u.name);

// .filter() pour filtrer
const adults = users.filter(u => u.age >= 18);

Modules ES6 (import/export)

// Exporter un composant
export default function Button() { ... }
export { helper };

// Importer
import Button from './Button';
import { helper } from './utils';

Async / Await & Promises

// Promesse (appel API)
async function fetchUser(id) {
    const res = await fetch(`/api/users/${id}`);
    return res.json();
}

// Opérateur ternaire (fréquent en JSX)
const msg = ok ? "Oui" : "Non";

🤔 Pourquoi React ? Le problème que ça résout

En JS vanilla, si vos données changent, vous devez manuellement retrouver l'élément dans le DOM et le mettre à jour. Ça devient vite ingérable :

JS Vanilla (impératif) vs React (déclaratif)

// ❌ Vanilla JS : vous gérez le DOM manuellement
document.getElementById('count').innerText = count;

// ✅ React : vous décrivez QUOI afficher, React gère le COMMENT
return <p>Compteur : {count}</p>; // Mis à jour automatiquement

React utilise un Virtual DOM : un arbre JS léger représentant l'interface. Quand le state change, React compare l'ancien et le nouveau Virtual DOM (diffing), puis ne met à jour que les parties nécessaires du vrai DOM (reconciliation). C'est ce qui le rend performant.

📝 La syntaxe JSX

JSX — Ce que vous écrivez vs ce que Babel compile

// Ce que vous écrivez en JSX :
const button = <button className="btn" onClick={handleClick}>Cliquer</button>;

// Ce que Babel compile :
const button = React.createElement('button', {
    className: 'btn',
    onClick: handleClick
}, 'Cliquer');

Interpolation & Expressions

const name = "Alice";
const score = 42;

// {} pour injecter n'importe quelle expression JS
return (
    <div>
        <h1>Bonjour {name.toUpperCase()}</h1>
        <p>Score : {score * 2}</p>
        <p>Date : {new Date().toLocaleDateString()}</p>
    </div>
);

Différences JSX vs HTML

// class → className
<div className="card">...</div>

// for → htmlFor (sur <label>)
<label htmlFor="email">Email</label>

// Balises auto-fermantes obligatoires
<img src="photo.jpg" alt="Photo" />
<input type="text" />

// Style inline : objet JS (camelCase)
<div style={{ backgroundColor: 'blue', fontSize: '16px' }}>

Rendu conditionnel & Fragments

// Ternaire (if/else)
{isLoggedIn ? <UserMenu /> : <LoginBtn />}

// Court-circuit && (seulement si vrai)
{hasErrors && <ErrorBanner message="Erreur détectée" />}

// Fragment : retourner plusieurs éléments sans div inutile
return (
    <>
        <Header />
        <Main />
        <Footer />
    </>
);

💡 Règle d'or JSX : Tout ce qui est entre {} doit être une expression (qui retourne une valeur), pas une instruction (if, for ne fonctionnent pas directement — utilisez les ternaires et .map()).

🛡️ Sécurité XSS React échappe automatiquement le contenu JSX pour prévenir les attaques XSS. Pour injecter du HTML brut (dangereux !), utilisez dangerouslySetInnerHTML={{ __html: myHtml }} uniquement si vous faites confiance à la source.

Démo Virtual DOM

Cliquez pour voir l'objet React.createElement()

← Accueil Suivant : Components →