Создание страницы из компонентов
Часть раздела Основы путешествия по React на Coddy — урок 14 из 42.
Типичная страница — это композиция: `App` просто компонует именованные блоки:
export default function App() {
return (
<div>
<Title />
<Content />
<Footer />
</div>
);
}Прочитайте этот оператор return вслух: он буквально описывает страницу сверху вниз. Каждый блок скрывает свою собственную разметку, поэтому изменение футера никогда не приведет к поломке заголовка. Именно с помощью такой структуры вы будете строить каждое реальное приложение отныне.
Задание
ЛегкоСоберите страницу из двух компонентов.
- Определите
Title:<h1>сid="page-title"и текстомCoddy Cooking. - Определите
Footer:<p>сid="page-footer"и текстомMade with React. Appотображает сначала<Title />, затем<Footer />.
Попробуйте сами
<!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Компоненты
Базовые элементыВаш второй компонентПовторное использование компонентовСоздание страницы из компонентовИтоги: Компоненты