We've spent the last two videos talking about the app that we're going to build.
So I think that's enough talking for now.
Let's dive into it.
Let's start putting this application together.
So as you recall I started up my server inside of our new pics project directory and I started up my
code editor inside there as well.
And I can very easily open up my browser go to local history thousand and I should see a new re-act
application appear on the screen.
So now inside my code editor I'm going to open up that SIRC directory.
As usual we've got all those default files inside there.
So I going to highlight all those.
And I'm going to delete them entirely.
And then inside my SIRC folder I'm going to make a index dot J as file as usual.
And then at the top we'll put together same boilerplate that we put together inside the index G-S file
all throughout this course say import re-act from re-act import re-act Dom from react Dom and then usually
inside of here we would create an app component.
But this time around we're going to do things a little bit differently.
You see as I mentioned in the last video we're going to end up with a couple of different components
inside this application.
And for these different components we're going to end up having to make one or two different CSSA files
as well.
So in total we're going to end up with a decent number of files inside this as Cercy directory.
So rather than just throwing all these different files directly into the SIRC directory we're going
to try to impose a little bit more structure in this project to that end inside my SLAC folder.
I'm going to make a new folder called components and we're going to end up creating all of the different
components that we create inside of that folder and said instead of just the RC directory.
Now this includes the app component as well.
So rather than defining the app component inside of our index such as file we will make a separate file
inside the components directory called Apter Yes.
And that will create our app component.
This is a very common pattern even though we've been putting our app component directly in the index
touchiest file you're going to see that later on in this course when we start talking about topics like
redux and whatnot.
We're going to end up having a lot of setup code inside of the index such as file besides just the app
that we had before.
So rather than putting a ton of set up code inside of the index such as file and defining a component
we can kind of break things up a little bit a little bit to make it more understandable by putting the
app component into its own separate file in the components directory.
So with all that in mind inside this new components folder I'm going to make a file called outtalk genius.
And then inside there we'll very quickly put together some scaffolding for this component import it
back into index such a s and then show it on the screen.
So inside this file I'll do a import react and react and then I'll make a functional component
that will return a div with text app and I'll do an export default app like so and then back inside
of the X such as file.
I can now import that new component.
So I'll say import app from.
Now remember before with every import statement we did for a file that we wrote we just said dot slash
and then the file name.
But this time around to get to that app file we would say in the current directory.
So still dot slash look in the components folder and then get the output file.
So I would say dot slash component's app like so.
So then after that now that we've got the reference to the app component we can attempt to show it on
the screen with a react Dom render app and then as usual will pass a reference to our div with ID root
that is shown inside that index.
H mail file says the second argument.
I'll say Documentum query selector count root and I get to put that on a second line.
Just so you can see it very easily.
All right.
Now I'm going to save this file.
When I do this line of code it is going to jump.
And now we can flip back over to our application and I should see those little tiny text up here on
the left hand side that says app.
OK.
So it looks good.
Let's take a quick pause right here.
We'll continue the next section with just a little bit more setup.