Le parentesi graffe

Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 6 di 42.

JSX diventa interessante quando lo combini con JavaScript. Le parentesi graffe { } aprono una finestra dal markup verso JavaScript:

const name = 'Ada';

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

Tutto ciò che si trova tra le parentesi graffe viene valutato come JavaScript e il risultato appare nella pagina: qui il paragrafo visualizza Hello, Ada!.

Senza parentesi graffe, JSX tratta ciò che digiti come testo semplice. <p>Hello, name!</p> mostra letteralmente la parola name, probabilmente non è ciò che intendevi.

Questo è l’elemento JSX più utilizzato in assoluto: definisci i tuoi dati come variabili, poi inseriscili nel markup con { }.

Sfida

Principiante

Il componente definisce const name = 'Ada', ma il saluto mostra la parola letterale name.

Correggi il paragrafo in modo che usi la variabile: dovrebbe visualizzare Hello, Ada!.
Non modificare la variabile.

Provalo tu

<!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>