1

00:00:01,370  -->  00:00:06,480
In the last section we finally got some content to show up on our page in this section and take another

2

00:00:06,480  -->  00:00:10,440
look at our mockup for the application we're going to build and discuss how we're going to structure

3

00:00:10,440  -->  00:00:14,810
our component and structure our application with different components.

4

00:00:14,820  -->  00:00:19,290
So remember our react location is made up of many different components.

5

00:00:19,380  -->  00:00:25,170
Each component is a function or an object that returns some amount of HCM out.

6

00:00:25,380  -->  00:00:30,300
So it makes sense that we can have different components for different functions or different purposes

7

00:00:30,300  -->  00:00:31,790
within our application.

8

00:00:31,860  -->  00:00:37,530
For example we might have a single component that represents the search bar at the top or a single component

9

00:00:37,530  -->  00:00:42,180
that represents the video title and video description panel down here.

10

00:00:43,320  -->  00:00:44,740
Look at our up again.

11

00:00:44,790  -->  00:00:49,110
We definitely need a decent amount of HTL to achieve what we see here.

12

00:00:49,110  -->  00:00:55,680
Imagine for a second that if we stuck all the logic in all the markup required to make this entire application

13

00:00:56,490  -->  00:01:01,770
inside of our index not js file all inside of our current app component that's being rendered to this

14

00:01:01,890  -->  00:01:05,490
to the page we get really messy really fast.

15

00:01:05,490  -->  00:01:08,840
Re-act knows how to render multiple components on the screen at one time.

16

00:01:08,970  -->  00:01:13,990
Like many many many components at the same time and it does it really really fast.

17

00:01:14,010  -->  00:01:20,340
So in a traditional rat re-act application rather than stuffing all of our logic and all of our GSX

18

00:01:20,340  -->  00:01:27,000
that produces each female into a single component we spread it out into different components.

19

00:01:27,030  -->  00:01:31,240
So we have different components with different purposes and our app.

20

00:01:31,350  -->  00:01:32,790
So look at our mock here.

21

00:01:32,790  -->  00:01:39,390
We're going to decide on how to divide out our application into separate components.

22

00:01:40,110  -->  00:01:45,780
So there's really no science into it in deciding how to break up your application into separate components

23

00:01:45,780  -->  00:01:46,320
.

24

00:01:46,320  -->  00:01:50,070
Knowing the best way to do it is something that really just comes with practice.

25

00:01:50,070  -->  00:01:58,200
So you know as we go through this exercise this is kind of a arbitrary somewhat arbitrary you know decision

26

00:01:58,200  -->  00:02:00,180
on how we're going to break stuff up here.

27

00:02:00,480  -->  00:02:03,530
But you know let's go ahead and give it a shot anyways and see how it turns out.

28

00:02:03,870  -->  00:02:07,220
So I have these red boxes off to the left hand side.

29

00:02:07,410  -->  00:02:13,860
We're going to box each area of the application that's going to be represented with a separate component

30

00:02:13,860  -->  00:02:14,550
.

31

00:02:14,550  -->  00:02:23,280
So for example I'm going to say that the search bar at the top should probably be its own component

32

00:02:23,290  -->  00:02:23,340
.

33

00:02:23,400  -->  00:02:25,200
So this is one component right here.

34

00:02:25,290  -->  00:02:32,370
We will have one file in our application and it will be responsible for rendering an input that will

35

00:02:32,370  -->  00:02:34,970
be folks that will function as the search bar.

36

00:02:35,430  -->  00:02:36,160
OK.

37

00:02:36,540  -->  00:02:38,790
So that's one good point right there.

38

00:02:38,790  -->  00:02:45,650
We'll probably do a another component for that video player in the title and description.

39

00:02:45,870  -->  00:02:57,000
So this is another component we'll make another one that represents a single video preview over here

40

00:02:57,000  -->  00:02:57,990
on the right.

41

00:02:58,310  -->  00:03:01,200
And so if you think about this we'll have many of these components right here.

42

00:03:01,230  -->  00:03:07,320
Right this like kind of video detail will have however many previews on the screen at the same time

43

00:03:07,650  -->  00:03:10,950
so we can always have multiple of one component on the screen.

44

00:03:11,040  -->  00:03:12,690
Totally fine.

45

00:03:12,720  -->  00:03:22,350
Finally we'll probably have one more component that will render a list of those video details so we

46

00:03:22,350  -->  00:03:25,120
can always nest components inside of each other.

47

00:03:25,140  -->  00:03:30,300
And one very common purpose for nesting is to render a list of components.

48

00:03:30,360  -->  00:03:34,070
So we're basically you have one component that shows a list of components.

49

00:03:34,170  -->  00:03:35,210
OK.

50

00:03:35,760  -->  00:03:44,200
Finally we'll have one big overall component which is going to be our app or index stock JSA index stock

51

00:03:44,250  -->  00:03:44,360
.

52

00:03:44,430  -->  00:03:45,240
Yes.

53

00:03:45,600  -->  00:03:47,910
And that's going to contain all of these components.

54

00:03:47,910  -->  00:03:51,330
So a lot of stuff on the screen right here.

55

00:03:51,440  -->  00:03:54,110
You know don't please don't be overwhelmed with this.

56

00:03:54,120  -->  00:03:58,890
You all the line work that's going on here basically the only thing I want to convey to here is that

57

00:03:58,890  -->  00:04:04,320
we're going to break our app up into separate components each that isolate as much functionality as

58

00:04:04,320  -->  00:04:06,100
possible.

59

00:04:06,420  -->  00:04:10,950
Building small components like this makes it really easy to use our code throughout our application

60

00:04:10,950  -->  00:04:11,380
.

61

00:04:11,400  -->  00:04:17,880
So for example if we had some other area of our application we a search bar like this we could very

62

00:04:17,880  -->  00:04:21,780
easily reuse this component over there as well.

63

00:04:21,870  -->  00:04:27,080
So we'll have four cookies four excuse me five component types total for two.

64

00:04:27,090  -->  00:04:34,710
Do you know the overall application and then one that contains them all remember index is the root of

65

00:04:34,710  -->  00:04:35,910
our application.

66

00:04:36,000  -->  00:04:39,510
All of the other components will branch out from inside it.

67

00:04:39,540  -->  00:04:42,010
So let's go back over to our code editor.

68

00:04:42,660  -->  00:04:47,140
Now here is the rule we always make one component per file.

69

00:04:47,350  -->  00:04:49,890
Always one no matter how small it is no matter what.

70

00:04:49,920  -->  00:04:52,320
Always one component per file.

71

00:04:52,320  -->  00:04:57,140
So if you've never worked on a javascript framework before like this that likes isolate code so like

72

00:04:57,170  -->  00:05:02,100
to say angular backbone it's going to get a little bit overwhelming at first with all these different

73

00:05:02,160  -->  00:05:03,740
you know tiny files floating around.

74

00:05:03,750  -->  00:05:07,940
But trust me you will get used to it in due time.

75

00:05:08,040  -->  00:05:11,530
So here's what we're going to do inside of our source folder over here.

76

00:05:11,580  -->  00:05:19,530
We're going to make a new folder called components and then we're going to just stub out right now a

77

00:05:19,530  -->  00:05:22,860
separate file for each of the components we're going to make.

78

00:05:22,890  -->  00:05:32,310
So going to make a new file you know the first one of the search bar J us and then we'll have video

79

00:05:32,310  -->  00:05:38,820
detail that JMS video detail will be containing the video player in the title and description below

80

00:05:38,820  -->  00:05:49,150
it will do video list J us and video list item.

81

00:05:49,360  -->  00:05:50,600
JAMES.

82

00:05:50,970  -->  00:05:58,860
So the second two video list item and video list as you might imagine represent the list of video previews

83

00:05:58,860  -->  00:06:00,550
over here on the right.

84

00:06:01,230  -->  00:06:02,040
OK.

85

00:06:02,050  -->  00:06:05,710
So look it looks like a pretty good file or project structure.

86

00:06:05,970  -->  00:06:10,890
You know the file names are pretty clear on which components are going to live and which one if the

87

00:06:10,890  -->  00:06:15,300
idea of components and you're having all these different components floating around is still confusing

88

00:06:15,300  -->  00:06:16,020
.

89

00:06:16,020  -->  00:06:17,470
Don't sweat it at all.

90

00:06:17,550  -->  00:06:21,810
As we start to flesh out this application you'll start to get a lot more clear what all these separate

91

00:06:21,810  -->  00:06:22,960
files are doing here.

92

00:06:23,100  -->  00:06:26,020
So let's go ahead and continue inside of the next section.