As I've mentioned many times, this accordion widget that we've put together is part of a larger application.
So now going to take a look at a mockup to help you understand what the larger app is here that we're
trying to build.
All right, though, the accordion is not really going to be necessarily integrated into some larger
functionality.
Instead, what we're really trying to do here is build out an app that has a couple of different widgets
put together.
So we just built one widget, one little reusable component.
We are also going to build out a little widget to show how to do a search and show some results.
We're going to build out another widget that is going to be a little dropdown.
And then finally, we're going to build out another widget that is going to be very similar or pretty
much identical to that language translator app that we put together at the very, very, very start
of the course.
These are going to be four separate pages that don't really have any connection besides the fact that
they're all inside the same app.
The reason that we are putting all these little widgets in the side of the same app is just so we can
well not have to regenerate another project as we work on each additional widget, as we put each of
these little widgets together.
We're then going to eventually wire them all together by using some navigation.
So at the very top of the page, we're going have a list of links that a user can click on to go and
look at the accordion.
The search list, the dropdown and this translate screen right here.
That's the idea.
We're really building four separate widgets that don't have a direct connection to each other.
Now we're going to wire them kind of together using some very simple navigation.
We're going to first focus on building all the widgets by themselves.
And we're going to manually write in some code to toggle which widget is visible on the screen.
So, in other words, as we start the next widget, the search one right here in just a moment, we
are really just going to comment out the code that shows the accordion inside of our app component.
They're going to build each of the widgets first and then put the navigation together at the very end.
All right.
Now, beyond that kind of a higher level, just help you really understand what we're doing here.
The entire goal of this application and these four different widgets is to show you a lot on some different
hooks inside of react to the accordion.
We just made use of the use date.
Look, the next widget we're going to put together, this little search, one right here is gonna make
use of the you state hook and another one called use effect.
After that are dropped down right here is going to make use of you state use effect.
And another one called Use RF.
And then finally, the translate is going to make use of your state effect and rap.
You can see that we're kind of steadily increasing complexity here and we're building on our knowledge
of hooks with each additional little widget.
All right.
Now we understand what we are doing.
Let's take a pause right here.
When we come back, the next video, we're going to start to work on this search widget.