Learn the fundamentals and how to build a ReactJS shopping cart with Typescript, Material UI, Styled Components and React-Query.
This tutorial uses a free open API for dummy data to the items in the shop. React-Query hooks is used for fetching the data from the API.
Styled Components is used in combination with Material UI to customize the styles.
π» Code:
βοΈ Course created by Thomas Weibenfalk. Check out his channel:
—
Learn to code for free and get a developer job:
Read hundreds of articles on programming:
And subscribe for new videos on technology every day:
Hey Thomas. You are always great with these videos. Thanks for creating amazing content and keep up the awesome work. To everyone else, wishing you all the best in 2021.
Thanks, appreciated!
4.8/5 stars for this video. Awesome. Can you please extend this using Context API and useReducer Hooks please ?
Thanks. I’m using react-query in this tutorial so no need for those hooks =)
Excellent video. Thank you for sharing this practical example with the community. Well done!
A very handy tip that I only discovered a few months ago and I’ve been a Linux bash user for > 15 years. Instead of using the command “clear” in bash try CTRL-l (that’s a lowercase L for lemon)
wonderful tutorial! it would be also beneficial for the update of this to add handling variants (e.g size variant selection – S,M,L,XL) & discount rules for the cart ( e.g buy 1 get 1 free, 2 for 3)
Loved it. The implementation of the Redux toolkit would have been even better.
It was amazing and very best for react with typescript. Can you upload more videos on both technologies. Thanks
Great pace, no BS… I love this guy’s style!
That’s amazing, thank you for the lessons, subscribed!
Thank you for this video! very helpful. Would help if you wrote the styling as you showed what it does on the page too. Otherwise it just feels like a line of code whose purpose is unknown
Good one, would be nice to see if you could use other Array method in handleAddToCart and handleRemoveFromCart. Also, a follow up session with use of contextAPI, useReducers and persisting data. As currently the badge loses the data as we refresh the browser
Awesome tutorial, loved it!
Clean, simple code. Great tutorial, thanks!
the awesome tutorial! I started to understand how to use interfaces and types. All thanks to you!
Great tutorial Thomas, let us know when you add other functionalities like discounts etc.
Great tutorial. Only one suggestion, the item.amount which you used might be often refers to the price in some cases. To avoid the confusion you could use the term quantity. For a moment, i thought why amount & price is used together in the cart. It is supposed to be quantity.
Thanks for this tutorial, I loved it! Although you could provide more details about how you do some stuff regarding types, like why you use type instead of interface or the ‘as’ keyword. But all in all it was good, I liked how you explained the reduce method (:
Great tutorial! Thank you for the insights!
Thanks for this tutorial, I loved it!
great tutorial thanks for everything, we are waiting for new tutorials like that