OK, so now what I've done is I've got the CCIs in this and next door to the CSIS file and now what
we'll be doing is we'll be writing every line of code in this next or two cases.
Of course, I'll be explaining everything from time to time whenever we come across something that is
legit or with this particular file.
OK, so now we are done with the navar.
Next, we'll move on to our context, a global context or one that we need to create a file inside our
entire sea or the source folder.
The file will be renamed as Context Nautilus to this file will be responsive, responsible for holding
the global context of the entire application, right?
Like from here, the the flow of data and exchange of things, and basically to communicate it will
help to communicate one component to the other.
So that is like basic functionality of a global context.
So we've got these things in order, so we will get the.
The basic boilerplate code with that extension, which I showed you, so that will be a f c.
And OK, so this is the snippet.
The basic chord.
And now what we'll do is we'll import import some of the.
Pings from React, the first thing which will import to the to hook.
You state and second will import the EU's context.
OK.
And next, we'll be.
We'll be working on using producer as well and the use effect hook as well.
But as of now, let me just work with you straight and news context.
Of course, we'll be doing the reducer part and we'll learn how to use the user to do, said Hogan.
How to replace you stayed with the organization, which is the use of their new The Hook.
So now that we've imported all of this?
Let us move further.
And now what we'll do is we'll create a file that will contain all of our dummy data.
So because before getting things from the EPA, what I'm going to do is I'm going to teach you how to
fetch data from like local local data.
So for that, we need a dummy data and that will stored in another file and we'll name it, data Dark
Ages.
So this file will contain.
All the damage done, so, OK, so this is our data and this will be using as of now in our application.
So this contains an I.D. and a title.
This is the title of the product and this is the price and the price of the product.
And it's a pneumatic integer value and an image so that the images are stored in this media and in this
product product folder.
And this is the amount.
So this is also an integer value.
So basically, this title is the only value to the string and added to everything in digital value.
And this image is a file.
OK, so now let us make use of this data in our global context.
So what we'll do is, first of all, we'll import the data, so we'll import.
Maybe cart items because.
You can name it like God items, because there is only one default export, so like we can give any
name.
So we'll be naming it as guard items from eight to.
Cool enough.
OK, next, what we'll do is we'll create a context now, and this will be a global context.
So we'll name it as our context.
Context and how you can also write like the yak dot, create context, or you can just write, create
context, be heard and text.
This will work because maybe we have to like it like we have been imported from the Act.
If you want to write, just create context.
And if it's just one line of code, and if you're just using it for just one time, then you can if
you want to.
Basically, if you want to avoid importing, what are you going to do is you can just try to dot create
content so you you don't need to imported from react.
Yeah, or either of the thing which you think is convenient for you.
You can do that, which is like, easy for you to understand.
OK, next, we have we want to make an app provider, so.
We need the providers of concert.
Pro fired up.
And.
This will be a function basically and will expect a prop.
So the props will be named as children.
And we create a federal function here and inside this federal function, what we do is.
We.
Basically, this is this function like this was given to us from this from that extension, right?
Boilerplate code, but we are naming it as app provider.
Or.
All we can create another function also, so it totally depends on us, like naming is not the problem.
So next inside the app provider, what we'll do is we'll create a state.
OK, so that will be named as God, and the function would be dimness third card.
Next, U.S.
State.
And will provide initial value for this.
OK, so that will be carte items.
But items?
OK.
Next, what we'll do is we'll provide a written statement for this function.
So after the U.S.
After we are done with creating the new state.
Will return, and what will return is the app provide a context for providers.
Fintech start.
Provided there are many different ways you can do this, and now we want to pass a value inside this
particular component.
So the value will be and.
Object.
It can be called.
As of now, just got.
And.
This will close here and this expect are closing back basically for up.
Contacts.
This is closer to.
And that is some air.
And maybe this is you don't need this coal mining.
Inside this provider, will.
Pass prop.
It was the children, not the cart items, the children.
OK.
So.
There is some problem here.
So what we did is that we mistakenly provided the curly braces after that are done, so there should
be the parentheses.
And then it would be a little better to inside this, we want to pass the children, not the cart items,
basically.
So that would be the children which is being passed inside this app provider function right here and
here.
Also, we need to provide the dart provider.
Right now, it's complete.
OK, next, what we want to do is we want to create a global context, OK?
So for that, we need to create another function.
So.
Let me delete this boilerplate code, which we got from that extension.
So we'll now we'll create a function that will be let us export it online only.
So that will be used global context.
So this is the basic convention.
This is how you create a custom things, but you can obviously you can name anything you want.
But this is easy to understand why while debugging this plays an important role.
And when you share your code with someone, these naming conventions play a great role in making that
person or not standing your code or.
To be honest, people say or do you you?
You have to like you can use the handle naming conventions, which are common in the community that
helps it in like sharing your code and the person who is reading your code understands it in a better
way.
OK, now we want to export all all that to function to you, create or to export.
And if there are more than one export and component, we write it inside the curly braces.
Same goes with the importing.
Also, if they're importing something and there are multiple exports that from where we're importing
so that then also you need to do the same.
The that will be the app providers and the.
That said, and did we miss something out?
As of now, nothing.
That's it for the context.
OK, so that's it for the context.
Next, we'll be working on.
Some other things.