Web Dev Roadmap for Beginners (Free!): [ Ссылка ]
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: [ Ссылка ]
- Master the Coding Interview: [ Ссылка ]
- Junior to Senior Dev Roadmap: [ Ссылка ]
🚩 Subscribe ➜ [ Ссылка ]
📬 Course Updates ➜ [ Ссылка ]
❓ Questions - Please post them to my Discord ➜ [ Ссылка ]
☕ Buy Me A Coffee ➜ [ Ссылка ]
👇 Follow Me On Social Media:
Github: [ Ссылка ]
Twitter: [ Ссылка ]
LinkedIn: [ Ссылка ]
🔗 All Resources for this Typescript Course: [ Ссылка ]
🔗 Playlist for this Typescript Course: [ Ссылка ]
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: [ Ссылка ]
📚 React Hooks tutorials:
🔗 useState: [ Ссылка ]
🔗 useEffect: [ Ссылка ]
🔗 useCallback: [ Ссылка ]
🔗 useMemo: [ Ссылка ]
🔗 useRef: [ Ссылка ]
🔗 useReducer: [ Ссылка ]
🔗 useContext: [ Ссылка ]
📚 Tutorial References:
🔗 TypeScript + React Cheatsheet: [ Ссылка ]
🔗 React Official Website: [ Ссылка ]
🔗 Typescript Official Website: [ Ссылка ]
🔗 Anders Hejlsberg, Creator of Typescript and C# Interview: [ Ссылка ]
🔗 Stackoverflow Survey Results: [ Ссылка ]
🔗 MDN - Static Typing: [ Ссылка ]
🔗 MDN - Dynamic Typing: [ Ссылка ]
🔗 MDN - Type Coercion: [ Ссылка ]
🔗 TS Type Assertions: [ Ссылка ]
⚙ Web Dev Tools:
🔗 Vite: [ Ссылка ]
🔗 Chrome Browser: [ Ссылка ]
🔗 Visual Studio Code (VS Code): [ Ссылка ]
🔗 Node.js & npm: [ Ссылка ]
🔗 Live Server VS Code Extension: [ Ссылка ]
Was this React Typescript Project Tutorial tutorial helpful? If so, please share. Let me know your thoughts in the comments.
#react #typescript #project
React Typescript Project Tutorial | Shopping Cart - Part 1
Теги
react typescript project tutorialreacttypescriptprojecttutorialreact typescript projectreact typescript tutorialreact projecttypescript projectreact typescriptreact tutorialtypescript tutorialreact + typescriptreact + typescript projectreactjsreact jsreact shopping cartshopping carttypescript shopping cartshopping cart projectreact cart projecttypescript cart projectreact ts projectjstypescript reacttypescript react tutorialTs