Добавьте к нашему компоненту Tabs динамики, используя useState, и сделайте так, чтобы при активной первой вкладке отображался компонент домашнего задания (из папки components/Homeworks), который в свою очередь будет иметь дочерних компонентов из заданий, размещенных ниже.
1. Добавление и удаление класса CSS (ToggleBgImg)
Сделайте так, чтобы щелчок на картинке удалял CSS-класс background__active из внешнего
, но добавлял класс picture__active к . Повторный щелчок по фону восстановит исходные CSS-классы.
Cтили для background__active - цвет фона - #8B00FF, для picture__active черную границу шириной 5px.
Визуально вы должны увидеть, что щелчок на изображении удаляет фиолетовый фон и добавляет границу изображения. Щелчок за пределами изображения добавляет фиолетовый фон, но убирает выделение границы изображения.
export default function ToggleBgImg() {
return (
<div className="background background__active">
<img
className="picture"
alt="Rainbow houses in Kampung Pelangi, Indonesia"
src="https://i.imgur.com/5qwVYb1.jpeg"
/>
</div>
);
}
(подсказка: при обработке клика по картинке вам вероятнее всего потребуется запретить поднятие события)
2. Исправление компонента, который не обновляется (Clock)
Этот компонент Clock получает два пропса: color и time. Когда вы выбираете другой цвет в поле выбора, компонент Clock получает другой пропс color от своего родительского компонента.
Однако по какой-то причине отображаемый цвет не обновляется. Объясните почему и устраните проблему.
3. Напишите приложение Counter, которое будет иметь возможность изменять прибавляемое и убавляемое число как в образце.
4. Допишите и исправьте сломанный упаковочный лист (TravelPlan)
Этот упаковочный лист имеет нижний колонтитул, который показывает, сколько предметов упаковано, и сколько предметов в целом. Поначалу кажется, что это работает, но на самом деле это ошибка.
Например, если вы пометите предмет как упакованный, а затем удалите его, счетчик не будет обновлен правильно. Исправьте счетчик так, чтобы он всегда был корректным.
Кроме того опишите два недостающих компонента - AddItem и PackingList
Используя спрайт (можно взять с https://nolra.github.io/react_hw/) с 6 кадрами и функцию setTimeout вы должны разработать анимацию прыжка как в образце.
Чтобы решить задачу вам потребуется рекурсивность и глубокое понимание работы работы состояния в компоненте. Разрабатывая это решение думайте о том, как использовать рендеринг react компонента в решении этой задачи.
Code: https://github.com/Nolra/front_course_2023/tree/react-state
Дополнительные материалы для изучения:
Добавьте к нашему компоненту Tabs динамики, используя useState, и сделайте так, чтобы при активной первой вкладке отображался компонент домашнего задания (из папки components/Homeworks), который в свою очередь будет иметь дочерних компонентов из заданий, размещенных ниже.
Описания домашних заданий: (https://nolra.github.io/react_hw/ - state tab)
1. Добавление и удаление класса CSS (ToggleBgImg) Сделайте так, чтобы щелчок на картинке удалял CSS-класс
background__active
из внешнегоpicture__active
кCтили для
background__active
- цвет фона -#8B00FF
, дляpicture__active
черную границу шириной5px
.Визуально вы должны увидеть, что щелчок на изображении удаляет фиолетовый фон и добавляет границу изображения. Щелчок за пределами изображения добавляет фиолетовый фон, но убирает выделение границы изображения.
(подсказка: при обработке клика по картинке вам вероятнее всего потребуется запретить поднятие события)
2. Исправление компонента, который не обновляется (Clock) Этот компонент Clock получает два пропса: color и time. Когда вы выбираете другой цвет в поле выбора, компонент Clock получает другой пропс color от своего родительского компонента.
Однако по какой-то причине отображаемый цвет не обновляется. Объясните почему и устраните проблему.
3. Напишите приложение Counter, которое будет иметь возможность изменять прибавляемое и убавляемое число как в образце.
4. Допишите и исправьте сломанный упаковочный лист (TravelPlan) Этот упаковочный лист имеет нижний колонтитул, который показывает, сколько предметов упаковано, и сколько предметов в целом. Поначалу кажется, что это работает, но на самом деле это ошибка.
Например, если вы пометите предмет как упакованный, а затем удалите его, счетчик не будет обновлен правильно. Исправьте счетчик так, чтобы он всегда был корректным.
Кроме того опишите два недостающих компонента -
AddItem
иPackingList
Необязательная задача: *5. Заставь ее прыгать.**
Используя спрайт (можно взять с https://nolra.github.io/react_hw/) с 6 кадрами и функцию setTimeout вы должны разработать анимацию прыжка как в образце.
Чтобы решить задачу вам потребуется рекурсивность и глубокое понимание работы работы состояния в компоненте. Разрабатывая это решение думайте о том, как использовать рендеринг react компонента в решении этой задачи.
https://pashbespaloff.github.io/react-craftworks/ https://github.com/pashbespaloff/react-craftworks
https://github.com/NastyaKamalova/react_hw#react_hw
https://nastyakamalova.github.io/react_hw/
https://nedostatoksna.github.io/react_homeworks/ https://github.com/nedostatoksna/react_homeworks