В этом задании мы разобьём карточку товара интернет-магазина на логические компоненты.
Карточка товара - это сложный UI элемент, который содержит несколько независимых частей: галерею изображений, информацию о цене, селектор количества, кнопку покупки и описание.
Когда все эти части находятся в одном компоненте, код становится длинным и трудным для понимания. Каждая часть имеет свою ответственность и может быть выделена в отдельный компонент.
В нашей карточке товара можно выделить:
Галерея изображений - главное изображение и миниатюры
Информация о товаре - название, цена, рейтинг
Селектор количества - поле ввода для выбора количества товара
Кнопка добавления - кнопка с состоянием (обычное/добавлено)
Описание товара - текстовое описание с заголовком
Передача состояния и обработчиков - важно правильно распределить, где хранить состояние. Если состояние нужно нескольким компонентам, оно остаётся в родителе. Если состояние нужно только одному компоненту, оно может храниться внутри него.
Задание
Необходимо разбить монолитную карточку товара на независимые компоненты. Создайте компонент ProductGallery, который принимает images (массив изображений), currentImage (текущее выбранное изображение) и onImageSelect (функция выбора изображения). Он отображает главное изображение и миниатюры. Создайте компонент ProductInfo, который принимает name (название), price (цена) и rating (рейтинг). Он отображает базовую информацию о товаре. Создайте компонент QuantitySelector, который принимает value (количество), onChange (обработчик изменения), min и max (ограничения). Создайте компонент AddToCartButton, который принимает isAdded (добавлено ли в корзину), onAdd (функция добавления) и disabled (заблокирована ли кнопка). Создайте компонент ProductDescription, который принимает description (текст описания). В компоненте App оставьте управление состоянием (currentImage, inCart, quantity) и композицию всех компонентов.
