All language subtitles for 003 Creating a New React Context_Downloadly.ir_en

To use the context API

I'll create a new folder,

which you don't have to do,

but I wanna store my context related files

my application wide state related files

in a separate folder.

And I'll name the folder store.

Since this contains my state store

for the entire application.

And in store I'll add a new file, which I'll name

notification-context.JS.

This file is all is up to you though the file name.

Now in here we wanna import from react

and we wanna import the create context function

because the goal here is to create a new context,

a new context for managing our notifications.

Now we can provide an initialization object here,

which defines the structure of this context

and the context so does object,

which will also be exposed to the different components

in our application later,

this context should actually have a notification

property let's say,

which is null initially,

but which eventually will be an object with a title,

a message and a status property.

So a nested object.

And besides that, besides that notification property,

I also want to have a method for showing a notification,

the show notification method.

So a property which holds a function,

which initially may be empty.

So which isn't doing anything here

because we'll replace it with a different function

in a different place anyways,

I'm just setting up my base context here

to get better auto completion.

So the data here is really just dummy data in the end.

Still I wanna have a show notification function

and then let's say also

a hide notification function like this.

That could be our context.

And with that all store it in a constant,

the notification context.

And I'll then export this notification context here

to make it a way level outside of this file as well.

So that we can tap into this context

and use this context with the use context react hook

in our react components.

Now you know that the context which we create here

actually allows us to create a component,

a provider a component which we can wrap

around the components and their child components

that should be able to tap into this context.

And therefore I'll actually change this

to an upper case character here.

The N to make it clear that we can get component

out of this thing here.

Now the goal will be to wrap this overall,

content here with our context later.

So to wrap all these components with our context.

However I don't just wanna provide my context like this.

Instead I wanna create a separate component,

which also manages all the context related state.

So back end is notification context

file in the store folder.

I'll not just create a context here and export it.

Instead I'll also create a component in here,

the notification context provider component,

and this component will return

notification context.Provider.

So this component which we can get out of this context

wrapped around props children.

So here I'll wrap it around props children,

and I'm doing that so that

we can use the notification context provider component

to wrap it around our components,

which will then automatically have access

to all our context.

Hence I'll also exports this function.

And now it's this notification context per wider function,

which I wanna wrap around my components,

which should have access to this context.

And in this case that's in the underscore app JS file.

I wanna wrap basically all that content here

with my context.

So here we can wrap everything

with notification context provider

and make sure that you import notification context provider

from this notification context file into store folder.

And then wrap that around all this content,

which means that all these components,

which are wrapped by the provider

will be able to utilize our context later.

And I'm creating this separate wrapper

because this notification context provider function here

will not just wrap props children.

We wouldn't need it for that,

if that would be all it's doing,

but this function should also manage

all the context related state.

So here we will work with use state

and so on to manage the notification state

and to create the show and hide notification functions

inside of this component.

And that's what we'll do as a next step.