Accolades

Fait partie de la section Les fondamentaux du Journey React de Coddy. Leçon 6 sur 42.

JSX devient intéressant dès que tu y intègres du JavaScript. Les accolades { } ouvrent une fenêtre qui permet de passer de ton balisage à JavaScript :

const name = 'Ada';

return <p>Hello, {name}!</p>;

Tout ce qui se trouve entre les accolades est évalué en JavaScript, et le résultat apparaît sur la page : ici, le paragraphe affiche Hello, Ada!.

Sans accolades, JSX traite ce que tu écris comme du texte brut. <p>Hello, name!</p> affiche littéralement le mot name, ce qui n’est probablement pas ce que tu voulais.

C’est l’élément de JSX le plus utilisé : définissez vos données sous forme de variables, puis insérez-les dans le balisage avec { }.

Défi

Débutant

Le composant définit const name = 'Ada', mais le message de bienvenue affiche le mot littéral name.

Corrige le paragraphe pour qu'il utilise la variable : il doit afficher Hello, Ada!.
Ne modifie pas la variable elle-même.

Essayez vous-même

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>