Video Belajar
Tonton dan pelajari berbagai topik menarik melalui video pembelajaran eksklusif dari Channel Dave Gray.
Dave Gray
36222
React Typescript Project Tutorial | Shopping Cart - Part 1
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
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