Как сделать корзину покупок на React + localStorage?

Добрый день.
Хочу вашего совета как сделать корзину покупок на сайте с помощью React и localStorage.
  • Есть статическая таблица на странице. Необходимо при помощи скрипта "прикрутить" колонку с кнопками
  • При добавлении в корзину покупок появляется уведомление о количестве товаров и ссылкой на модальное окно для оформления заказа
  • модальное окно - в нем просто форма с параметрами добавленных товаров и полями для личных данных пользователя

Сделал как-то такое под себя на чистом JS тут.
Начал осваивать ReactJS. Хотелось бы на нем попробовать. Но выглядит для меня все это как кирпич - с какой стороны бы подойти?

Накидал шаблон того, как должно быть.
649481ad559440378b5e7ac2c6ea0946.png
Изначально интересует разбивка на компоненты и как их связать?
  • Вопрос задан
  • 3359 просмотров
Пригласить эксперта
Ответы на вопрос 1
Dark_Scorpion
@Dark_Scorpion
В чём собственно сложность?
В таблице делаешь ссылку на события в реакт компоненте на добавления вещи в localstorage (ls), заодно и показывания модального окна. Содержимое окна берётся из ls и красиво парсится в html. Разумееется идёт работа через state и render.
При нажатии "оформить заказ", активируется другое событие, которое тоже показывает уже красиво сделанное окно с готовым заказом.
Работа с ls и отображение содержимого можно глянуть в простеньком компоненте : https://github.com/DarkScorpion/React-OpenWeather-...
Так 3 ветки: просто strict mode, ES6, Webpack. Выбирай любую которую проще понять.
UPD: Добавил ветку Redux. Он как раз предназначен для взаимодействие между компонентами на одной странице. Он является по сути центральным хранилищем состояний. Эта ветка больше подходит для решения вашей задачи. Redux это реализация архитектуры flux, её желательно почитать, чтоб лучше разобраться в примере.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы