# JSX

## Qu'est-ce que JSX ?

JSX (JavaScript XML) est une extension syntaxique de JavaScript qui permet d'écrire du HTML directement dans du code JS. Il est compilé par Babel en appels `React.createElement()`.

### Syntaxe de base

```
// JSX
const element = <h1 className="title">Bonjour React</h1>;

// Compilé en
const element = React.createElement('h1', { className: 'title' }, 'Bonjour React');
```

### Règles importantes

- Un composant JSX doit retourner **un seul élément racine** (ou un `<Fragment>` / `<></>`)
- Utiliser `className` au lieu de `class`
- Les attributs sont en camelCase : `onClick`, `onChange`, `htmlFor`
- Les balises auto-fermantes doivent l'être : `<img />`, `<input />`
- Les expressions JS s'écrivent entre accolades : `{variable}`

### Expressions dans JSX

```
const nom = "Hugo";
const age = 25;

return (
  <>
    <p>Bonjour {nom} !</p>
    <p>Tu as {age >= 18 ? "plus" : "moins"} de 18 ans.</p>
    <ul>
      {["pomme", "poire", "banane"].map((fruit, i) => (
        <li key={i}>{fruit}</li>
      ))}
    </ul>
  </>
);
```

### Rendu conditionnel

```
// Opérateur ternaire
{isLoggedIn ? <Dashboard /> : <Login />}

// Court-circuit &&
{hasError && <ErrorMessage />}

// Variable
let content;
if (isLoggedIn) content = <Dashboard />;
else content = <Login />;
return content;
```