How to make a shopping cart on React + localStorage?

Question

JavaScript

Good afternoon.
I want your advice on how to make a shopping cart on the site using React and localStorage.

• There is a static table on the page. It is necessary to "fasten" the column with buttons using the script
  
• When adding to the shopping cart, a notification appears about the number of products and a link to the modal window for placing an order
  
• modal window - it's just a form with parameters of added products and fields for user's personal data
  

I did something like this for myself on pure JS here .
Started learning ReactJS. I would like to try on it. But it all looks like a brick to me - from which side would you approach?

I threw a template of how it should be.

Initially, you are interested in breaking down into components and how to connect them?

Answer 1

What exactly is the difficulty?
In the table, you make a link to events in the react component on adding things to localstorage (ls), at the same time, and showing a modal window. The content of the window is taken from ls and nicely parsed into html. Of course, work is underway through state and render.
When you click "checkout", another event is activated, which also shows the already beautifully made window with the finished order.
You can look at working with ls and displaying content in a simple component: https://github.com/DarkScorpion/React-OpenWeather-...
So 3 branches: just strict mode, ES6, Webpack. Choose whichever is easier to understand.
UPD: Added Redux branch. It is just designed for interaction between components on the same page. It is essentially a central state store. This branch is more suitable for solving your problem. Redux is an implementation of the flux architecture, it is worth reading it to better understand the example.