Используемый стек: React, TypeScript, SCSS, Vite Для реализации SPA также была установлена библиотека React-router-dom (v6).
Ссылка на gh-pages: mindovermattr.github.io/sky
Для того чтобы обосновать выбор определенному способа создания товара в каталоге необходимо описать минимальный функционал приложения, связанный с товаром. У каждого товара, исходя из ТЗ, должна быть кнопка, добавляющая его в корзину. Иными словами, необходимо некоторое хранилище, которое будет аккумулировать в себе всю информацию о товаре и его количестве, а также обновлять состояние хранилища при нажатии на иконку корзины. В React существуют два хука, которые решают эту проблему: useState для обновления и хранения состояния, а также useContext для доступа к самому состоянию и его функции-сеттеру.
Описание товара jsx-ом позволяет придерживаться принципа DRY, а также пользоваться хуками, упомянутыми ранее. Также такой способ ускоряет процесс написания кода и масштабирования приложения (такие карточки можно использовать и в других частях приложения). В случае использования нативного JS приходится написать большое количество Boilerplate кода, следить за добавлением/снятием слушателей события, также при таком подходе больше шансов наткнуться на баги в коде.