–
Concept
Une interface décrite par une fonction
Un composant React est une fonction qui renvoie ce qu'il faut afficher. Ce qu'elle renvoie s'écrit en JSX : une syntaxe qui ressemble au HTML, mais qui vit dans le JavaScript.
Trois différences à retenir : l'attribut class s'écrit className ; les accolades { } insèrent une valeur JavaScript ({joueur.xp}) ; et un composant renvoie un seul élément parent — on enveloppe le reste dedans.
React se charge de transformer ce JSX en vrais éléments de la page, et de les mettre à jour quand les données changent.
1export default function App() {2 const joueur = { pseudo: "awa", xp: 420 };3 return (4 <article className="carte">5 <h2>{joueur.pseudo}</h2>6 <p>{joueur.xp} XP</p>7 </article>8 );9}Dans les accolades, on met une expression : une variable, un calcul, un appel de fonction. Pas d'instruction comme if ou for.