DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Simple React Shopping Cart
Alejandro Vivas
Alejandro Vivas

Posted on

Simple React Shopping Cart

Hi all!

For those who are still learning stuff about React (just like me :P), I wanted to share a Shopping Cart example using React Hooks and Context API.

Please, know that this is just an example with basic Shopping Cart functions and not a fully "Store" boilerplate.

Any feedback is appreciated and I hope some of you find this usefull for learning!

GIT: https://github.com/AlexSegen/react-shopping-cart
DEMO: https://react-shooping-cart.netlify.app

You can follow me on Twitter to share more programming stuff.
https://twitter.com/pixelagil/

Thank you!

Top comments (9)

Collapse
 
dajimene profile image
Dario Jimenez

Hello Alejandro I found your shopping cart code which is functional, for this I need to change some changes your guide please

I need the products by facilityid, replace dummyProducts by service, handle errors and implement for React Native ..

Collapse
 
angelhpascual profile image
Angelhpascual

I’m trying to migrate this project to nextjs and when I added cartcontext the error is β€œlocal storage is not defined” can you help me with this? Is urgent coz I have a test for a job. Thank you

Collapse
 
doberman7 profile image
Ivan Rubio

Hi, i'm practicing React developing a Store, for adding the feature of the Shopping Cart I use your implementation as faithful as I could .

But in my implementation, even though my version is almost the same, the "add to cart" button doesn't differentiate between each product.

This is:
1st click affect all the buttons not only the clicked one and the other buttons change to "add more"
each posterior click only adds more products of the 1st one you clicked, ignoring if you clicked another one.

here's the deploy

tienda-de-garage.herokuapp.com/

how you detect that the user clicks on another product??

Collapse
 
monfernape profile image
Usman Khalil

I really like the look of the app. It's simple and minimalistic. However, it takes very long to long probably due to images. Cart look beautiful too.

Collapse
 
binlerdev profile image
Binler

i think you must save all item in the cart into localstore or something else. Because when i refresh page all item in the cart will be lost.

Collapse
 
pixelagil profile image
Alejandro Vivas Author

I just added localstorage persistency. Thanks for comment!

Collapse
 
antonio_pangall profile image
Antonio Pangallo

Hello Alejandro, I would sugget to have a look into: dev.to/antonio_pangall/creating-a-... .

Collapse
 
pixelagil profile image
Alejandro Vivas Author

Hi guys, thank you for comment!

Just to clarify, this is just a very basic example (or boilerplate?) to show you how to use Context API and React Hooks. It's not a fully functional Store.

Collapse
 
moyuriakther profile image
Moyuri Akther • Edited on

can i have your youtube chanel
i want to follow your react cart videos

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await