En React, nous utilisons une extension de syntaxe de JavaScript appelée JSX (JavaScript XML) pour construire nos interfaces utilisateur. JSX nous permet d'écrire du code semblable à HTML directement dans JavaScript.

JavaScript dans HTML

L'un des grands avantages de JSX est qu'il combine la puissance de JavaScript avec HTML. Nous pouvons utiliser des expressions et de la logique JavaScript directement dans le code semblable à HTML. Pour intégrer du JavaScript, placez-le entre des accolades, comme ceci : { JavaScript code }.

Comment fonctionne JSX : Un exemple

Voyons JSX en action avec un exemple simple. Supposons que nous voulions rendre un élément de titre dans l'application React :

const element = <h1>Hello, React!</h1>;

Dans cet exemple, nous utilisons JSX pour créer une constante appelée element qui contient un élément <h1> avec le texte "Hello, React!".

Remarque

Sous le capot, React prend ce code JSX et le rend efficacement dans le DOM, en faisant un moyen transparent et puissant de construire des interfaces utilisateur.