These are the topics for week 4:
- Context API
- Global state management
- Connecting state to component
- Client-side routing
- Client-side routing vs. server-side routing
- React-router
- Protected routes with React-router
Your teacher Shriyans has made video lectures for this week's material. You can find them here: Videos 12 - 14
So far you've learned about state and the way to communicate that to other components. This is called passing down props. IT's easy enough to do this if we have only a few components. But what happens if we have a 100 components, and we need to pass a piece of state from the top level to the most bottom component?
This would be very time-consuming and unpractical. That's where the idea of a global state management system comes from.
Instead of having state passed down to each component separately, we put state in one central place called a context. Then we connect the context directly to any component that needs access to state.
If you've ever come across a tool called Redux, this idea might sound familiar to you. Actually, Redux solves a similar problem, but came before the rise of the React
Context API.
The React library gives us 2 hooks that allow us to use context: useContext and useReducer.
Learn more about these hooks here:
Routing traditionally happens on the server-side. Whenever a user goes to a certain endpoint, let's say it's /about a GET request will be send to the server. The server then responds with an HTML page.
In React, however, we're dealing with a Single Page Application. This means that we're never really sending a request to fetch another page from the server; all pages are already included in the initial render of the whole application.
React doesn't offer any routing solution. So we'll have to use a third party library, which is React-Router.
But before we go on, let's first look at the differences between client-side and server-side routing.
It's important to note that client-side routing simulates a page change, but technically no actual page is being changed.
Go through the following to learn more about the differences:
React itself doesn't offer a way to create client-side routing. That's because it's not necessary for a single page application to have.
However, to provide a more complete user experience we can add it. A popular way of doing this is by using the third part library React Router DOM
Check the following resources to learn more about it:
When building React applications, you'll definitely deal with authentication. Every login system of some kind applies this concept.
In terms of routing, this means that some parts of the app will be accessible only to logged in users. We call those areas protected routes.
Go through the following to learn more about them:
Are you finished with going through the materials? High five! If you feel ready to get practical, click here.