Live Coding a Shopping Cart using React

This is a live coding react (reactjs) tutorial for beginners where I program a simple shopping cart feature. If you are looking to learn react, check out this video. Watching a live code is a great way to learn how to program. React is a great library that can be used to build single page applications and web sites. Most web developers know how to use react, vue, or angular, so be sure to watch and learn for yourself.

------------

For those who don't know, I'm a full stack web developer who has been in the industry for over 5 years now. There is a lot of things I have learned along the way and I'd like to share that knowledge with anyone wanting to learn!

like this video if you found it useful and would like to see more videos of the same content.

subscribe to my channel if you are trying to improve your abilities as a web developer, software engineer, or even if you are just learning to code.

Don't forget to turn on those bell notifications!

Book mark these links!

I give credit to:
Toptal Subtle Patterns - for the thumbnail background patterns

[mattwebbertime]

Thank you for this -- your video raises several new questions, but also provided some much needed context onto all the stuff I've seen in the sea of React tuts on YT. You know your stuff and it shows. Also appreciated the humor and rapid delivery. A breath of fresh air!

[danamusetescu]

Thank you @Web Dev Junkie! I was struggling understanding how to handle cart with only state. All the best!

[miw]

11:20 "this is the best react app you have ever seen " ❤ loved that it most definitely is!!

[kenansari]

Another awesome tutorial! Thank you Cody

[llacksky]

Thank you for your video. It's very helpful to me for more understanding in React.

[juandiazrodriguez]

AWESOME VIDEO. YOU HELPED ME A LOT. THNKS BRO <3

[gomathim]

You Know, how helpful it was...Thanks Ji... ❤️

[AishNik]

Thank you so much, it really helped me☺

[RavindraSingh-lppl]

@WebDevCody...super helpful video.. please keep posting react machine coding round challenges. Kudos to your effort !!!

[novemberPrincess]

Hi, the cart is not showing up for me on clicking the button for the function navigateTO. Please help.Thank You!

[alexanderson]

Good video. You completely lost me when separating them out into different pages. Do you have a video on how to add the products up in totals?

[kidbrave_]

Amazing... Amazing...Amazing video you definitely did your thing on this tutorial its hands down the best shopping cart tutorial. I have ever run across but there is one slight question I have about the tutorial is when your creating a new state and function of [page, setPage] how does that let you create a new page from the code you used?. I saw your video a few times.. walk away from it and still can't find the answer beside it was pure magic on how you made that happen. :D

[TheRealEstateInnovator]

Hey great video! I seriously learned a ton when you started explaining the states.

What ide is this?

[codito]

Nice. I would like to see something likes this with more properties, like increae, decrease, add porduct, delete all, delete single product, total amount you understand what i mean.Looking forward for new shopping cart

[soumenmondal]

Hi...your video is very good. also u have make a next part to using local storage and now my request to you to make another next part where if product is added in cart add to cart button text and color will change and also in cart page quantity input field with increment and dincrement you

[natnar]

hi, it didnt letme pass the "product" property in the function of onClick of addToCart, i have try a lot but it didnt work :/ pls some help !!!

[pjguitar]

How do you make the cart item not duplicate itself but instead display the quantity of it?

[abrarmajeed]

How to use Link to go to Product Detail Component . Please share the code