Nawiasy klamrowe

Część sekcji Podstawy ścieżki React w Coddy. Lekcja 6 z 42.

JSX staje się ciekawy, gdy tylko połączysz go z JavaScript. Nawiasy klamrowe { } otwierają okno z Twojego znaczników z powrotem do JavaScript:

const name = 'Ada';

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

Wszystko wewnątrz nawiasów klamrowych jest obliczane jako JavaScript, a wynik trafia na stronę: tutaj akapit wyświetla Hello, Ada!.

Bez nawiasów klamrowych JSX traktuje wpisany tekst jako zwykły tekst. <p>Hello, name!</p> dosłownie wyświetla słowo name, co prawdopodobnie nie było Twoim zamiarem.

To najczęściej używany element JSX: zdefiniuj dane jako zmienne, a następnie wstaw je do znaczników za pomocą { }.

Wyzwanie

Początkujący

Komponent definiuje const name = 'Ada', ale powitanie wyświetla dosłowne słowo name.

Popraw akapit, aby używał zmiennej: powinien wyświetlać Hello, Ada!.
Nie zmieniaj samej zmiennej.

Spróbuj swoich sił

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