Using React Js to create a shopping cart with data from a mock backend (JSON server).
In this Code packet, We will learn how to create a shopping cart using ReactJS.
npm i json-server npm i axios redux npm i react react-redux react-router-dom npm i @material-ui/core npm i @material-ui/icons npm i @material-ui/lab
It contains the data of the shopping items in JSON format.
1. Home page(/)
On this page, we display shopping cart items and cart counter.
2. Cart page(/cart)
On this page, we display the cart items. we can also change the quantity of an item in the cart and delete an item from the cart.
1. Open the terminal and navigate to the folder and enter the following command to run the mock backend(JSON server).
json-server --watch db.json
2. Open a new terminal and navigate to the folder and enter the following command to run the app.
npm start
while running this command you will be asked to change the port. This is because the JSON server runs on port 3000 which is the default port for the app. Press shift+y to allow it to change the port. After compiling, the app opens in the default browser.
Submitted by Pedapati Raja Stuthi Paul (rajastuthipaul)
Download packets of source code on Coders Packet
Comments