1 Список покупок Сформируйте список покупок в компоненте List. List должен иметь пропс orderList, соответствующий структуре, заданной в List.propTypes.
Элементы списка, у которых поле urgent равно true, должны быть красного цвета. Элементы списка, у которых поле done равно true, должны быть перечёркнуты.
2 Кнопка Like со счётчиком Реализуйте кнопку лайк со счётчиком нажатий. Кнопка должна поддерживать передачу исходного числа лайков через props — initialLikeNumber. По нажатию на кнопку счётчик должен увеличиваться на один. Нажимать на кнопку можно сколько угодно раз.
3 Компонент «Карточка пользователя» Реализуйте компонент «Карточка пользователя», в который через props передаются имя, адрес электронной почты и ссылка на аватар пользователя. Карточка пользователя уже свёрстана в заготовке решения, вам необходимо только «пробросить» значения props в компонент.
4 Компонент для подписки на email-рассылку По нажатию на кнопку выведите с помощью alert сообщение: «Письмо отправлено на адрес: {%email%}», где вместо {%email%} должно быть выведено содержимое инпута.
5 Компонент звёздочки Реализуйте компонент StaredRating — рейтинг из пяти звёздочек. На вход подаётся число-рейтинг (от 1 до 5), в зависимости от которого часть звёздочек остаётся пустыми, а часть — закрашивается.
6 Отслеживание координат мыши Реализуйте вывод на страницу координат курсора мышки в реальном времени. Для этого необходимо в компонент MouseDetector добавить логику по отслеживанию мышки.
Полезная ссылка:https://github.com/SkillfactoryCoding/learn-react/tree/main/src
Паттерны: https://habr.com/ru/post/309422/
Пример работы Route: https://github.com/SkillfactoryCoding/learn-react/blob/main/src/routing/history-api-route.js , https://github.com/SkillfactoryCoding/learn-react/blob/main/src/routing/old-fashion-route.js