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;