React счетчик

Цель: создать простой счетчик на React с использованием хуков и обработкой событий.

💡 Подсказка к решению

Для создания счетчика вам понадобится:

Состояние: Используйте хук useState для хранения текущего значения счетчика.
Обработчики событий: Создайте функции для увеличения и уменьшения значения счетчика.
Условная логика: Добавьте проверку, чтобы счетчик не уменьшался ниже 0.
Рендеринг: Отобразите текущее значение счетчика и кнопки для его изменения.

// Пример использования useState
const [count, setCount] = useState(0);
 
// Пример обработчика события
const increment = () => {
  setCount(count + 1);
};

👀 Решение

import React, { useState } from 'react';
 
export default function Counter() {
  // Инициализируем состояние счетчика с начальным значением 0
  const [count, setCount] = useState(0);
 
  // Функция для увеличения значения счетчика
  const increment = () => {
    setCount(count + 1);
  };
 
  // Функция для уменьшения значения счетчика, но не ниже 0
  const decrement = () => {
    if (count > 0) {
      setCount(count - 1);
    }
  };
 
  return (
    <div style={{ textAlign: 'center', margin: '20px' }}>
      <h2>Счетчик</h2>
      <div style={{ fontSize: '24px', margin: '10px' }}>{count}</div>
      <div>
        <button 
          onClick={increment}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: '#4CAF50',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          +
        </button>
        <button 
          onClick={decrement}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: '#f44336',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          -
        </button>
      </div>
    </div>
  );
}

Анализ решения:

Состояние: Используем хук useState для создания состояния count с начальным значением 0.
Обработчики событий: Создаем функции increment и decrement для изменения значения счетчика.
Условная логика: В функции decrement проверяем, что значение счетчика больше 0, чтобы не уменьшать его ниже нуля.
Стилизация: Добавляем базовые стили для улучшения внешнего вида компонента.
Доступность: Используем семантические HTML-элементы и понятные подписи для кнопок.

Описание задачи

Вам нужно создать простой компонент счетчика на React. Компонент должен отображать текущее значение счетчика и предоставлять кнопки для его увеличения и уменьшения.

Ключевые требования:

Начальное значение счетчика должно быть 0
Кнопка ”+” должна увеличивать значение на 1
Кнопка ”-” должна уменьшать значение на 1
Значение счетчика не должно становиться отрицательным

Примеры

// Базовый пример компонента счетчика
<Counter /> // Отображает 0 и кнопки + и -
 
// После нажатия на кнопку +
// Отображает 1 и кнопки + и -
 
// После нажатия на кнопку -
// Отображает 0 и кнопки + и -

Требования

Компонент должен называться Counter
Используйте хук useState для управления состоянием
Реализуйте обработчики событий для кнопок
Добавьте проверку, чтобы счетчик не становился отрицательным
Стилизация компонента приветствуется, но не обязательна

Описание задачи

Примеры

Требования

React счетчик

Описание задачи

Примеры

Требования

🧑‍💻 Это не баг! Это фича!