In this video.
Let's get started with Context API, how we can create it and how we can use it.
I have created Fresh React application and it is running on Port 3001, so let's go ahead and then implement
that before we continue.
Let's do some housekeeping here.
Inside the app, let's remove everything from this one and let's add h16 context API and let's remove
the CSS from here.
And this is what we are going to have.
Good.
So let's go ahead and create one for the core component.
Inside that we are going to create three components.
That is component A, B and C.
All right.
Components A, component B and then component C.
Next step is that let's create a folder called context.
Great.
So for context, we can create different file based on a type of state.
Let's say that we are developing a blog application.
Definitely we need posts, users comment and many more.
So for this, we are going to create a context for each type of state.
For our case, let's just create one context called user of contact for authentication.
So let's go ahead and create one file for user of context dot JS.
So the logic here is that we are going to create a state which is not part of our component and any
of this component, whether A, B and C that want a particular area from the context that you are going
to create, that component can access a directly with that using what is called Prop trillion.
So let's see how we are going to create that one.
So here we go.
Let me collapse this side by here.
And the first step is we need to bring in the react because we need the context API.
So react from React and what we want is called the create context.
We create context using this hook called create contexts.
So here we go.
We are going to create an instance of create context.
So going to be as export because you may need this one in other component export counts and then going
to be as user of context and is equal to create contexts and that is it.
We are done with the first part.
The second part is that we are going to create a component and that component is going to take any component
that want to have access to a particular state that we are going to create.
So we are also going to export this components as costs and user of provider and the name implies.
This is going to provide a state, a component that need to access it so it's equal to and start.
And here we go.
So because this one going to be a wrapper, meaning it's going to wrap in a component we need to pass
in what is called children.
So this children represent the component that we want to drop.
So here we are going to return just sex.
And here we bring in the user of context, dot provider, uppercase provider and insert.
Here we are just going to inject the children, meaning a component that are going to pass in here.
Great.
So now with this one, we need to pass in addition attribute to the provider and going to be the value.
So this value is going to hold a state that can be accessed in any component.
So let's say that we are going to manage some internal state using you state.
And for this we are just going to keep track of user authentication.
For the meantime, let's use some dummy user here as user and then set user is equal to and for the
user.
Let's pass in some objects and let's say the name is John.
And then the email is going to be as John at Gmail dot com.
So now we have our state so we can pass in here to this value as user and that is it.
So the next question is that how can a component consume this data?
Let's get into that in the next video.