Context API React + Typescript | useContext & useReducer Examples
23.3 هزار بار بازدید -
2 سال پیش
-
Web Dev Roadmap for Beginners
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Learn how to use the Context API with React + Typescript. This tutorial provides examples with useContext, useReducer, and custom React hooks. The React Context API is your first step towards global state management.
🚀 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 ➜ Discord: discord
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: Twitter: yesdavidgray
LinkedIn: LinkedIn: davidagray
🔗 All Resources for this Typescript Course: https://github.com/gitdagray/typescri...
🔗 Playlist for this Typescript Course: http://bit.ly/3GcNJ78
Context API React + Typescript | useContext & useReducer Examples
(00:00) Intro
(00:08) Welcome
(00:30) Starter Code
(00:56) Extracting initial state & types
(03:52) useCounterContext hook & type
(08:27) Create Context with initial context state
(11:43) Context Provider
(16:32) useCallback
(18:07) Applying the Provider
(19:40) Custom hooks to deliver context
Corrections:
(12:42) Spreading the ...initState into the Provider parameters is not really necessary. It does help document but really just creates extra boilerplate. You can pull it in from the lexical scope of the Provider since both are defined in the same file. This will also eliminate the need to use the initState in the App component. initState will simply be passed to useCounterContext in the Provider value.
📚 Suggested Pre-requisites for this Typescript course:
🔗JavaScript for Beginners full course: JavaScript Full Course for Beginners ...
📚 React Hooks tutorials:
🔗 useState: Avoid this React State Mistake | Reac...
🔗 useEffect: React useEffect Hook tutorial | Learn...
🔗 useCallback: useCallback STOPS this React MISTAKE ...
🔗 useMemo: useMemo Explained | React Hooks useMe...
🔗 useRef: BUILD a React Timer with useRef | Rea...
🔗 useReducer: useReducer is BETTER than useState | ...
🔗 useContext: State Management in React | Context A...
📚 Tutorial References:
🔗 TypeScript + React Cheatsheet: https://github.com/typescript-cheatsh...
🔗 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/typescri...
🔗 Stackoverflow Survey Results: https://survey.stackoverflow.co/2022/...
🔗 MDN - Static Typing: https://developer.mozilla.org/en-US/d...
🔗 MDN - Dynamic Typing: https://developer.mozilla.org/en-US/d...
🔗 MDN - Type Coercion: https://developer.mozilla.org/en-US/d...
🔗 TS Type Assertions: https://www.typescriptlang.org/docs/h...
⚙ 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/...
Was this React Hooks + Typescript useContext / Context API tutorial helpful? If so, please share. Let me know your thoughts in the comments.
#context #react #typescript
Learn how to use the Context API with React + Typescript. This tutorial provides examples with useContext, useReducer, and custom React hooks. The React Context API is your first step towards global state management.
🚀 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 ➜ Discord: discord
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: Twitter: yesdavidgray
LinkedIn: LinkedIn: davidagray
🔗 All Resources for this Typescript Course: https://github.com/gitdagray/typescri...
🔗 Playlist for this Typescript Course: http://bit.ly/3GcNJ78
Context API React + Typescript | useContext & useReducer Examples
(00:00) Intro
(00:08) Welcome
(00:30) Starter Code
(00:56) Extracting initial state & types
(03:52) useCounterContext hook & type
(08:27) Create Context with initial context state
(11:43) Context Provider
(16:32) useCallback
(18:07) Applying the Provider
(19:40) Custom hooks to deliver context
Corrections:
(12:42) Spreading the ...initState into the Provider parameters is not really necessary. It does help document but really just creates extra boilerplate. You can pull it in from the lexical scope of the Provider since both are defined in the same file. This will also eliminate the need to use the initState in the App component. initState will simply be passed to useCounterContext in the Provider value.
📚 Suggested Pre-requisites for this Typescript course:
🔗JavaScript for Beginners full course: JavaScript Full Course for Beginners ...
📚 React Hooks tutorials:
🔗 useState: Avoid this React State Mistake | Reac...
🔗 useEffect: React useEffect Hook tutorial | Learn...
🔗 useCallback: useCallback STOPS this React MISTAKE ...
🔗 useMemo: useMemo Explained | React Hooks useMe...
🔗 useRef: BUILD a React Timer with useRef | Rea...
🔗 useReducer: useReducer is BETTER than useState | ...
🔗 useContext: State Management in React | Context A...
📚 Tutorial References:
🔗 TypeScript + React Cheatsheet: https://github.com/typescript-cheatsh...
🔗 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/typescri...
🔗 Stackoverflow Survey Results: https://survey.stackoverflow.co/2022/...
🔗 MDN - Static Typing: https://developer.mozilla.org/en-US/d...
🔗 MDN - Dynamic Typing: https://developer.mozilla.org/en-US/d...
🔗 MDN - Type Coercion: https://developer.mozilla.org/en-US/d...
🔗 TS Type Assertions: https://www.typescriptlang.org/docs/h...
⚙ 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/...
Was this React Hooks + Typescript useContext / Context API tutorial helpful? If so, please share. Let me know your thoughts in the comments.
#context #react #typescript
2 سال پیش
در تاریخ 1401/10/02 منتشر شده
است.
23,308
بـار بازدید شده