1
00:00:00,700 --> 00:00:05,470
As I've mentioned many times, this accordion widget that we've put together is part of a larger application.

2
00:00:05,900 --> 00:00:10,480
So now going to take a look at a mockup to help you understand what the larger app is here that we're

3
00:00:10,480 --> 00:00:11,140
trying to build.

4
00:00:12,110 --> 00:00:17,360
All right, though, the accordion is not really going to be necessarily integrated into some larger

5
00:00:17,360 --> 00:00:18,050
functionality.

6
00:00:18,140 --> 00:00:22,880
Instead, what we're really trying to do here is build out an app that has a couple of different widgets

7
00:00:22,880 --> 00:00:23,480
put together.

8
00:00:23,960 --> 00:00:27,530
So we just built one widget, one little reusable component.

9
00:00:28,250 --> 00:00:33,560
We are also going to build out a little widget to show how to do a search and show some results.

10
00:00:34,220 --> 00:00:37,160
We're going to build out another widget that is going to be a little dropdown.

11
00:00:37,820 --> 00:00:41,780
And then finally, we're going to build out another widget that is going to be very similar or pretty

12
00:00:41,780 --> 00:00:47,030
much identical to that language translator app that we put together at the very, very, very start

13
00:00:47,030 --> 00:00:47,630
of the course.

14
00:00:48,410 --> 00:00:52,910
These are going to be four separate pages that don't really have any connection besides the fact that

15
00:00:52,910 --> 00:00:54,200
they're all inside the same app.

16
00:00:54,890 --> 00:00:58,910
The reason that we are putting all these little widgets in the side of the same app is just so we can

17
00:00:58,940 --> 00:01:04,910
well not have to regenerate another project as we work on each additional widget, as we put each of

18
00:01:04,910 --> 00:01:06,050
these little widgets together.

19
00:01:06,140 --> 00:01:10,460
We're then going to eventually wire them all together by using some navigation.

20
00:01:11,750 --> 00:01:15,780
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

21
00:01:15,780 --> 00:01:16,830
look at the accordion.

22
00:01:17,180 --> 00:01:20,880
The search list, the dropdown and this translate screen right here.

23
00:01:21,930 --> 00:01:22,590
That's the idea.

24
00:01:22,710 --> 00:01:26,760
We're really building four separate widgets that don't have a direct connection to each other.

25
00:01:27,170 --> 00:01:31,230
Now we're going to wire them kind of together using some very simple navigation.

26
00:01:32,890 --> 00:01:35,800
We're going to first focus on building all the widgets by themselves.

27
00:01:36,070 --> 00:01:40,480
And we're going to manually write in some code to toggle which widget is visible on the screen.

28
00:01:40,930 --> 00:01:45,250
So, in other words, as we start the next widget, the search one right here in just a moment, we

29
00:01:45,250 --> 00:01:49,540
are really just going to comment out the code that shows the accordion inside of our app component.

30
00:01:50,030 --> 00:01:54,030
They're going to build each of the widgets first and then put the navigation together at the very end.

31
00:01:55,600 --> 00:01:56,080
All right.

32
00:01:56,390 --> 00:01:59,980
Now, beyond that kind of a higher level, just help you really understand what we're doing here.

33
00:02:00,250 --> 00:02:04,840
The entire goal of this application and these four different widgets is to show you a lot on some different

34
00:02:04,840 --> 00:02:07,600
hooks inside of react to the accordion.

35
00:02:07,900 --> 00:02:09,480
We just made use of the use date.

36
00:02:09,740 --> 00:02:14,290
Look, the next widget we're going to put together, this little search, one right here is gonna make

37
00:02:14,290 --> 00:02:17,800
use of the you state hook and another one called use effect.

38
00:02:19,050 --> 00:02:23,280
After that are dropped down right here is going to make use of you state use effect.

39
00:02:23,340 --> 00:02:25,110
And another one called Use RF.

40
00:02:25,800 --> 00:02:29,050
And then finally, the translate is going to make use of your state effect and rap.

41
00:02:29,700 --> 00:02:34,380
You can see that we're kind of steadily increasing complexity here and we're building on our knowledge

42
00:02:34,470 --> 00:02:37,260
of hooks with each additional little widget.

43
00:02:38,280 --> 00:02:38,540
All right.

44
00:02:38,610 --> 00:02:40,320
Now we understand what we are doing.

45
00:02:40,890 --> 00:02:41,880
Let's take a pause right here.

46
00:02:41,910 --> 00:02:45,330
When we come back, the next video, we're going to start to work on this search widget.