In this video.
Let's get started with use reducer.
Because of that, we are going to build a simple to do application to demonstrate use reducer.
So let's see the demo for this project.
If I add to do for example, go shopping and I hit enter, you can see that I have the number of to
dos and let's say studying and I hit enter you can see that I have the list of to dos and this data
are persistent using what is called low cost storage.
So even if I refresh my page, I still have mine to dos.
When I click on Delete, it's going to remove the data from the low storage.
So this is what we are going to build using use reducer.
So if understand what you are going to do, then you are ready to build large applications using React.
So back to business.
So we are continuing from the previous video.
So we are going to move this component and start with our new concept called use reducer.
In your case, we can make some duplicate for future references.
So let's go ahead and do some housekeeping here inside the app.
I'm going to remove this component from here and this component from here passing see components.
And inside the components.
Let me remove all waiting for me here and let me start from clean sheet go away.
And for the context to let me remove the context to our application, we'll crash and add an index where
we are requiring let me remove it from here or so and this one for me here and let's save it now.
Everything is back to normal.
So first is let's go ahead and then create the form component called add to do.
So let's go ahead and then create one component for that.
So inside here I'm going to create one component called ADD to do DOT JS because this action is really
about CSS.
I'm going to copy my CSS for it and I'll provide as a resource attached to this particular section.
So this is mine to do CSS.
So let's go ahead and then create the RTT component.
So here we go for this.
We are going to keep track about the title only.
So let's bring in the you state to manage in ten states.
So here const and then title and then set title great is equal to use state by default is empty.
So here let's add our form.
So I'm going to have some fragments and inside I'm going to add the form element and I'm going to have
one input and a button.
So we impute with a value core title and then on change it doesn't exist yet, but we'll create it very
soon.
I'll start.
So let's go ahead and then create that one here quickly const hand over title change and it's going
to be a function great.
So for a hand with change and it's going to set the title to E or target dot value going to be as E
to target dot value.
So why is not okay, something is equal to this.
All right.
Next is our button to submit or add add to do.
All right.
And let's give it a type or submit.
Let's go ahead and then render this component inside the app.
Great.
Let's remove this one and put it inside a fragment and add the art to save it.
And now let's check in the browser and this is what we have.
So let's go to the to do and let's bring in the CSS.
What to do.
Dart, CSIS, save it and let's see if we're going to have the effect.
And here we go.
Now we have the act to do.
The next component that we need is going to be list of to do so.
Let's go ahead and then create that one.
Also quickly here inside the components is going to be the to do list towards is also I'm going to bring
in the CSS for the to do list.
Well, the CSA is going to be optional because you want to focus on the actual logic.
All right.
So inside it to do list here, let's scaffold the components and here we go for this one.
I'm going to have a parent, Dave, going to be at the to do list container.
And then inside I'm going to have one day.
It's going to be the to do item.
So here with a class name of to do dash atom dash container.
Great.
And inside I'm going to have H three and then I'll add a title here, say to do one and a button for
delete and you're going to be as delete.
All right, let's save it.
Now, let's get back to the main app here or before we save it, let's bring in the case.
Let's save it.
And now, let's see.
Well, we need to mount it inside the app component.
I'm going to be asked to do list here and let's add it below this one as to do lists, save it.
And this is what we have.
Great.
So now we are done with the structure of our entire application.
Then this video.
Let's get started with the main concept by talking about create context and then use reducer.