Notions de Base de JSX dans React

En React, nous utilisons une extension de syntaxe de JavaScript appelée JSX (JavaScript XML) pour construire nos interfaces utilisateur. JSX permet d'écrire des composants React qui décrivent l'apparence de l'interface utilisateur. Pour cela, React utilise une syntaxe appelée JSX.

JSX ressemble à du HTML, mais il s'écrit à l'intérieur de JavaScript. Il permet de décrire les éléments de l'interface utilisateur directement dans le code du composant, au lieu de les construire étape par étape avec JavaScript.

Même si JSX ressemble à du HTML, ce n'est pas du HTML. En arrière-plan, JSX est converti en JavaScript que React comprend. Cela rend JSX à la fois expressif et puissant tout en restant une partie du langage JavaScript.

Dans JSX, il est possible d'intégrer des expressions JavaScript directement dans le balisage. Cela facilite l'affichage de données dynamiques et le contrôle de ce qui apparaît à l'écran. Voici ci-dessous le même composant qu'auparavant, cette fois écrit avec JSX :

function Welcome() {
  const name = "React";
  return <h1>Welcome to {name}</h1>;
}

Ici, JSX est utilisé pour décrire l'interface utilisateur. La syntaxe {name} permet d'insérer des valeurs JavaScript dans l'interface. React met automatiquement à jour l'affichage lorsque les données changent.