React Typescript Project Tutorial | Shopping Cart – Part 2

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

In this React Typescript Project tutorial, we will continue building a Product Display and Shopping Cart from scratch. For the final lesson, we complete the project by creating components for both the shopping cart and the products display.

🚀 Become a full-stack web dev with Zero To Mastery Courses:
– The Complete Web Developer: https://bit.ly/WebDevMaster
– Master the Coding Interview: https://bit.ly/FAANGInterview
– Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr

🚩 Subscribe ➜ https://bit.ly/3nGHmNn

📬 Course Updates ➜ https://courses.davegray.codes/

❓ Questions – Please post them to my Discord ➜ https://discord.gg/neKghyefqh

☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray

👇 Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/

🔗 All Resources for this Typescript Course: https://github.com/gitdagray/typescript-course

🔗 Playlist for this Typescript Course: http://bit.ly/3GcNJ78

React Typescript Project Tutorial | Shopping Cart – Part 2

(00:00:00) Intro
(00:00:10) Welcome
(00:00:36) Project Overview
(00:01:30) Initial Components
(00:03:08) App component
(00:06:18) Header & Nav components
(00:12:48) useCart Custom Hook
(00:15:43) Footer component
(00:18:54) Progress Preview
(00:19:45) Products Data
(00:20:54) useProducts Custom Hook
(00:22:17) ProductList component
(00:28:27) Product component Pt. 1
(00:30:59) Dynamic Images with Vite & React
(00:34:28) Product component Pt. 2
(00:39:34) Products Provider & Cart Provider
(00:41:04) Progress Preview
(00:41:43) Cart component
(00:49:02) CartLineItem component
(01:03:58) Completed Project
(01:05:37) Optimizing Cart Line Items
(01:10:29) Optimizing Products

📚 Suggested Pre-requisites for this Typescript course:
🔗JavaScript for Beginners full course: https://youtu.be/EfAl9bwzVZk

📚 React Hooks tutorials:
🔗 useState: https://youtu.be/yvTGXH7uybA
🔗 useEffect: https://youtu.be/j3vk0FW71DM
🔗 useCallback: https://youtu.be/FB_kOSHk1DM
🔗 useMemo: https://youtu.be/oR8gUi1LfWY
🔗 useRef: https://youtu.be/s6UAuFzL308
🔗 useReducer: https://youtu.be/26ogBZXeBwc
🔗 useContext: https://youtu.be/ngVvDegsAW8

📚 Tutorial References:
🔗 TypeScript + React Cheatsheet: https://github.com/typescript-cheatsheets/react
🔗 React Official Website: https://reactjs.org/
🔗 Typescript Official Website: https://www.typescriptlang.org/
🔗 Anders Hejlsberg, Creator of Typescript and C# Interview: https://dev.to/destrodevshow/typescript-and-c-both-created-by-the-same-person-named-anders-hejlsberg-42g4
🔗 Stackoverflow Survey Results: https://survey.stackoverflow.co/2022/#technology-most-popular-technologies
🔗 MDN – Static Typing: https://developer.mozilla.org/en-US/docs/Glossary/Static_typing
🔗 MDN – Dynamic Typing: https://developer.mozilla.org/en-US/docs/Glossary/Dynamic_typing
🔗 MDN – Type Coercion: https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion
🔗 TS Type Assertions: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions

⚙ Web Dev Tools:
🔗 Vite: https://vitejs.dev/
🔗 Chrome Browser: https://www.google.com/chrome/
🔗 Visual Studio Code (VS Code): https://code.visualstudio.com/
🔗 Node.js & npm: https://nodejs.org/
🔗 Live Server VS Code Extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Was this React Typescript Project tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#react #typescript #project