In the last section we did some initial setup with re-act Rotterdam.
We imported two helpers from the library and then we also created four dummy components.
Now without further ado let's figure out how we actually make use of re-act writer Dom inside of our
app component.
The first thing I can do inside of here is clean out the hi there text that we currently have on the
screen.
I am going to leave this div inside of the app component for now because we are going to come back later
and make use of this top level div right here to get some CSSA working properly inside of our application.
So this div that we're going to leave right here solely about CSSA inside this div I'm going to place
the browser router component so both the browser router and the outcome objects right here they are
re-act components that we can freely return from any component that we create.
So right here inside the app component I'll make browser router and I'm going to close the tag off like
so that inside of your we are going to place a collection of different routes each route is going to
specify a rule or kind of a relation between a possible address that a user can visit inside of our
application and a component to actually display on the screen.
Now before we start adding these routes in there is one tiny little gotcha.
This browser router component right here expects to have at most one child at most.
And when I'm talking about child.
When I say at most one I'm talking about the components that we pass directly to the browser router
we could not do something like this right here.
These are two self-closing divs.
They are two separate children that are being passed to browse router.
If we attempted to run an application like this we would see an error message that said something like
Hey the browser out only expects to get at most one child.
So what that means is that we have to pass in just one component like so now due to triple.
Like really look at this device here.
Notice that when I have the two these are self-closing device.
So we don't usually place self-closing divs.
We usually have something little bit closer to this.
I just wanted to do a quick example of two children so I'm going to delete the second one.
We still have one child right here.
Even though it has an opening and closing tag it still is exactly one child's component.
Just to be clear.
So now inside of this div is where we are going to set up some of the different routing rules of our
application.
With this route component we'll set up our first route to display the landing page to our users.
So that's the first route I want to put together.
So I'm going to place a route component and I'm going to give it configuration to tie together a possible
route or a possible address a possible u r l that a user might visit inside of application and the component
to display on the screen when the user goes there.
So for this first route that I want to have displaying the landing component and remember I want to
show that landing component when ever the user visits the route email the dot com just like Slash like
basically e-mail the dot com.
So basically the landing page of our application so to set that relationship up I'm going to pass in
a prop of path equal to forward slash and component's equal to with curly braces landing like so and
then we'll close it off with a self-closing tag with reactor router the forward slash like this just
by itself is assumed to mean the root route of the application.
So this would be this route right here would come into effect whenever the user went to an address like
email dot com.
Assuming that our application is hosted that e-mail dot com we never specify the actual domain name
in here.
So we are not doing something like email or dot com or Heroku app dot com or whatever our domain is.
It is just the route portion of the URL.
So whenever a user goes to our route shows land component that's it that's all that's going on here.
So I think we could probably test this out inside the browser.
I'm going to see this component and it'll change back over to the browser and wait for the refresh.
OK so here's localhost 3000 and we'll wait for our little refresh up here.
Now when the page refreshes you're going to see a warning message.
If you have the console open and it says hey you have some unused variables all this means to say is
that inside of our jails file we created a couple of different variables but we never actually use them.
This is just a warning right here.
It is not an error message it's just saying hey just so you know you have some unused variables you
might want to clean those up.
So it's just giving us a little bit of help.
Now what's more relevant is the fact that we see the text on the screen of landing.
Great.
That's basically what we want.
We just want to see the landing component appear on the screen.
So we now have at least one component that shows up when a user visits the routes route of our application.
Let's continue in the next section and we're going to start to add on a couple more routes to this thing
that uses the dashboard and a survey new components and we add those additional routes on.
We're going to start to see some slightly mysterious behavior so let's continue the next section and
we're going to see what happens and we'll figure out how re-act router handles some of its more advanced
routing rules.
So I'll see you in just a second.