Build a Shopping Cart with React and TypeScript - Tutorial

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.

--

[rishadomaraux]

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)

[SathishKumarsoftsathish]

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.

[ktthompson]

thank you as an african american female...I may not every EVER be able to use this but the fact that yall make hour long videos to provide this VITAL information for everyone is good and is a blessing in disguise that many dont take advantage of.

[andrijavranic]

Great pace, no BS... I love this guy's style!

[cannabisanomaly]

Thank you so much for the awesome tutorial, Thomas! I learned a TON of stuff, in regards to types and TypeScript as a whole. As a CSS fanatic, I need to point out that in the CartItem.styles.ts file, the better option would be to use object-fit: contain, like this:

img {
max-width: 90px;
object-fit: contain;
margin-left: 40px;
}

Literally the only nit-pick I have, in what is otherwise a great and comprehensive tutorial! 👏👏

[tatemo_labs]

This is very useful, Thomas. In one hour!.
Thank your for sharing it.

[relisalazar]

At the end I add a funny thing to the total on the cart that makes to don't render it when we don't have any item:

{calculateTotal(cartItems) > 0 ? (
<h2>Total:
) : null}

[alejomakevids]

I really enjoyed how you explained things in here. Nice video

[ashwin]

Idk y but this is far better than my online course😂

[MiSt]

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 (:

[wesleysantos]

My Grid item is displayed without border radius style. Why? ''/

[admondtamang]

Loved it. The implementation of the Redux toolkit would have been even better.

[admiralrodney]

TS is Love, TS is life!
Btw, is that Les Paul?

[Shadwmh]

the awesome tutorial! I started to understand how to use interfaces and types. All thanks to you!

[nelsonx]

Excellent video. Thank you for sharing this practical example with the community. Well done!

[MaxProgramming]

Thomas again! Let's go. I guessed it's Thomas when I saw React with ts

[jardelbordignon]

Clean, simple code. Great tutorial, thanks!

[manojSatyanarayana]

4.8/5 stars for this video. Awesome. Can you please extend this using Context API and useReducer Hooks please ?

[sarcasticdna]

Come on guys Thomas deserves a sub and thumbs up.
as a student of fcc lets shower loves on his channel. ❤

[CodingNuggets]

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.