In the last section we generated our new application I'm now going to change into that new project directory
of videos and then I'm going to get my code editor inside there and I write.
Here we go.
So we got our newly generated project and I see my RC folder with all of the automatically generated
files inside there.
Now a quick note before we started working on this project at all.
We've essentially already gone through a lot of the topics that you're going to need to know to understand
what we're doing inside the sap.
We went over all that in the last application we put together.
So as we are going through this application we're going to generally move much more quickly than we
did in the past in putting the same together.
If you feel like I'm going to quickly at any point in time you can always go back to the last application
and check out some videos inside there that will give you a lot more fine grained explanation about
what's going on around topics like say state or event handlers or all that good stuff.
Now that's not to say that I'm going to write code as fast as I possibly can.
I just mean to say that we're going to go a little more quickly than we have in the past.
All right.
So let's get to it.
Inside my Cercy folder I'm going to take all of those automatically generated files and delete them
and then inside the SIRC folder I'm going to make a new file called the index file and at the top we'll
do our usual imports inside of a index such as files so I'll get my import re-act from react.
I'll get my re-act dom or react Tom.
And although we have not yet created an app component we will very shortly.
So I'm going to get a inforced statement here for the company as well.
And notice that we're going to take the same convention as we did previously in making a separate folder
inside of SIRC to hold all of our different components.
And then after that I'll do my reac dom dom render a place my app component and my document queries
selector and I get to look for some elements with an idea of route like so.
All right so now we can flip back to the Cercy directory and make a new folder that we will call components
and inside there we'll make our app that genius file like so
Zao just as we did on the last application.
We're going to make the app a class based component because it's going to hold all of the different
states for our application including the list of videos that we're fetching and maybe something like
you know which video we're currently showing on the screen.
But we'll figure that out over time.
So inside the aperture as file I will import re-act from react and I'll create my app class and I'll
say that extends react Dom component like so then inside there it will define our render method or return
a div with text app and then at the bottom I'll do my expert default app like so.
All right so now I think we've got everything we need to get something on the screen between these two
files.
So I'll now flip back over to my browser.
I'm going to refresh the page and it looks like I forgot a little step here.
I did not start up the Riak project itself so I got to make sure that in sodomite videos project directory
I run NPM start like so.
All right.
That's much better.
So I get foot back on my browser and then after a second or so.
Oh looks like I got a little typo in there.
I put a semi colon at the end of that line right there.
So I'll fix that up.
And now we're good to go I see.
At the very top left of the screen.
All right.
So let's keep going.
We're going to first start working on the search bar of our application because we had worked on the
search bar previously and I think we got a pretty good idea of how it's put together.
Now this search bar this time around is going to be completely identical to what we did previously.
We might have a differently named proper two or something like that but for the most part it's going
to be a near identical component.
So we could copy paste all of our code over from the last application.
But personally I like to avoid doing copy paste because when you're first learning about react you can
start to develop a little bit of muscle memory by just writing out all the GSX and all that for the
plot to create a new component.
So you can copy paste but we're going to get to the process of writing this out from scratch.
All right.
So inside my component's directory I'm going to make a new file called search bar J.S. and then inside
there we will import re-act from re-act or create a new class called search bar that's going to be extending
re-act component.
Now a little common typo to make here is to accidentally leave the S off of extents and make sure you
get that s on there.
Then.
Inside here will place our render method and I will return a div with simply search bar inside of it
and then at the bottom I will export default search bar.
Now finally I'm going to flip back over to my app component.
So now inside of an app.
Yes.
At the top I will import search bar from search bar and then inside my render method I'm going to refactor
this thing to give myself a little bit of space
and then inside there I'll show my search bar like so now.
Quick reminder don't forget to get the semi-colon off the end of that line.
If you had it previously All right cells save this we will flip back over and I'm going to expect to
see a search bar on screen.
Very good.
All right so that's the easy set up to get through.
So when we come back the next section we're gonna start doing a little bit more setup boilerplate inside
the search bar component and make sure that we show some text input that the user can type into.
We also need to make sure that we pull in the semantic UI CSSA file that we've been using throughout
this course just to make sure that our app looks at least somewhat reasonable.
All right so quick possible start taking care of all that in the next video.