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 vous y intégrez du JavaScript. Les accolades { } ouvrent une fenêtre depuis votre balisage vers JavaScript :

const name = 'Ada';

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

Tout ce qui se trouve à l'intérieur des accolades est évalué comme du JavaScript, et le résultat apparaît dans la page : ici, le paragraphe affiche Hello, Ada!.

Sans accolades, JSX traite ce que vous tapez comme du texte brut. <p>Hello, name!</p> affiche littéralement le mot name, ce qui n'est probablement pas ce que vous vouliez.

C'est l'élément le plus utilisé dans JSX : 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 la salutation affiche le mot littéral name.

Corrigez le paragraphe pour qu'il utilise la variable : il doit afficher Hello, Ada!.
Ne modifiez 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>