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

In this React Typescript Project tutorial, we will build a Product Display and Shopping Cart from scratch. In this first lesson, we start the project and focus on the data contexts and providers needed 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 1

(00:00) Intro
(00:09) Welcome
(00:34) Project Overview
(02:01) Creating the Project with Vite
(04:36) Adding Product Data
(05:12) Components & Context Overview
(06:00) Product Images
(06:39) Products Context
(14:47) Promise, Fetch, useEffect & json-server
(20:47) Cart Context Reducer
(33:36) useCartContext hook
(41:16) Create the Cart Context
(44:10) Cart Provider

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 tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#react #typescript #project