Ваш второй компонент
Часть раздела Основы путешествия по React на Coddy — урок 12 из 42.
Давайте выделим компонент. Вы можете определять сколько угодно компонентов в одном файле: более мелкие выше, а App — внизу:
function Welcome() {
return <p>Glad you're here!</p>;
}
export default function App() {
return (
<div>
<Welcome />
</div>
);
}Только App содержит export default: это входной компонент, который рендерит main.jsx. Остальные — это внутренние вспомогательные компоненты.
Задание
НовичокСоздайте свой первый отдельный компонент.
- Определите компонент с именем
Header(с заглавной H!) вышеApp. Он должен возвращать<h1>сid="page-title"и текстомMy Blog. - Отрендерите его внутри
<div>компонентаAppс помощью<Header />.
Попробуйте сами
<!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Итоги: Знакомство с React2Выражения JSX
Фигурные скобкиМатематика в скобкахСкобки в атрибутахВызов функций в JSXИтоги: Выражения JSX3Компоненты
Базовые элементыВаш второй компонентПовторное использование компонентовСоздание страницы из компонентовИтоги: Компоненты