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

Learn State Management in React with this Context API tutorial and the useContext hook. React JS allows us to drill props through components, but we can avoid this with the Context API and the useContext hook.

Subscribe https://bit.ly/3nGHmNn

This lesson is part of a Learn React tutorial series playlist:
https://youtube.com/playlist?list=PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp

Project Source Code: https://github.com/gitdagray/react_context

State Management in React | Context API Tutorial | useContext hook

(00:00) Intro
(00:05) Welcome
(00:13) Quick Overview
(01:05) Creating Context
(03:54) Adding the DataProvider
(05:03) Moving State and Logic to Context
(07:21) Refactoring Header with useContext
(10:21) Refactoring Nav with useContext
(11:53) Refactoring Home with useContext
(14:42) Refactoring NewPost with useContext
(17:21) Refactoring EditPost with useContext
(19:30) Refactoring PostPage with useContext
(22:00) App component clean up
(23:04) Does it all need to be in context?
(24:37) Component state vs shared state with context
(26:17) Refactoring component states while keeping shared state in context

Rules of Hooks:
https://reactjs.org/docs/hooks-rules.html

Collections of Hooks:
https://nikgraf.github.io/react-hooks/
https://www.npmjs.com/package/react-use

Axios:
https://www.npmjs.com/package/axios

React Router:
https://reactrouter.com

JSON-Server:
https://www.npmjs.com/package/json-server

ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Styled Components: https://styled-components.com/

References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(JavaScript_library)
React Jobs: https://www.ziprecruiter.com/candidate/search?search=react&location=

Follow Me:
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/DaveOnEleven

Was this tutorial about the React Context API and useContext hook helpful? If so, please share. Let me know your thoughts in the comments.

#react #context #useContext