In the last video we started talking about the next application we're going to work on in this section
we're going to talk about the design and approach and we'll go ahead and generate our app.
All right so we're going to take this mock up right here and break it down into a couple of separate
components so that we get a good idea of what we're going to be building as we work on the application.
All right.
So here's my idea on how we're going to split this up into separate components.
I think that we're still going to have a search bar component display at the very top of the screen
and the search bar is going to be essentially identical in functionality to what we had in the last
application.
It's going to show some text input.
A user can type in there that's going to update our state and then any time the user hits the enter
key enter key that will trigger a form submit event and send that search term back up to some other
app component or parent component which will then take that search term and do an actual API request.
Now on the right hand side we're going to have a video list that's going to render the entire list of
videos over here.
And then each of those individual parts or each of those individual boxes we will refer to as a video
item.
So if video item is one particular video all the video items are going to be contained by the video
list.
So just to be clear I only drew the screen box around here or right here around this last little item.
But this right here would also be a video item and a video item right there to pay.
And then finally we're going to add the video detail which will be responsible for actually showing
a video player that can play the actual YouTube video that has been fetched and the title description
right underneath that now.
So we're really clear here these are going to be the real videos that we are playing from YouTube.
It's not any fake video or something like that.
We need to actually figure out how we're going to show a video directly from YouTube and embed it essentially
inside of our application.
But that's going to be way more easy and straightforward than you might imagine.
All right now the very last thing I want to show you is our component hierarchy.
So at the top are still going to have that over Archaean app component which is responsible for holding
all the state of our application for retrieving a list of videos and first storing whatever the current
search term is.
The app is then going to configure the search bar video detail and video lists by passing props from
the app down to each of those.
And in turn the video list will pass some props down to the video item or the collection of video items
so we have in order to properly display each of those separate videos.
All right.
That's it.
Let's take a pause right here.
Actually one last thing.
Let's make sure we generate our application first.
It's going to flip on over to the terminal and go to some still inside of my pics project directory
and go up one folder back to my workspace directory and then once I'm back up your itinerary a new project
with create re-act app and we'll call this one.
Videos like so.
All right.
So that's going to generate a project.
We'll take a quick pause when we come back the next video.
We're going to start putting this thing together.