In the last section we started putting together some of the very core elements of the client side of
our application.
We deleted all the boilerplate we got inside of our SIRC directory except for that register service
worker file and then we created a brand new index dodgiest file.
As a reminder the Create react up application is set up to assume that there is an index file inside
of your S or C directory and that it is the root file of your application.
So we did not pick the name index not just here at random.
This is something that is enforced automatically by Create re-act out.
So we've now got the start of some boiler plate for next door Jasc File.
We're going to continue in this section by creating our actual route component and then using the re-act
Dom render call to get that component to show up on the screen.
After that we'll then start to do some of the redux setup and then we'll continue with some of the re-act
router setup as well.
So let's get to it.
I want to first start off by creating a sort of starter place for our app component inside of a new
file.
We'll import it into this index digest file and then use the react on Dot rendered call to actually
show it.
So I'm going to find my SIRC directory inside there or make a new folder.
That's going to Houghs all the different components that we're going to have inside of our application.
I'm going to call this file or seemy this folder the components directory and then inside of the components
directory I'll make a new file called app.
Yes.
Now notice on using a capital Asier in general we're going to be using a very consistent name strategy
inside of our application especially on the client side.
If a given file is exploring a class or a reactive component of any type be it a functional component
or a class based component.
We will label it with a capital letter but if the file returns just a function or just a series of functions
or something like that we will label it with a lowercase leading character.
And so a good example of that would be like the index digest file.
It's not exporting a component.
So we use a lowercase letter.
The app will export a component so we're going to use uppercase.
OK.
So now inside the app component we'll put down a little bit of boilerplate in here just to get started.
So import re-act from react at the top we'll create our app components right now we'll leave it as just
a simple functional component.
We will say that this thing is going to return a div that contains the text.
Hi there.
And then we'll export the component at the very bottom.
OK.
So again kind of assuming that we're on the same page regarding re-act here we have created a functional
component and it returns a little bit of GSX the GSX says that we want to create a div that contains
the text.
Hi there.
We then take that newly created component and export it at the very bottom of the file with the export
default syntax.
You'll also notice that we've kind of changed over from using require statements to using import statements
at the top as well as reminder.
We are now using import statements because on the front end we are making use of Web pack in babbel
which gives us very easy access to E.S. 2015 modules.
Whereas on the back end we're making use of no J S which has really only good support for common G-S
modules right now in common J.S. modules use the require syntax instead.
OK.
So we'll save this file.
We're now going to import it into the index on file and then just make sure we can get it to show up
on the screen.
So inside of index not Jesus I will import app from component's slash app will then show the app component.
So we'll say app make sure that you use the GSX tags inside of here because react on don't render expects
a component instance which would create which we create by using GSX tags then as a second argument
we have to provide a reference to an existing Dom node inside of our html document.
Now inside the client public directory we get the very root index.
HTL file that is used to house the Riak side of our application.
So if we open up the index at each HTML file and you'll see all this boilerplate each email in here
already.
If we scroll on down to the body tag you'll find the div with an ID of root.
So this is going to be the very root div of our application and it's going to be where we render are
re-act application 2.
So essentially as a second argument to react on don't read or call we have to pass a reference to this
div right here.
So to do so I'll flip back over to the index file and as a second argument I'll pass in document doc
queries selector and give myself a new line here so that you can still see everything on the screen.
And then we'll select that div with idea of route by saying pound it like so.
OK.
So it's like pretty or collapse it to one line anyways whatever.
That's fine.
All right.
I think we're ready to now test this out inside the browser and make sure that we've kind of got square
one put away before we start to dive into the redux stuff.
So let's start our server back up and just verify that we can see the app component on the screen.
We'll then take a break and continue with the redux setup.
So going to flip back over to my counsel it looks like those three modules that we installed have successfully
been installed.
Notice that we are still inside of our client directory but to start up our server we have to make sure
that we are inside of our server directory.
So I'm going to change back out to my server directory and then once inside of here I'll start up my
server side of development mode with the command and run dev like so
OK.
So looks like we get a little bit of an error message here.
So you might see an error message that says something like re-act scripts start and something like Riak
scripts.
Command not found.
So if you see this at this point in time it's totally fine.
This is a little issue that we're going to start fix up inside of our client side application.
If you do not see this issue that's totally fine as well.
It might be that the Create re-act up boilerplate has this all fixed up so let's continue in the next
section.
We'll talk about why we are seeing this error message and we'll talk about exactly how we're going to
fix it.
So quick break and I'll see you in the next section.