React Shopping Cart For Absolute Beginners [2022]

🔥 Watch New Version Of This Course With React 18: • Build & Deploy React 1...
👉 Demo : small-react-cart.herokuapp.com
👉 Code : github.com/basir/react-course...
👉 Q/A. : codingwithbasir.com
Build A Simple Shopping Cart Using Only React For All Levels Web Developers
🔥 Get Complete Course for $14.90 (reg price $149) - LIMITED TIME:
basir.thinkific.com/courses/b...
TABLE OF CONTENT
00:00 Introduction
00:01:08 What You Will Build
00:03:18 Create Basic Components
00:08:53 Create Header
00:10:16 Add CSS
00:13:57 Create Main Component
00:18:06 Render Products
00:24:50 Use State Hook
00:32:10 Show Cart Items
00:35:26 Implement Remove From Cart
00:38:20 Make Cart Summary
00:42:29 Show Cart Badge
00:44:14 Add Checkout Button
00:45:32 Conclusion
YOU WILL LEARN
1. React: Components, Props, Events, Hooks
2. JavaScript Array Methods: filter, find, map, reduce
3. Extracting and Composing Components
4. Passing data and functions between components
🔥 Get Complete Course for $14.90 (reg price $149) - LIMITED TIME:
basir.thinkific.com/courses/b...
#React #Tutorial #Beginner
---
Follow me on:
👉 Website: codingwithbasir.com
👉 Twitter: / basrijd
👉 Linkedin: / basir-j
👉 Github: github.com/basir

[@flpb.7727]

This is one of the best tutorials I've ever seen. Usually you will search for "beginner tutorial on X" and then the guy does not explain the way a beginner can understand. You explain it step-by-step, calmly, with details, talking about the basic stuff a BEGGINER is looking for. Great content and teaching. Thanks!

[@CodingwithBasir]

hello there, thanks for your inspiring comment. I am working on NextJS and VueJS course now and will publish them soon.

[@tanujaiswal5674]

Honestly, I have been juggling from one tutorial to another .Thank God I landed on your tutorial most simplest and best way to explain the functionalities

[@CodingwithBasir]

thanks for your interest and your are welcome.

[@phil5293]

Hands down. Best explained, simplest, most useful React tutorial I've ever seen.

[@CodingwithBasir]

I'm glad you found it useful!

[@soymanus]

You are the best. I've been looking at various tutorials on how to create this but they are all super difficult to understand. You saved me. Thanks a lot.

[@CodingwithBasir]

You're very welcome! To get this course as separated lessons with Q/A, Enroll for free here: codingwithbasir.com/p/free-mern-ecommerce

[@mariapazjelvezherrera9236]

Thank you so much! You helped me a lot! I could add a cart to my restaurant project! And I shared your video with my classmates! They are all very grateful! Cheers from Chile 🇨🇱!

[@AbdulRehman-ui3nj]

I would love to see your restaurent project

[@mariapazjelvezherrera9236]

@@AbdulRehman-ui3nj I recommend you to see it on a laptop or tablet because it is made for tablets!

[@AbdulRehman-ui3nj]

@@mariapazjelvezherrera9236 Yes, But you have not sent me the link yet 😴

[@CodingwithBasir]

hello there, thanks for your interest.

[@Kaiz__]

Almost 2 years later this video is still really useful, thank you :)

[@CodingwithBasir]

hello there, thanks for your interest. I created a new version of this course here: kzbin.info/www/bejne/eXXXgYCIat5jh7c here are the changes in new version: - use bootstrap instead CSS styles in index.css - use context API instead of Redux - use latest version of react, react-touter-dom, mongoose and other packages. - improving the code readability and stability in the new version.

[@martinekjanko6547]

I love it when people add a demo in the description, allows viewers to quickly check if what they're looking for is in the video without having to look through the whole thing. keep up the good work, worth a sub!

[@CodingwithBasir]

I'm glad you liked it! Stay tuned for more content like this

[@jordonmarchesano9219]

Awesome video! Thank you so much. I was searching for days on how to get this functionality properly on my app and this did the trick. Your awesome

[@mad_rabbit27]

I really learned a lot from this video, Thank you so much sir Basir!!! I am now subscribing you, hope to see more of your videos

[@CodingwithBasir]

hello there new course starts on tomorrow. build a self-order kiosk course using react context and materialui.

[@paolasanchez9896]

Thank you very much, this tutorial was the best I could find; I appreciate the effort you put into your videos. Thank you for making this!

[@CodingwithBasir]

Glad it helped! Please ask any coding questions here: codingwithbasir.com/questions/ask/

[@josephuwagwu3069]

Thank you for this tutorial. great content!

[@CodingwithBasir]

You're very welcome!

[@mamaandi1155]

best. Sir please we need more of these tutorials of react. Thanks!

[@CodingwithBasir]

More to come!

[@alkeshsakre747]

I am a beginner who just started learning to react I am grateful to you for providing step-by-step knowledge of how to use it.Thanks a lot

[@CodingwithBasir]

sounds awesome. To get this course as separated lessons with Q/A, Enroll for free here: codingwithbasir.com/p/free-mern-ecommerce

[@yodafr694]

As the greatest, you make it look simple! Thank you very much for this video and for your work, it was very helpful :D!

[@CodingwithBasir]

Glad it helped! for advanced version of this course take this one: please try my MERN course here: kzbin.info/www/bejne/ioOmdaZ4bs5mmKs

[@raisudana]

thank you so much for the lesson! GBU

[@CodingwithBasir]

Glad it was helpful!

[@julian_pp]

Thank you and great job Basir!!!

[@CodingwithBasir]

Our pleasure!

[@ben-cb5er]

Another great content.. Thank you for sharing your knowledge bro

[@CodingwithBasir]

I appreciate that

[@chumaukeagu8228]

Thanks man, this is one of the best tutorial ever

[@CodingwithBasir]

Glad you think so!

[@korekomala5379]

Omg!!!! Really I liked this tutorial. Sir, the way of explanation is awesome. I am able to understand clearly. Thank you!!

[@CodingwithBasir]

Glad it was helpful! Thanks for your support!

[@romankravchenko6287]

thank you! I was stuck on my project for days!

[@CodingwithBasir]

Glad I could help! To get this course as separated lessons with Q/A, Enroll for free here: codingwithbasir.com/p/free-mern-ecommerce

[@romankravchenko6287]

@@CodingwithBasir Hey when I cloned your github, your code is breaking and I cant even view the project. I keep getting this. src\components\Basket.js Line 27:19: 'id' is not defined no-undef Line 27:37: 'id' is not defined no-undef Search for the keywords to learn more about each error. Any Idea why?

[@rajdeeppurkayastha3287]

This is soo well explained. Thank you.

[@CodingwithBasir]

You're very welcome!

[@engrb3696]

Wow! what a wonderful tutorial. You're the best bro

[@CodingwithBasir]

thanks. Please ask any coding questions here: codingwithbasir.com/questions/ask/

[@medenka]

for the first time enjoying coding. ty for the great video.

[@CodingwithBasir]

Please ask this question here: codingwithbasir.com/questions/ask/ I answer it on daily basis.

[@akashrizvi3072]

Best Explanation, simplest and every chapter of this playlist is clearly explained, Most beneficial React tutorial, I highly recommend this tutorial.

[@CodingwithBasir]

hello there, thanks for your interest.

[@CodewithAby]

You are a very good teacher ....You covered a lot in a very short time. Thanks

[@CodingwithBasir]

Glad it was helpful!

[@tttwicetower8195]

Bought all 6 Courses from you in this moment on udemy because i liked your step for step aproach. If you do more react projects can be very small ones, i would buy them all.

[@CodingwithBasir]

Please ask this question here: codingwithbasir.com/questions/ask/ I answer it on daily basis.

[@edu_sdorneles]

Excellent explication! Thank you so much for this video! :D

[@CodingwithBasir]

Glad it was helpful! To get this course as separated lessons with Q/A, Enroll for free here: codingwithbasir.com/p/free-mern-ecommerce

[@wasifraza4927]

I recently saw your channel, It's next level...Loved it.

[@CodingwithBasir]

Thank you so much 😀

[@oykunnazaydn1467]

thank you ! pretty clean and functional code

[@CodingwithBasir]

hello there, thanks for your interest.

[@bhansen316]

Thank you! Very clear and concise directions.

[@CodingwithBasir]

Glad it was helpful! Please watch my courses on Thinkific: basir.thinkific.com Use coupon APR2023 for 90% off.

[@edwinalbeirocaiparamirez9854]

it's great how you handle columns dividing products and items.

[@lokindradangi]

display: flex flex-wrap: wrap

[@CodingwithBasir]

Glad you like it!

[@yuliac.1436]

Great tutorial! Thank you so much !!!

[@CodingwithBasir]

You're very welcome!

[@6977202865]

man, your tutorial is super sick!!!

[@CodingwithBasir]

Glad you think so! watch this one too: kzbin.info/www/bejne/aZy8nHiMfr-BkLs

[@victorassis4392]

Excelent video! Thank you so much!

[@CodingwithBasir]

you are welcome. Please watch my other courses here: codingwithbasir.com/courses

[@jerrysibarani2709]

Thanks bro for the incredible tutorial :-)

[@CodingwithBasir]

My pleasure! Please watch my other courses here: codingwithbasir.com/courses

[@Devdevo467]

The best tutorial. you are the best , thanks

[@CodingwithBasir]

You're welcome! check ts version of this course on my YT channel.

[@sandercastillo9318]

Thank you so much for this React tutorial I learned a lot but I noticed when I resize the window size of my browser to be responsive I noticed that Product(column1) and Basket (column2 ) section does not get responsive unlike from the Header section it does responsive...

[@CodingwithBasir]

to make it responsive you need to set width in flex. check this lesson for it: kzbin.info/www/bejne/ioOmdaZ4bs5mmKs&lc=UgwgKTISZnuAcdJB4vB4AaABAg

[@petsmarket3675]

Easy and perfect thanks Basir

[@CodingwithBasir]

hello there, thanks for your interest.

[@marcoscruz1845]

Muito Obrigado! ! ! sua video aula me salvo s2

[@CodingwithBasir]

Sounds great Try the nextjs shopping cart. It is my last video on my channel

[@mayarabezerra138]

salvou demais, maravilhoso

[@CodingwithBasir]

you are welcome

[@MegaMetallica4ever]

Excellent tutorial for beginners! One question though: How can I implement this in a cart component only, since my cart is a separate page and add to cart button is in the ProductPage? Thanks in advance.

[@CodingwithBasir]

hello there, I implemented separate cart page version of this app in my next.js course. Please check my new course: Build Next 14 E-commerce Website Like Amazon In 4 Hour: kzbin.info/www/bejne/sIiop5V9mbqbiMk

[@islammurat8853]

Thanks for this amazing lesson what if I want put basket in other page like a header ?

[@CodingwithBasir]

hello there, thanks for your interest. Please ask this question here: codingwithbasir.com/questions/ask/ I answer it on daily basis.

[@tornikesharia]

Basir, you are a great man!

[@CodingwithBasir]

thanks.

[@sohampurao]

This video helped me a lot 👍😊

[@CodingwithBasir]

Thanks for your interest. What did you learn from this video? New version of this course using react 18 will be published next week.

[@vijayshankarkattamuri5104]

hello sir, products are not showing on homescreen

[@daniellanciotti8908]

Amazing Tutorial !!... Thanxs🤗

[@CodingwithBasir]

Please ask this question here: codingwithbasir.com/questions/ask/ I answer it on daily basis.

[@ambesapaulos4323]

You are doing a GREAT job please keep it up

[@CodingwithBasir]

hello there, thanks for your interest.

[@gilbertorogel81]

Thank you very much Basir!

[@CodingwithBasir]

You are very welcome. To get this course as separated lessons with Q/A, Enroll for free here: codingwithbasir.com/p/free-mern-ecommerce

[@niteshsahu831]

Thank you so much for such awesome contents

[@CodingwithBasir]

Glad you like them!

[@avishekataur1710]

33:10 Oh! man you saved my assignment , very nice, Thanks

[@CodingwithBasir]

hello there, thanks for your interest. To get this course as separated lessons with Q/A, Enroll for free here: codingwithbasir.com/p/free-mern-ecommerce

[@mehdigeran]

Excellent. Keep it up.

[@CodingwithBasir]

Thank you, I will

[@samahgad241]

thanks it was very helpful

[@CodingwithBasir]

Glad it helped

[@claytonvanderhaar3772]

Hi great work please can you help me how can I add more products below the 1st row

[@CodingwithBasir]

hello there, we use flex to display product divs. to have more products you need to make divs width smaller

[@claytonvanderhaar3772]

@@CodingwithBasir Thanks man I need to implement the cart inside an existing app

[@JahangirKhan-hz7ui]

Thank you for the tutorial means alot

[@CodingwithBasir]

It is possible to implement this using local storage too but that wouldn't be useful in real world projects!

[@abuhanifashowrov2356]

Really Informative and helpful thanks

[@CodingwithBasir]

hello there, thanks for your interest. Please ask any coding questions here: codingwithbasir.com/questions/ask/

[@rythmdrum6]

Excellent video, thanks so much! Any way you could implement Stripe Checkout to this?

[@CodingwithBasir]

hello there, thanks for your interest. Please ask this question here: codingwithbasir.com/questions/ask/ I answer it on daily basis.

[@fernandofernandez3649]

Thanks for this video.

[@CodingwithBasir]

You're welcome!

[@Holaszyd1]

I don't know it just me but I have issues with the createItem.map used in the basket component. It not rendering at all.

[@CodingwithBasir]

clone this repo and go to the small-shopping-cart folder and run npm install and npm start it works. then compare your code with it. To get this course as separated lessons with Q/A, Enroll for free here: codingwithbasir.com/p/free-mern-ecommerce

[@Holaszyd1]

@@CodingwithBasir thanks slots. I think the problem was I did not select any item into the cart basket. That why nothing displayed

[@waleedsharif618]

Excellent ! Could you do this tutorial again but with redux toolkit?

[@CodingwithBasir]

hello there, it is already done here: codingwithbasir.com/p/free-mern-ecommerce

[@mdraihanulislamtomal6064]

Is it possible to use functional component with out using hook?

[@CodingwithBasir]

no it is not.

[@codescratch9434]

This is amazing tutorial sir...i have one question , how to prevent add same product in the cart?

[@CodingwithBasir]

hello there you need to use an if condition in add method to check new item with items in the cart.

[@codescratch9434]

@@CodingwithBasir ok thanks

[@camilomezu5008]

do you think it's necessary to implement redux for a simple e commerce or with props and hooks it's enough ?

[@CodingwithBasir]

with props and hooks it's enough for small project like this.

[@besbn37]

I love you THANKS YOU MUST KNOWWWW !!!!!

[@CodingwithBasir]

You're very welcome!

[@ashrafsaad8666]

does anyone knows how to fix the unknown event error, react basically ignores the onAdd and the onRemove event from the basket

[@CodingwithBasir]

Guess you resolved the issue yourself!

[@sandeepnandanwar5240]

how can we disabled button when add card in the cart and enable it when remove card please help me

[@CodingwithBasir]

hello there,

[@sayalitandel5009]

Thank you!

[@CodingwithBasir]

You're welcome!

[@lahoucine8211]

tbark lah aalik from agadir Morocco

[@CodingwithBasir]

thanks

[@angelzacarias7865]

Muchisimas gracias por tu aporte fue de mucha ayuda.

[@CodingwithBasir]

thanks/

[@IvoooOrtiz]

Hello Basir everything was going very well until this part 25:45, when I add the constant of useState I get this error: Invalid hook call error, I am creating the constant in a component unlike you but the constant products worked well for me, the component did I export as a constant also not as a function will that be? what can i do, thanks

[@IvoooOrtiz]

I think I solved it by doing a function and there I call all the functions and I create the constants in the function that one all does not throw any error and everything works, is it fine then? I wanted to ask you how I do to enlarge everything because it looks very small In my project it is as in the center, and I also wanted to ask you how I can save the purchase data if I change the tab since I add it in the navbar to the cart thanks and sorry for the long message

[@CodingwithBasir]

hello there, sounds good. about "save the purchase data" you need to use localStorage

[@sajjadpvazife1242]

عالی بود بصیر جان😍😍😍

[@CodingwithBasir]

hello there, thanks for your interest.

[@Cagui0623]

does anyone know of a similar video using data and components across multiple pages? Seems to work differently when working with multiple pages.

[@CodingwithBasir]

Please ask this question here: codingwithbasir.com/questions/ask/ I answer it on daily basis.

[@AdlejandroP]

great thank you!

[@CodingwithBasir]

You're welcome!

[@codingbaba672]

Amazing videos concepts are crystal clear but same thing can be done using UseReducer hook ....I want all to give it a try

[@CodingwithBasir]

hello there, thanks, for sure you could use UseReducer. watch this course. I have used UseReducer there to create a blogging system. kzbin.info/www/bejne/mnvGkGOYmJp4iqc&lc=UgyRIZKstyvR9pcFgHF4AaABAg

[@edwinalbeirocaiparamirez9854]

A question how can I add the payment api when you click on pay.

[@CodingwithBasir]

you need to take my mern course to connect to paypal here : kzbin.info/www/bejne/ioOmdaZ4bs5mmKs

[@tttwicetower8195]

How can you make a history of baskets. Like first basket : items bought 2xMAcbook + Time/Date and second basket: items bought: 1xCar and 1x MAcbokk + Time/Date.

[@CodingwithBasir]

check this to get answer: codingwithbasir.com/how-can-you-make-a-history-of-baskets/

[@sosanyaayonitemi2885]

Very nice tutorial, please can we get a link to the pictures uesd for the site?

[@CodingwithBasir]

hello there, links are here: i.picsum.photos/id/180/2400/1600.jpg?hmac=Ig-CXcpNdmh51k3kXpNqNqcDYTwXCIaonYiBOnLXBb8 github.com/basir/react-course-final/blob/master/small-shopping-cart/src/data.js

[@chilly1g]

Thank you very much :)

[@CodingwithBasir]

You're welcome! Please ask any coding questions here: codingwithbasir.com/questions/ask/

[@successandyou7879]

Hello can you please answer me im a beginner, and i faced a probem when i wanted to add more items to the data but they was displayed on the screen all on the same line even though i switched the display of the row from flex to grid i think i made a mistake if anyone can help to learn the trick and thank you an advance

[@CodingwithBasir]

hello there the best way to fix this issue is to compare your code with this style: github.com/basir/react-course-final/blob/master/small-shopping-cart/src/index.css also compare other files with the repo files.

[@varsa1198]

width has to be set to 100% or less then put flex-wrap: wrap; on the container and if items reach end of screen they will break into a new row

[@evgeniy4etok]

thank you good man

[@CodingwithBasir]

You're welcome

[@BreezySenpai_]

I keep getting an error stating "TypeError: Cannot read properties of undefined (reading 'map')" on the main component. Do you know why?

[@CodingwithBasir]

hello there, it means products is undefined. make sure you get the products from data.js correctly.

[@komlanedmondapetogbo9057]

Hello, this is so awesome. Thanks this great job. However am sucked. In Basket, the cartItem doesn't have length property and when I put it, it makes everything desapear in my browser. I mean the browser is blank. Someone should help me out please Thanks PS: am a fresher to react

[@CodingwithBasir]

hello there, thanks for your interest. Please ask this question here: codingwithbasir.com/questions/ask/ I answer it on daily basis.

[@omarselim8902]

I try to implement it with typesript but i get some difflicult issuses with it

[@CodingwithBasir]

I'll be implementing the same project with Typescript in the near future. Sign up here to get early access: www.codingwithbasir.com/courses

[@l3aIIin23]

Great Video!

[@CodingwithBasir]

Glad you enjoyed it

[@pawandeepnain110]

thnku sir for this great work

[@CodingwithBasir]

So nice of you. please watch this one too: kzbin.info/www/bejne/aZy8nHiMfr-BkLs

[@HaiderAli-oi5fm]

At 29:40 I don't get it. You are comparing cartItems id with product id and yet cartItems is empty. Please someone explain it to me.

[@CodingwithBasir]

Hello! We are comparing ids to find out if the product already exists in the cartItems or not! If it does then we just need to increment the qty, if not we need to add the whole product into cartItems. Hope that clarifies any confusion.

[@sumitsinha995]

sir a get into trouble while trying to implement rating component the string template not working , product passed as the props i think both template literal and placholder ($) not working

[@CodingwithBasir]

you code seems right. make it like this to get work: github.com/basir/amazona/blob/master/frontend/src/components/Rating.js

[@sumitsinha995]

@@CodingwithBasir I done sir text as props missing I figured it out thanks sir

[@engineerx4487]

okay am waiting for it .

[@CodingwithBasir]

it is for very beginners.

[@karinarodriguez127]

Super helpful :D

[@CodingwithBasir]

Glad you think so!

[@soroushghatran6196]

دمت گرم بصیر جان

[@CodingwithBasir]

thanks

[@abishek5496]

Instead of using html ,by using bootstrap ,the css styling will get reduced and more responsive app .Got my doubts cleared on hooks,props,array map method,thanks.

[@CodingwithBasir]

Yes, correct. but the focus on this video is on react without any framework. To get this course as separated lessons with Q/A, Enroll for free here: codingwithbasir.com/p/free-mern-ecommerce

[@venkatkadam544]

Hi Basir, for me getting error when passing the products data. can you check it once pls. Uncaught TypeError: Cannot read property 'image' of undefined

[@venkatkadam544]

@Basir

[@venkatkadam544]

@coding with Basir

[@CodingwithBasir]

hello there, it says product is undefined. clone my repo and run it locally. it works.then compare it with yours. link in the description.

[@kacharaseth5725]

great work sir

[@CodingwithBasir]

Keep watching

[@birender_coding]

Which library functions are Used in this project

[@CodingwithBasir]

hello there, thanks for your interest. only react. To get this course as separated lessons with Q/A, Enroll for free here: codingwithbasir.com/p/free-mern-ecommerce

[@Mintirafro]

I am struggling a little because my projet uses class components instead of functional, but things are going smoother than I tought

[@CodingwithBasir]

I highly recommend to learn how to work with functional components as well. I'm glad things are going well

[@mdraihanulislamtomal6064]

i can't publish on heroku. How do u did it. If its possible to create a small video it become helpful. Thanks

[@CodingwithBasir]

in this video I teach you how to upload on heroku. what error do you get there?

[@mostafaahmed-fj8ji]

i have an error when i try to make counter cart items : "Error: Objects are not valid as a React child (found: object with keys {countcartitems}). If you meant to render a collection of children, use an array instead. "

[@CodingwithBasir]

you are rendering an array directly. please clone my repo and run it. then compare it with yours.

[@camo4970]

const onAdd = (product) => { const exist = cart.find((x) => x.id === product.id); if (exist) { setCart( cart.map((x) => x.id === product.id ? { ...exist, qty: exist.qty + 1 } : x ) ); } else { setCart([...cart, { ...product, qty: 1 }]); } }; could you explain with more detail these lines of code please? -why did you put curly braces and the 3 dots before exist x.id === product.id ? { ...exist, qty: exist.qty + 1 } _why did you put brackets and the 3 dots before cart, and why did you put curly after that? setCart([...cart, { ...product, qty: 1 }]);

[@CodingwithBasir]

if (exist) { increase qty. by 1 for existing product } else { add new product to the cart items and set qty to 1 }

[@snowhite414]

Hi. Can you help me make the data from data.js fetch from API? Thank you

[@CodingwithBasir]

hello there, for this purpose watch my MERN course here: kzbin.info/www/bejne/eXXXgYCIat5jh7c

[@snowhite414]

@@CodingwithBasir Hi. Thanks for the quick response but I need your help regarding my assignment. I need to submit it tomorrow. It's just add and delete in react but the data is from my web API. I have that, I need to assign my fetch data to const variable data in data.js. Can you teach me how, please? Thank you.

[@snowhite414]

@@CodingwithBasir Your project is the perfect example, I don't need to change it except the data.js, I need to fetch the data from my web API to data variable. const data = ? export default data;

[@mariamsafarian4017]

عالی هستید شما

[@CodingwithBasir]

thanks.

[@ahmedmameche1759]

when i refresh the page of cart items all products are removed and my cart is empty, any solution please?

[@CodingwithBasir]

check localStorage code to fix the issue. Please ask this question here: codingwithbasir.com/questions/ask/ I answer it on daily basis.