1
00:00:00,650 --> 00:00:04,670
In the last video we started talking about the next application we're going to work on in this section

2
00:00:04,700 --> 00:00:09,130
we're going to talk about the design and approach and we'll go ahead and generate our app.

3
00:00:09,140 --> 00:00:13,550
All right so we're going to take this mock up right here and break it down into a couple of separate

4
00:00:13,550 --> 00:00:19,310
components so that we get a good idea of what we're going to be building as we work on the application.

5
00:00:19,310 --> 00:00:19,600
All right.

6
00:00:19,610 --> 00:00:23,370
So here's my idea on how we're going to split this up into separate components.

7
00:00:23,390 --> 00:00:27,950
I think that we're still going to have a search bar component display at the very top of the screen

8
00:00:28,310 --> 00:00:32,810
and the search bar is going to be essentially identical in functionality to what we had in the last

9
00:00:32,810 --> 00:00:33,870
application.

10
00:00:33,890 --> 00:00:35,720
It's going to show some text input.

11
00:00:35,810 --> 00:00:40,430
A user can type in there that's going to update our state and then any time the user hits the enter

12
00:00:40,430 --> 00:00:47,060
key enter key that will trigger a form submit event and send that search term back up to some other

13
00:00:47,280 --> 00:00:53,840
app component or parent component which will then take that search term and do an actual API request.

14
00:00:53,840 --> 00:00:59,090
Now on the right hand side we're going to have a video list that's going to render the entire list of

15
00:00:59,090 --> 00:01:00,290
videos over here.

16
00:01:00,650 --> 00:01:07,100
And then each of those individual parts or each of those individual boxes we will refer to as a video

17
00:01:07,100 --> 00:01:07,890
item.

18
00:01:07,940 --> 00:01:14,150
So if video item is one particular video all the video items are going to be contained by the video

19
00:01:14,210 --> 00:01:15,480
list.

20
00:01:15,500 --> 00:01:21,140
So just to be clear I only drew the screen box around here or right here around this last little item.

21
00:01:21,200 --> 00:01:27,680
But this right here would also be a video item and a video item right there to pay.

22
00:01:27,700 --> 00:01:32,140
And then finally we're going to add the video detail which will be responsible for actually showing

23
00:01:32,170 --> 00:01:38,230
a video player that can play the actual YouTube video that has been fetched and the title description

24
00:01:38,320 --> 00:01:40,930
right underneath that now.

25
00:01:41,120 --> 00:01:45,210
So we're really clear here these are going to be the real videos that we are playing from YouTube.

26
00:01:45,260 --> 00:01:47,340
It's not any fake video or something like that.

27
00:01:47,360 --> 00:01:53,180
We need to actually figure out how we're going to show a video directly from YouTube and embed it essentially

28
00:01:53,180 --> 00:01:54,390
inside of our application.

29
00:01:54,500 --> 00:01:58,130
But that's going to be way more easy and straightforward than you might imagine.

30
00:01:59,010 --> 00:02:03,350
All right now the very last thing I want to show you is our component hierarchy.

31
00:02:03,350 --> 00:02:08,490
So at the top are still going to have that over Archaean app component which is responsible for holding

32
00:02:08,490 --> 00:02:14,250
all the state of our application for retrieving a list of videos and first storing whatever the current

33
00:02:14,250 --> 00:02:16,190
search term is.

34
00:02:16,230 --> 00:02:22,410
The app is then going to configure the search bar video detail and video lists by passing props from

35
00:02:22,410 --> 00:02:24,280
the app down to each of those.

36
00:02:24,510 --> 00:02:29,580
And in turn the video list will pass some props down to the video item or the collection of video items

37
00:02:29,590 --> 00:02:35,010
so we have in order to properly display each of those separate videos.

38
00:02:35,010 --> 00:02:35,300
All right.

39
00:02:35,340 --> 00:02:36,060
That's it.

40
00:02:36,060 --> 00:02:37,510
Let's take a pause right here.

41
00:02:37,530 --> 00:02:38,490
Actually one last thing.

42
00:02:38,490 --> 00:02:40,670
Let's make sure we generate our application first.

43
00:02:40,870 --> 00:02:45,780
It's going to flip on over to the terminal and go to some still inside of my pics project directory

44
00:02:46,800 --> 00:02:53,540
and go up one folder back to my workspace directory and then once I'm back up your itinerary a new project

45
00:02:55,090 --> 00:02:57,840
with create re-act app and we'll call this one.

46
00:02:57,830 --> 00:03:00,040
Videos like so.

47
00:03:00,040 --> 00:03:00,280
All right.

48
00:03:00,280 --> 00:03:01,790
So that's going to generate a project.

49
00:03:01,840 --> 00:03:03,900
We'll take a quick pause when we come back the next video.

50
00:03:03,940 --> 00:03:05,360
We're going to start putting this thing together.