JSX — это не HTML
Часть раздела Основы путешествия по React на Coddy — урок 4 из 42.
JSX выглядит как HTML, но он находится внутри JavaScript, и это приводит к нескольким небольшим отличиям, с которыми вы будете сталкиваться постоянно:
1. className вместо class. class — это зарезервированное слово в JavaScript, поэтому JSX переименовывает этот атрибут:
<p className="warning">Careful!</p>2. Каждый тег должен закрываться. HTML прощает <br> и <input>, а JSX — нет. Самозакрывающиеся теги заканчиваются на />:
<input id="name" />
<br />3. Атрибуты в camelCase. Атрибуты из нескольких слов записываются в camelCase: onclick → onClick, tabindex → tabIndex. Вы будете часто использовать onClick, когда мы перейдем к событиям.
Задание
НовичокПараграфу ниже необходимо добавить класс CSS с помощью JSX.
- Добавьте параграфу класс CSS
notice(помните: в JSX не используется имя атрибутаclass). - Сохраните его id и текст без изменений.
Попробуйте сами
<!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