OK, now let's go to the audience and configure all of the things, all of the components and letters
to the global context inside it.
And let us grab all the components and configure all of them, according to our application.
So let us go to yes.
And here we are in the Middle Ages, and all it will do is first, let us start importing whatever we
need.
So the very first thing we'll do is we'll import the use context and the use of.
Use effect, fact and use context.
Yeah.
And now we'll import all of the components as well, so buttons is already important.
The button and we'll import the import.
Gone down.
Animation from Countdown Animation.
Next, we'll be importing the set set Pomodoro from the set from one component.
And after this, we'll be importing these settings and text from the global context, which is inside
the context world to import.
Things can set context.
From.
Context and settings context.
Cool.
So that is what we actually wanted to do next.
Inside the app function, we will create all of the JavaScript code, which we need help.
So like the use effect and the use context and everything like that.
OK.
So let me create a constant concern of this that will be all of it, like the Pomodoro.
And.
Spellings stay on the rule.
And they will be executing.
Executing start animate and it would be the children.
Will be these dark.
I might.
And there will be the.
Because.
I'm sure there will be the update.
I see to it will be set.
Current climate.
Said, I don't.
Time and these are things important.
Is sittings between now this will be equal to the global context, equal to U.S?
Use context and start of this.
The.
Are things can.
This one?
Well.
You save it to make it a defector.
Okay.
After that, we'll be making use of the use effect hook.
And let me first type it out and then I'll explain what is the use effect?
And this expect to function basically.
So.
All of this.
We'll do.
Is a state.
This one did execute and sort of this phenotype executing.
And all the dependency area will be containing two variables that is the sea cube thing, and the next
is the start.
Animation or animated, sorry, animate other time explaining what is the use context?
OK, and what does it basically to use effect three?
Now, use of fact is used to make the function execute according to a proper condition like.
Inside of this variety function, and it also has a clean up function to just clean up the previous
one.
Now inside of this, we like gala function all we can also write the function.
So here I have quite a function.
Now what it will do is it will execute this function.
Know how many times or at what point of time this.
Function needs to be executed.
What is the condition for this to be executed?
What is the time?
So this is defined by this particular dependency.
Now whatever is the variable inside this that it is one to three, like no matter how many are there,
it doesn't matter.
So the execution of this function depends on the changes happening in this particular variable or these
particular variables.
So whenever these two variables will change, this function will be executed as simple as that.
Now what if we left this dependency empty?
So that simply means that this function needs to be executed only on the like the refreshing of the
page when the page is being rendered, that time when the user opens the website with the benefit of
time, that time this should be executed and then it should not be executed.
This means when the dependency on it is empty.
OK, so the original you understood.
Let's come to the region.
Go inside the written.
Let me first delete everything and write things from scratch.
So here I will write our day with the class name of container.
Cool.
So inside this container, Dave, there will be an H1 tag inside, this will be writing the full moon
total.
Well.
And after that, that will be the small tag because we want to write this text in it and also be.
Productive.
The right.
We.
After this small.
We have a condition.
Like, I'm not a big one.
Homeowners who don't want to know if this is low.
Not true equal to zero.
Then what will happen?
So this question mark and after that, the condition, what will happen to inside of here, we'll ride,
we'll call this component to this sect.
Pomodoro, so this this component, this call now, what if this is not true, what this is false.
So often this will also come up.
Poland, Oregon, Tacoma.
And inside of this, we'll ride our Dave.
So basically.
Inside this do.
There will be unordered list.
So.
Inside Israel, there will be an honorary list with the class name of the class name.
Like as we go label members.
So inside this unordered list that is an ally and DNA is important.
Which burden which we have imported, which we have already created inside the.
Inside the component, this is not the normally steel mill button or not another word.
This is the component with the button component, which we created right here.
This one, and we also importantly, you can see this.
This one is this is this button company.
So now insiders inside the bottom, there will be a title like we are giving the values to the props.
Nothing else.
Work next will be giving the active glass to glass, and that is equal to executing.
Dark.
Active.
Equal equal to.
Work.
And.
That will be the active label.
Or undefined?
That's not true.
This is undefined now after we finish with this.
We will add up, call that function.
So this is the callback callback back and.
It's sequel to.
It's for this group and in fact, at all function.
Inside this, there will be a set cutting timer to work.
Said current time and will pass inside, there's a string that is brought.
OK.
All right.
Let me factor this cold.
After this alive, we will have another ally.
And that will be for these short to be the weekend, basically just copy this a lie and pasted down
here.
We will make some changes.
The title will be short break.
Short break and this will be short.
Deliver on the phone and head, it will be sharp.
OK.
OK, so next, we'll be having the list for the long one.
OK, so the this one is done.
Let me copy this.
And.
After this, we'll be having for the long break, we will ride it, whatever we are doing, we will
ride to will ride.
Instead of shortages will do long, long.
And here it will be long.
And available fame, undefined callback function and started this, that will be long.
OK, so long.
Now, after the list is over, after the unordered list is all, there will be a button.
Now they're just for these settings to open up these settings, OK?
So we'll call the button component, obviously.
But what we call the button.
And inside this, there will be a title.
Which will be equal to.
Settings.
And there's a callback, and this callback will be for these settings button.
This one, right, too.
OK.
Next, we will be having a bag with a class name of diamond container, so we will create that single
day back.
So maybe we can do that in the next do.