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

Итоги: Состояние и события

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

challenge icon

Задание

Средне

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

  1. Добавьте два независимых состояния: brightness с начальным значением 0 и on с начальным значением false.
  2. Отобразите яркость в теге span с id="level". Кнопка с id="brighter" прибавляет 1 при каждом клике.
  3. Кнопка с id="power" переключает значение on. Когда включено, отобразите <p> с id="status" и текстом Lamp is on; в противном случае выполните render значения null.

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

<!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Формы и поля ввода

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