Фигурные скобки

Часть раздела Основы путешествия по React на Coddy — урок 6 из 42.

JSX становится интересным, как только вы добавляете JavaScript. Фигурные скобки { } открывают окно из вашей разметки обратно в JavaScript:

const name = 'Ada';

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

Всё, что находится внутри фигурных скобок, вычисляется как JavaScript, и результат попадает на страницу: здесь абзац выводит Hello, Ada!.

Без фигурных скобок JSX обрабатывает то, что вы вводите, как обычный текст. <p>Hello, name!</p> буквально отображает слово name, что, вероятно, не то, что вы имели в виду.

Это самый часто используемый элемент JSX: определите свои данные как переменные, а затем вставьте их в разметку с помощью { }.

Задание

Новичок

Компонент определяет const name = 'Ada', но в приветствии отображается обычное слово name.

Исправьте параграф, чтобы он использовал переменную: должно отображаться Hello, Ada!.
Не изменяйте саму переменную.

Попробуйте сами

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