Условие
Пропсы приходят «снаружи» и только для чтения. А вот внутреннее состояние (state) - это динамические данные компонента: текущий счёт, активный слайд, текст в поле. Его меняют через this.setState, а не напрямую. В App.js создайте классовый компонент App с полями points и caption, кнопками управления счётом и контролируемым полем ввода. Сверяйтесь с вкладкой «Результат».
Что нужно сделать
- Создайте классовый App с начальным счётом 0 и подписью «Готов!».
- Добавьте кнопки увеличения, уменьшения и обнуления счёта.
- Сделайте поле подписи, связанное с состоянием, и покажите её на экране.
- Сверьте панель с вкладкой «Результат».
Подсказка для новичка
Пишите код под комментарием // >>> Пишите код здесь <<<. State не меняют вручную - только через setState. Если новое значение зависит от старого, передавайте в setState функцию. Детали API - в «Дополнительной информации».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Счёт, кнопки и подпись
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
class App extends React.Component/const { Component } = React- классовый компонент.constructor,super(props),this.state- инициализация points и caption.this.setState- обновление state (функциональная и объектная формы).render()- метод отрисовки JSX.onClick,onChange,value- кнопки и контролируемый input.handleIncrement/handleDecrement/handleReset/handleCaptionChange- стрелочные методы класса.aria-label,type="button",type="text"- атрибуты UI..score-boardи связанные классы - CSS превью панели счёта.
Пишите код только в
App.js.
Ниже - важные понятия по теме задачи.
Стили превью (CSS)
-
html, body-margin: 0,min-height: 100%,background: #eef2ff. -
body-font-family,padding: 16px,box-sizing: border-box. -
#root-max-width: 360px,margin: 0 auto. -
.score-board- центрирование и padding; уh1- крупный заголовок цвета#312e81. -
.score-board__controls- flex-ряд кнопок с gap; цвета кнопок черезnth-child. -
.score-board inputи.score-board__caption- стили поля и подписи.
Оболочка превью (HTML, не редактируется)
<!DOCTYPE html>,<html lang="ru">,<meta charset="UTF-8" />,<div id="root">.- Ожидается класс
App extends React.Component(или Component после деструктуризации).
this.state
Объект this.state хранит динамические данные компонента.
Инициализируйте его в constructor после super(props):
points: 0,
caption: 'Готов!'.
this.setState
Для счётчика: this.setState((prev) => ({ points: prev.points + 1 })).
Для поля ввода: this.setState({ caption: event.target.value }).
React объединяет новые поля с прежними - caption не пропадёт при изменении points.
Коротко: constructor + state → setState (колбэк для счёта) → кнопки onClick + контролируемый input → «Проверить».