1
00:00:01,010 --> 00:00:04,040
In this section, we're going to work on a very small optional application.

2
00:00:04,430 --> 00:00:09,590
The goal of this app is to rebuild the YouTube videos application, but use hooks this time around instead

3
00:00:09,590 --> 00:00:10,670
of class components.

4
00:00:11,150 --> 00:00:12,110
Again, Toli optional.

5
00:00:12,140 --> 00:00:16,040
You do not have to do this if you don't want to because we are really just working on an app that we've

6
00:00:16,040 --> 00:00:17,120
already worked on before.

7
00:00:17,720 --> 00:00:19,790
Nonetheless, I think you'll learn a lot to doing it.

8
00:00:19,880 --> 00:00:23,690
And it should be a quick couple of videos, so I would recommend going through this.

9
00:00:23,720 --> 00:00:24,830
But again, totally up to you.

10
00:00:25,790 --> 00:00:26,060
All right.

11
00:00:26,210 --> 00:00:31,490
To actually rebuild this project, we're going to just copy the existing project directory we had created

12
00:00:31,550 --> 00:00:32,400
for the video stuff.

13
00:00:33,150 --> 00:00:39,220
So I've got my folder open here to my workspace where I'm saving all my different projects, going to

14
00:00:39,230 --> 00:00:44,180
find the videos project that we had been working on and just copy that folder over.

15
00:00:45,380 --> 00:00:50,470
After I copy the folder, I'm going to rename that copy to videos Dash Hooks.

16
00:00:50,930 --> 00:00:52,340
Let's give me the name of our project.

17
00:00:54,190 --> 00:00:57,210
And while that's running, I'm going to show you a quick diagram or two.

18
00:00:58,330 --> 00:01:01,570
Just a reminder on some the different components we had created inside that project.

19
00:01:01,690 --> 00:01:05,500
We've got the app search bar, video list, video detail and video item.

20
00:01:06,220 --> 00:01:12,250
Now, video list, video detail and video item are all function components with no state or anything

21
00:01:12,250 --> 00:01:13,360
like that tied to them.

22
00:01:13,950 --> 00:01:18,190
So those three components we really don't have to deal with or change in any way.

23
00:01:18,940 --> 00:01:24,460
However, the app component is making use of both state and lifecycle methods and the search bar is

24
00:01:24,460 --> 00:01:25,420
making use of state.

25
00:01:26,070 --> 00:01:31,060
So we are probably going to have to do a reasonable refactor to the app component to make it use hooks

26
00:01:31,210 --> 00:01:35,230
or probably have to make use of the you state hook and the use effect hook as well.

27
00:01:36,100 --> 00:01:40,300
Then for the search bar, we're probably going to have to make use of the you state hook inside their.

28
00:01:41,210 --> 00:01:44,180
So in general, just really two files we're going to make updates to.

29
00:01:45,430 --> 00:01:45,800
All right.

30
00:01:45,850 --> 00:01:50,050
Back over at my folder, explorer over here, it looks like I've got that copy of the video's directory

31
00:01:50,570 --> 00:01:53,500
going to rename it to videos, dash books.

32
00:01:54,800 --> 00:01:57,320
I'm going to change into that directory at my terminal.

33
00:01:57,630 --> 00:02:00,320
I'm going to start up my crate, react at project inside there.

34
00:02:02,430 --> 00:02:03,240
Back at my terminal.

35
00:02:03,360 --> 00:02:06,480
I'm still running these widgets developments ever going to close that?

36
00:02:08,250 --> 00:02:09,520
I'll change over to the.

37
00:02:10,700 --> 00:02:12,560
Videos, books, project.

38
00:02:14,590 --> 00:02:15,980
And do an NPM start.

39
00:02:17,310 --> 00:02:19,410
All right, so let's take a pause right here when we come back.

40
00:02:19,440 --> 00:02:21,270
Next video, we'll start to make some updates.

41
00:02:21,540 --> 00:02:23,520
First to our search bar component.