практика на классовые компоненты

practice tasks

1. Счётчик с кнопками
Создайте классовый компонент Counter, который отображает число и две кнопки: «Увеличить» и «Уменьшить».
При нажатии на кнопки число увеличивается или уменьшается на 1.
Цель: Практика работы с состоянием (state) и обработчиками событий.

2. Переключатель темы
Создайте компонент ThemeToggle, который отображает кнопку для переключения между светлой и темной темой.
Тема должна изменять цвет фона и текста компонента.
Цель: Управление состоянием и применение условного рендеринга/стилей.

3. Таймер обратного отсчёта
Создайте компонент Timer, который отображает таймер, начинающийся с 10 секунд, и уменьшается на 1 каждую секунду.
Когда таймер достигает 0, отобразите сообщение «Время вышло!».
Цель: Использование методов жизненного цикла (componentDidMount, componentWillUnmount) для работы с setInterval.

4. Форма ввода имени
Создайте компонент NameForm с полем ввода и кнопкой. При вводе имени и нажатии на кнопку отображайте приветствие,
например, «Привет, [имя]!».
Цель: Работа с состоянием и обработка событий ввода.

5. Скрытие/показ элемента
Создайте компонент ToggleBox, который содержит кнопку и квадратный <div>.
При нажатии на кнопку квадрат должен скрываться или показываться.
Цель: Управление состоянием и условный рендеринг.

6. Счётчик кликов
Создайте компонент ClickCounter, который подсчитывает, сколько раз пользователь кликнул по кнопке, и отображает это число.
Добавьте кнопку сброса, чтобы обнулить счётчик.
Цель: Практика обновления состояния и множественных обработчиков событий.

7. Генератор случайных чисел
Создайте компонент RandomNumber, который при нажатии на кнопку генерирует случайное число от 1 до 100 и отображает его.
Число обновляется только при нажатии.
Цель: Работа с состоянием и обработка событий для динамического контента.

Советы для выполнения:
Для управления состоянием применяйте this.state и this.setState.
Для обработки событий создавайте методы, например, handleClick = () => {...}.
Для методов жизненного цикла (componentDidMount, componentWillUnmount и т.д.) добавляйте их в компонент при необходимости.