In this video, Emmanuel Henri goes through the base project that is used in this course to work with the context.
- Okay, so let's quickly explore the content of this particular project. What is inside that project? The first thing I want you to do is go to the public folder and then click on index. So, the first thing we have in this project is materialize. We have materialize loaded as the styles of this project. Sorry, if you don't see any styles in this project or just the one file, so the App.css here, that's the only styles that we're applying besides materialize. If you want to switch to something else or you want to make changes to the css, feel free to remove this. Now, let's go into the source and then first, take a look at atl js. So, as you can see what we are doing is creating a state where we are creating some items here. I'll type everything and query property that we're passing down to our news component here. Then we go into the news folder and go to the news, and now we are creating the url with the props that we've passed. So, we can actually return a query to the news api. This is an api that we can grab the most recent news and I've passed some items here inside of the url to do a query and then return it inside of that particular new single item here. We have the news that is returned and then has many times we have news items here and I believe if I am correct, we are pulling about ten items out of that news or it's returning ten items. Then, we are returning that with a new single and then passing again some stuff here into the new single and then rendering this functional component with all the items that we're passing down. This is what makes the application that you've seen in the last video. So, basically, the one area that we're not going to change and this is where the context api would not be a good idea is the data that we're passing down like that. So, we're passing down this thing here and then creating a link in there with the props that we're passing and then returning a new item here. This is not something that would be global and we don't need to quite change the way the components are structured right now. What we are going to do is pass different items inside of this application. This is an overview of this application. If you want to take a look at the css afterwards, these are some changes that we've made, but again, this is not a styles or css course. This is about learning about context api's, We are not going to do any style changes in this course. This is a brief introduction to the application and we are going to start working on the context api starting next.
- Creating a context object
- Implementing the code for updating context
- Updating context from a nested component
- What to avoid when working with context
- How the node tree in React applies to context
- Consuming multiple contexts