Видеоуроки, интерактивный редактор и сохранение прогресса — бесплатно, сразу после входа.
ВойтиСоздать аккаунт — бесплатноВ этом задании мы познакомимся с состоянием компонента и обработкой событий.
Состояние (state) - это данные, которые могут изменяться со временем. Когда состояние меняется, React автоматически перерисовывает компонент с новыми данными.
Для работы с состоянием используется хук useState. Он возвращает массив из двух элементов: текущее значение состояния и функцию для его обновления.
Например, вот как создать счётчик:
Здесь count - это текущее значение (начальное 0), а setCount - функция для его изменения.
События в React работают похоже на обычные HTML события, но пишутся в camelCase. Например, onClick вместо onclick:
Когда пользователь нажимает кнопку, вызывается функция handleClick, которая может изменить состояние:
Необходимо создать интерактивную кнопку лайка. Создайте два состояния: liked (boolean, начальное значение false) и likesCount (number, начальное значение 42). Реализуйте функцию handleLike, которая переключает состояние лайка - если пост уже лайкнут, убирает лайк и уменьшает счётчик, если нет - добавляет лайк и увеличивает счётчик. Выведите эмодзи ❤️ если liked, иначе 🤍. Добавьте класс "liked" к кнопке, когда пост лайкнут. Покажите сообщение "Спасибо за лайк" с классом "thank-you-message" только когда liked === true.
