This assignment will give you an introduction to the React Context API! When I first started learning ReactJS I would spend a lot of time passing state methods between components to allow for more complex component logic based on state. That said there is now a MUCH better way of handling "global" state - the Context API!
By the end of this module you will have learned more about the React Context API and its use in a fully-functional ReactJS application! You will also have implemented the Context API in this project!
-
Review the following materials:
-
Passing Data Deeply with Context
Please read the ReactJS documentation regarding Context. This page covers what Context is and why it's important! Also please read the next page called "Scaling up with Reducer and Context" as well.
-
Here is a really helpful YouTube video regarding the useContext API in ReactJS! In this video by "Atomic Code" you will find a walk-through of the assignment that you are going to be working on this week! Please pay close attention as this will be VERY useful in managing authentication in the front end for your group projects!
-
-
Complete the following tasks:
- Please Clone this repository to your personal machine
- Please update this project so that when you press the "Sign In"/"Sign Out" button from the grand-child component it will change the text in the App.jsx file to "Signed In"/"Signed Out"!
- When you have finished with your work please publish your updated repository to your GitHub profile and pass in your URL!
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh