In the last section we finally got some content to show up on our page in this section and take another 2
look at our mockup for the application we're going to build and discuss how we're going to structure 3
our component and structure our application with different components. 4
So remember our react location is made up of many different components. 5
Each component is a function or an object that returns some amount of HCM out. 6
So it makes sense that we can have different components for different functions or different purposes 7
within our application. 8
For example we might have a single component that represents the search bar at the top or a single component 9
that represents the video title and video description panel down here. 10
Look at our up again. 11
We definitely need a decent amount of HTL to achieve what we see here. 12
Imagine for a second that if we stuck all the logic in all the markup required to make this entire application 13
inside of our index not js file all inside of our current app component that's being rendered to this 14
to the page we get really messy really fast. 15
Re-act knows how to render multiple components on the screen at one time. 16
Like many many many components at the same time and it does it really really fast. 17
So in a traditional rat re-act application rather than stuffing all of our logic and all of our GSX 18
that produces each female into a single component we spread it out into different components. 19
So we have different components with different purposes and our app. 20
So look at our mock here. 21
We're going to decide on how to divide out our application into separate components. 22
So there's really no science into it in deciding how to break up your application into separate components 23
. 24
Knowing the best way to do it is something that really just comes with practice. 25
So you know as we go through this exercise this is kind of a arbitrary somewhat arbitrary you know decision 26
on how we're going to break stuff up here. 27
But you know let's go ahead and give it a shot anyways and see how it turns out. 28
So I have these red boxes off to the left hand side. 29
We're going to box each area of the application that's going to be represented with a separate component 30
. 31
So for example I'm going to say that the search bar at the top should probably be its own component 32
. 33
So this is one component right here. 34
We will have one file in our application and it will be responsible for rendering an input that will 35
be folks that will function as the search bar. 36
OK. 37
So that's one good point right there. 38
We'll probably do a another component for that video player in the title and description. 39
So this is another component we'll make another one that represents a single video preview over here 40
on the right. 41
And so if you think about this we'll have many of these components right here. 42
Right this like kind of video detail will have however many previews on the screen at the same time 43
so we can always have multiple of one component on the screen. 44
Totally fine. 45
Finally we'll probably have one more component that will render a list of those video details so we 46
can always nest components inside of each other. 47
And one very common purpose for nesting is to render a list of components. 48
So we're basically you have one component that shows a list of components. 49
OK. 50
Finally we'll have one big overall component which is going to be our app or index stock JSA index stock 51
. 52
Yes. 53
And that's going to contain all of these components. 54
So a lot of stuff on the screen right here. 55
You know don't please don't be overwhelmed with this. 56
You all the line work that's going on here basically the only thing I want to convey to here is that 57
we're going to break our app up into separate components each that isolate as much functionality as 58
possible. 59
Building small components like this makes it really easy to use our code throughout our application 60
. 61
So for example if we had some other area of our application we a search bar like this we could very 62
easily reuse this component over there as well. 63
So we'll have four cookies four excuse me five component types total for two. 64
Do you know the overall application and then one that contains them all remember index is the root of 65
our application. 66
All of the other components will branch out from inside it. 67
So let's go back over to our code editor. 68
Now here is the rule we always make one component per file. 69
Always one no matter how small it is no matter what. 70
Always one component per file. 71
So if you've never worked on a javascript framework before like this that likes isolate code so like 72
to say angular backbone it's going to get a little bit overwhelming at first with all these different 73
you know tiny files floating around. 74
But trust me you will get used to it in due time. 75
So here's what we're going to do inside of our source folder over here. 76
We're going to make a new folder called components and then we're going to just stub out right now a 77
separate file for each of the components we're going to make. 78
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
detail that JMS video detail will be containing the video player in the title and description below 80
it will do video list J us and video list item. 81
JAMES. 82
So the second two video list item and video list as you might imagine represent the list of video previews 83
over here on the right. 84
OK. 85
So look it looks like a pretty good file or project structure. 86
You know the file names are pretty clear on which components are going to live and which one if the 87
idea of components and you're having all these different components floating around is still confusing 88
. 89
Don't sweat it at all. 90
As we start to flesh out this application you'll start to get a lot more clear what all these separate 91
files are doing here. 92
So let's go ahead and continue inside of the next section.