Ваш первый компонент
Часть раздела Основы путешествия по React на Coddy — урок 2 из 42.
Время написать ваш первый компонент. Посмотрите на App.jsx. Это функция, которая возвращает JSX:
export default function App() {
return (
<div>
</div>
);
}Прямо сейчас он возвращает пустой <div>, поэтому предпросмотр пуст. Любой JSX, который вы поместите внутрь, будет отображен (заголовки, абзацы, кнопки, что угодно):
<h1 id="title">Hello, React!</h1>Обратите внимание на атрибут id: он работает так же, как и в HTML, и наши тесты используют id для поиска ваших элементов. Остальные два файла — это техническая обвязка приложения: index.html содержит приложение, а main.jsx монтирует App на страницу. Они заблокированы. App.jsx — это место, где вы работаете.
Задание
НовичокСделайте так, чтобы ваше приложение приветствовало мир.
- Внутри
<div>вApp.jsxдобавьте<h1>сid="title". - Его текст должен быть точно
Hello, React!
Попробуйте сами
<!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