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!
Twitter / codylseibert
GitHub github.com/codyseibert/youtube
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!

[@mitchellkasen5889]

InstaBlaster.

[@danamusetescu668]

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

[@kenansari]

Another awesome tutorial! Thank you Cody

[@WebDevCody]

sure thing!

[@miw879]

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

[@alexmercer8527]

@Forest Aarav did it work ? or it is a scam?

[@l3lacksky]

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

[@RavindraSingh-lp9pl]

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

[@gomathim9306]

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

[@juandiazrodriguez8332]

AWESOME VIDEO. YOU HELPED ME A LOT. THNKS BRO

[@cathym9803]

Excellent video. Many thanks 👍🏼

[@user-vu9dl3vn7l]

Thank you for your helpful video!

[@virginiegoubault]

Thank you from France !!!

[@jameseliyas178]

This is amazing tanx

[@soltiscd]

Thank you. This is really helpful.

[@WebDevCody]

Glad it was helpful!

[@AishNik31]

Thank you so much, it really helped me☺

[@richiecarrasco4235]

This helped me a lot

[@DaNuker]

Thank you so much!

[@viktoriahakobyan7383]

This is really helpful.Thanks

[@WebDevCody]

Glad it was helpful!

[@viniciusm.m.7822]

Thanks, man!

[@mohaimensarker]

Awesome tutorial.... It helped me for clearing concept about state

[@WebDevCody]

Glad to hear that

[@naveenjoe892]

nice project, helped a lot.......!

[@ridhogenzo1995]

thanks for ur tutorial, loved it!

[@WebDevCody]

Glad you enjoy it!

[@zeprincelini]

Thanks a lot for this

[@rekhavaghela2829]

Thanks for this . You are great 😊

[@WebDevCody]

You're welcome!

[@akhilattractsu7132]

This is the best react app

[@avetbadalyan]

Thank you! Please add a function so that same items in the cart are collected, like in place of 5 images there is one image with quantity "5"

[@ryanwoods3333]

i love your videos

[@forucookies7526]

very nice thx!

[@SeibertSwirl]

First comment! You got this babe ❤️

[@WebDevCody]

Love you!

[@MrDC-tp8dy]

Thanks boss

[@alexanderson1193]

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?

[@giorgikiladze1151]

thank you

[@siddheshmhatre2811]

thanks boi

[@chazher6470]

awsome

[@TheCarterConnection]

Hey great video! I seriously learned a ton when you started explaining the states. What ide is this?

[@mattwebbertime]

He's using VSCode in this video. While not an IDE, it's a great text editor with tons of plug-ins and is used by many developers

[@varsa1198]

@@mattwebbertime VSC is literally the best, using it since i started with coding

[@soumenmondal1423]

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 button.....thank you

[@novemberPrincess1109]

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

[@kidbrave_7673]

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

[@WebDevCody]

I’m just displaying and hiding components based on page state variable. I’m not sure I understand your question, sorry!

[@kidbrave_7673]

@@WebDevCody I'm sorry for not proofreading my stuff. 😅 I Basically wanted to find out how did the page state allow you to create a new page?. 😏

[@WebDevCody]

@@kidbrave_7673 so let's say your app have 10 different pages, all in their own .JSX components. You can conditionally render only 1 of those "pages" depending on what you set your state variable to. Sorry, idk how else to explain it. There is a string I use in state and depend on if it is set to like page = 'Cart', then I render the page component. \

[@kidbrave_7673]

@@WebDevCody It's totally fine brotha I'm honestly still new to react I been working only with it for about 1 month so I still have a lot to learn but from your explanation, it kinda makes sense right now but I'm sure it'll make more once I do the ending part of your tutorial which is making different components to break the jsx up in the app component you built the whole application inside... a curious question though I been working with react right after I learned a good majority of javascript basics but I'm finding myself leaning on tutorial videos and watching popular features like creating a shopping cart, creating a slide navbar, creating a carousel so I can understand how to build those things but none has come from my own knowledge is there any advice on how I can think for myself on building things and know what to use and grab to create my applications in the near future?. PS: I'm really sorry for the long message I love developing and I want to grow further than a jr.developer but not sure how in my career.

[@WebDevCody]

Most websites contain the same stuff, so I say it’s fine to watch a tutorial to learn these common components. The real challenge is can you build them again without watching a tutorial? Are you actually learning what the video teaches?

[@codito7388]

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

[@WebDevCody]

Those are some good recommendations! maybe I could just do a part 2 and add those features in?

[@codito7388]

@@WebDevCody yes good idea.Create a specific component for the cart and put all this functionalities .Something like this kzbin.info/www/bejne/bWSUhqVofayFeLs the only drawback is that he didn't put add to cart functionality and local storage. We are waiting a cool tut from you.

[@chetanpatil9917]

@@WebDevCody waiting for part 2

[@creytaxx]

"lets make it an expensive blanket, 19.99" -actual price on that website 249 lmao

[@abrarmajeed203]

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

[@bilelrahmouni01]

cool

[@mobinatrzade1059]

very god

[@php6515]

Hi, thanks for the tutorial, what if we are making any application, we have move to different pages, cart will lost its values, what we are supposed to do like we store data in php in sessions so where ever we go we have cart information there ? can we use Context Api there or your this video will work?

[@WebDevCody]

Is it a single page app or a server side rendered app? You could store the shopping cart in cookies or localstorage

[@php6515]

@@WebDevCody i am working on react native, it is connected with wocoomerce api

[@php6515]

@@WebDevCody You mean to async Storage?

[@WebDevCody]

@@php6515 I don't know reactive native, wocommerce, and I have never heard of async storage.... but yes, I'm assuming there is a library that allows you to store the users shopping cart onto their device so that when they come back to the app they still have their items saved.

[@php6515]

@@WebDevCody yes thats aysnc storage! i guess i need to use thanks for the reply

[@onyekachigodswill8987]

Thanks man but please how i add clear all button on the cart page ?

[@WebDevCody]

I think I cover this functionality in the part 2 I video where I add a clear button

[@syedafatimaali2128]

amazing video but it could have been better if you have added the total of the products in it too.

[@natnar2218]

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 !!!

[@pjguitar15]

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

[@null-dx7ky]

Instead of using the .filter() you will have set IDs for each product (like a Database does) then you just compare if it's already on the cart and have a variable on your cart of quantity for each one. Alternatively you could compare them by name, but it'd be a pain the the 4ss + might be unsafe depending on how you set up your pages on react.

[@SushmaSwami-ot6pd]

In app.js at line 45 only it showing error

[@egeneral03]

can u share how i would get the total of the items in the cart

[@WebDevCody]

I covered that topic in the video I published a couple of days ago

[@rohanreddy4049]

But if we refresh the page everytime the products in the cart are getting deleted. How to make the items in the cart deleted only by clicking on remove button but not refreshing the page

[@varsa1198]

if u havent figured it out, use LocalStorage

[@jao4991]

How to make so that when cart.lenght is equal to 0 the button doesn't display the number 0? (14:20)

[@WebDevCody]

{cart.length === 0 ? “” : cart.length}

[@franke3452]

When I add an item to the cart, I m not able to see the items which are added to the cart. It's just showing blank with the two buttons on top.. Could u please help? I have been trying to solve it many times. Couldn't find the solution. I'm sure that my code is correct. idk

[@WebDevCody]

you're going to have to join my discord channel and send me a github link to all your code. It's impossible to help without seeing your code.

[@martiny1785]

How should one go about doing this with a router??

[@WebDevCody]

you'd want to read through these docs: reactrouter.com/web/guides/quick-start

[@timzeynalov3537]

React-Router-DOM

[@venkatkosuri5224]

Great video ❤️❤️ Can you send me souce code

[@techienomadiso8970]

A good video. Much appreciated. But in real world this wouldn't be a good solution because every time you reload the page, your data will be lost/it's not persisted since the data is stored in memory. #### What of use javascript localStorage ??

[@WebDevCody]

francis kiragu yeah so just use local storage

[@techienomadiso8970]

Thank you

[@techienomadiso8970]

@@WebDevCody thank you

[@nonespecial825]

20:30

[@maryamshahnawaz8842]

on 13:15 you were looking for components

[@WebDevCody]

Awesome! Yeah I forgot to install it on this machine before recording

[@maryamshahnawaz8842]

@@WebDevCody Thanks for reply I m working on my react project and constantly watching your video Great help thanks for making this video ✌️👏

[@jao4991]

11:40 - 12:40 14:00 - 14:20 (note to self :V)

[@callmeFernie]

i went straight here to check your notes and this is exactly what I was looking for

[@spondoolie6450]

$249.95 for a blanket??? Oh sorry, you were saying something about React?

[@borislai9970]

24:35 ~ 24:40 I don't really understand why is do that 😱, sorry..I'm a beginner..

[@WebDevCody]

It’s because the remove function is just checking the objects by reference, so if you click remove on a battery, it will remove all the batteries in your cart. So I clone the object so that remove only removed the one we care about

[@borislai9970]

@@WebDevCody Thanks your answer!

[@camo4970]

you are going to fast, im lost

[@WebDevCody]

Sorry