Menu
Coddy logo textTech
НАЧАТЬ УЧИТЬСЯ
flag Ru iconРусскийdown icon

Итоги: Компоненты

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

challenge icon

Задание

Легко

Итог главы: создайте страницу из двух компонентов, используя всё, изученное в этой главе.

  1. Определите компонент Header: <h1> с id="title" и текстом Coddy Shop. Отрендерите его первым внутри внешнего <div> компонента App.
  2. Определите компонент Badge, который возвращает <span>★</span>.
  3. Внутри существующего <div id="badges"> отрендерите Badge дважды: одно определение, два использования.

Попробуйте сами

<!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

4Пропсы (Props)

Что такое пропсы?Передача пропсовДва пропсаТот же компонент, новые данныеПроп childrenИтоги: пропсы

7Условия и списки

Тернарный рендерингОтображение с помощью &&Рендеринг спискаВажность ключейФильтрация, затем отображениеИтоги: Условия и списки

2Выражения JSX

Фигурные скобкиМатематика в скобкахСкобки в атрибутахВызов функций в JSXИтоги: Выражения JSX

5Состояние и события

Что такое состояние?Счетчик кликовСчетчик с шагомПереключение с помощью состоянияНезависимое состояниеИтоги: Состояние и события

8Проект: Карточка профиля

Шаг 1: Структура карточкиШаг 2: Карточка с пропсамиШаг 3: Кнопка «Мне нравится»Шаг 4: Переключатель подписки

3Компоненты

Базовые элементыВаш второй компонентПовторное использование компонентовСоздание страницы из компонентовИтоги: Компоненты

6Формы и поля ввода

Управляемые поля вводаВывод введенных данныхСчетчик символовКнопка очисткиИтоги: Формы и поля ввода