Фигурные скобки
Часть раздела Основы путешествия по 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>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Основы
1Знакомство с React
Что такое React?Ваш первый компонентПравило одного родителяJSX — это не HTMLИтоги: Знакомство с React