Menu
Coddy logo textTech

Ваш второй компонент

Часть раздела Основы путешествия по 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. Остальные — это внутренние вспомогательные компоненты.

challenge icon

Задание

Новичок

Создайте свой первый отдельный компонент.

  1. Определите компонент с именем Header (с заглавной H!) выше App. Он должен возвращать <h1> с id="page-title" и текстом My Blog.
  2. Отрендерите его внутри <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>
quiz iconПроверьте себя

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

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