Тёмный

Live Coding a Shopping Cart using React 

Web Dev Cody
Подписаться 234 тыс.
Просмотров 77 тыс.
50% 1

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/cod...
I give credit to:
Toptal Subtle Patterns - for the thumbnail background patterns

Опубликовано:

 

10 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 106   
@miw879
@miw879 3 года назад
11:20 "this is the best react app you have ever seen " ❤ loved that it most definitely is!!
@alexmercer8527
@alexmercer8527 3 года назад
@Forest Aarav did it work ? or it is a scam?
@mattwebbertime
@mattwebbertime 3 года назад
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
@mitchellkasen5889 3 года назад
InstaBlaster.
@danamusetescu668
@danamusetescu668 2 года назад
Thank you @Web Dev Junkie! I was struggling understanding how to handle cart with only state. All the best!
@akhilattractsu7132
@akhilattractsu7132 3 года назад
This is the best react app
@RavindraSingh-lp9pl
@RavindraSingh-lp9pl 10 месяцев назад
@WebDevCody...super helpful video.. please keep posting react machine coding round challenges. Kudos to your effort !!!
@user-vu9dl3vn7l
@user-vu9dl3vn7l 5 месяцев назад
Thank you for your helpful video!
@l3lacksky
@l3lacksky 2 года назад
Thank you for your video. It's very helpful to me for more understanding in React.
@AishNik31
@AishNik31 10 месяцев назад
Thank you so much, it really helped me☺
@novemberPrincess1109
@novemberPrincess1109 4 года назад
Hi,the cart is not showing up for me on clicking the button for the function navigateTO. Please help.Thank You!
@richiecarrasco4235
@richiecarrasco4235 Год назад
This helped me a lot
@gomathim9306
@gomathim9306 2 года назад
You Know,how helpful it was...Thanks Ji... ❤️
@ryanwoods3333
@ryanwoods3333 Год назад
i love your videos
@natnar2218
@natnar2218 3 года назад
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 !!!
@kenansari
@kenansari 4 года назад
Another awesome tutorial! Thank you Cody
@WebDevCody
@WebDevCody 4 года назад
sure thing!
@viniciusm.m.7822
@viniciusm.m.7822 2 года назад
Thanks, man!
@juandiazrodriguez8332
@juandiazrodriguez8332 3 года назад
AWESOME VIDEO. YOU HELPED ME A LOT. THNKS BRO
@codito7388
@codito7388 4 года назад
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
@WebDevCody 4 года назад
Those are some good recommendations! maybe I could just do a part 2 and add those features in?
@codito7388
@codito7388 4 года назад
@@WebDevCody yes good idea.Create a specific component for the cart and put all this functionalities .Something like this ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-731Ur2HGRBY.html 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
@chetanpatil9917 3 года назад
@@WebDevCody waiting for part 2
@virginie971gwada
@virginie971gwada 3 года назад
Thank you from France !!!
@franke3452
@franke3452 2 года назад
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
@WebDevCody 2 года назад
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.
@giorgikiladze1151
@giorgikiladze1151 2 года назад
thank you
@soumenmondal1423
@soumenmondal1423 2 года назад
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
@cathym9803
@cathym9803 3 года назад
Excellent video. Many thanks 👍🏼
@siddheshmhatre2811
@siddheshmhatre2811 3 года назад
thanks boi
@SushmaSwami-ot6pd
@SushmaSwami-ot6pd 9 месяцев назад
In app.js at line 45 only it showing error
@pjguitar15
@pjguitar15 3 года назад
How do you make the cart item not duplicate itself but instead display the quantity of it?
@null-dx7ky
@null-dx7ky 3 года назад
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.
@zeprincelini
@zeprincelini 3 года назад
Thanks a lot for this
@naveenjoe892
@naveenjoe892 3 года назад
nice project, helped a lot.......!
@ridhogenzo1995
@ridhogenzo1995 2 года назад
thanks for ur tutorial, loved it!
@WebDevCody
@WebDevCody 2 года назад
Glad you enjoy it!
@creytaxx
@creytaxx 3 года назад
"lets make it an expensive blanket, 19.99" -actual price on that website 249 lmao
@alexanderson1193
@alexanderson1193 2 года назад
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?
@rohanreddy4049
@rohanreddy4049 3 года назад
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
@varsa1198 3 года назад
if u havent figured it out, use LocalStorage
@kidbrave_7673
@kidbrave_7673 4 года назад
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
@WebDevCody 4 года назад
I’m just displaying and hiding components based on page state variable. I’m not sure I understand your question, sorry!
@kidbrave_7673
@kidbrave_7673 4 года назад
@@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
@WebDevCody 4 года назад
@@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
@kidbrave_7673 4 года назад
@@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
@WebDevCody 4 года назад
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?
@mobinatrzade1059
@mobinatrzade1059 3 года назад
very god
@soltiscd
@soltiscd 4 года назад
Thank you. This is really helpful.
@WebDevCody
@WebDevCody 4 года назад
Glad it was helpful!
@viktoriahakobyan7383
@viktoriahakobyan7383 4 года назад
This is really helpful.Thanks
@WebDevCody
@WebDevCody 4 года назад
Glad it was helpful!
@DaNuker
@DaNuker 3 года назад
Thank you so much!
@rekhavaghela2829
@rekhavaghela2829 3 года назад
Thanks for this . You are great 😊
@WebDevCody
@WebDevCody 3 года назад
You're welcome!
@jameseliyas178
@jameseliyas178 3 года назад
This is amazing tanx
@drapala97
@drapala97 3 года назад
How to make so that when cart.lenght is equal to 0 the button doesn't display the number 0? (14:20)
@WebDevCody
@WebDevCody 3 года назад
{cart.length === 0 ? “” : cart.length}
@SeibertSwirl
@SeibertSwirl 4 года назад
First comment! You got this babe ❤️
@WebDevCody
@WebDevCody 4 года назад
Love you!
@forucookies7526
@forucookies7526 3 года назад
very nice thx!
@MrDC-tp8dy
@MrDC-tp8dy 3 года назад
Thanks boss
@syedafatimaali2128
@syedafatimaali2128 3 года назад
amazing video but it could have been better if you have added the total of the products in it too.
@abrarmajeed203
@abrarmajeed203 3 года назад
How to use Link to go to Product Detail Component . Please share the code
@TheRealEstateInnovator
@TheRealEstateInnovator 3 года назад
Hey great video! I seriously learned a ton when you started explaining the states. What ide is this?
@mattwebbertime
@mattwebbertime 3 года назад
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
@varsa1198 3 года назад
@@mattwebbertime VSC is literally the best, using it since i started with coding
@php6515
@php6515 4 года назад
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
@WebDevCody 4 года назад
Is it a single page app or a server side rendered app? You could store the shopping cart in cookies or localstorage
@php6515
@php6515 4 года назад
@@WebDevCody i am working on react native, it is connected with wocoomerce api
@php6515
@php6515 4 года назад
@@WebDevCody You mean to async Storage?
@WebDevCody
@WebDevCody 4 года назад
@@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
@php6515 4 года назад
@@WebDevCody yes thats aysnc storage! i guess i need to use thanks for the reply
@onyekachigodswill8987
@onyekachigodswill8987 3 года назад
Thanks man but please how i add clear all button on the cart page ?
@WebDevCody
@WebDevCody 3 года назад
I think I cover this functionality in the part 2 I video where I add a clear button
@chazher6470
@chazher6470 4 года назад
awsome
@martiny1785
@martiny1785 4 года назад
How should one go about doing this with a router??
@WebDevCody
@WebDevCody 4 года назад
you'd want to read through these docs: reactrouter.com/web/guides/quick-start
@techienomadiso8970
@techienomadiso8970 4 года назад
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
@WebDevCody 4 года назад
francis kiragu yeah so just use local storage
@techienomadiso8970
@techienomadiso8970 4 года назад
Thank you
@techienomadiso8970
@techienomadiso8970 4 года назад
@@WebDevCody thank you
@egeneral03
@egeneral03 4 года назад
can u share how i would get the total of the items in the cart
@WebDevCody
@WebDevCody 4 года назад
I covered that topic in the video I published a couple of days ago
@timzeynalov3537
@timzeynalov3537 3 года назад
React-Router-DOM
@bilelrahmouni01
@bilelrahmouni01 4 года назад
cool
@venkatkosuri5224
@venkatkosuri5224 2 года назад
Great video ❤️❤️ Can you send me souce code
@borislai9970
@borislai9970 3 года назад
24:35 ~ 24:40 I don't really understand why is do that 😱, sorry..I'm a beginner..
@WebDevCody
@WebDevCody 3 года назад
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
@borislai9970 3 года назад
@@WebDevCody Thanks your answer!
@spondoolie6450
@spondoolie6450 2 года назад
$249.95 for a blanket??? Oh sorry, you were saying something about React?
@nonespecial825
@nonespecial825 2 года назад
20:30
@maryamshahnawaz8842
@maryamshahnawaz8842 3 года назад
on 13:15 you were looking for components
@WebDevCody
@WebDevCody 3 года назад
Awesome! Yeah I forgot to install it on this machine before recording
@maryamshahnawaz8842
@maryamshahnawaz8842 3 года назад
@@WebDevCody Thanks for reply I m working on my react project and constantly watching your video Great help thanks for making this video ✌️👏
@drapala97
@drapala97 3 года назад
11:40 - 12:40 14:00 - 14:20 (note to self :V)
@callmeFernie
@callmeFernie 3 года назад
i went straight here to check your notes and this is exactly what I was looking for
@camo4970
@camo4970 2 года назад
you are going to fast, im lost
@WebDevCody
@WebDevCody 2 года назад
Sorry
Далее
Learn the useContext Hook in React
8:04
Просмотров 692
Apple Event - September 9
1:38:50
Просмотров 25 млн
The Story of Next.js
12:13
Просмотров 575 тыс.
How to Learn to Code FAST (Do This or Keep Struggling)
11:00
My 10 “Clean” Code Principles (Start These Now)
15:12
Build a Shopping Cart With React JS & Stripe
1:16:28
Просмотров 112 тыс.