Menu
Coddy logo textTech

Создание страницы из компонентов

Часть раздела Основы путешествия по React на Coddy — урок 14 из 42.

Типичная страница — это композиция: `App` просто компонует именованные блоки:

export default function App() {
    return (
        <div>
            <Title />
            <Content />
            <Footer />
        </div>
    );
}

Прочитайте этот оператор return вслух: он буквально описывает страницу сверху вниз. Каждый блок скрывает свою собственную разметку, поэтому изменение футера никогда не приведет к поломке заголовка. Именно с помощью такой структуры вы будете строить каждое реальное приложение отныне.

challenge icon

Задание

Легко

Соберите страницу из двух компонентов.

  1. Определите Title: <h1> с id="page-title" и текстом Coddy Cooking.
  2. Определите Footer: <p> с id="page-footer" и текстом Made with React.
  3. 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>
quiz iconПроверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела Основы