-: (narrator) In this section we're gonna wire up
both the other page.js file
and the fib.js file two, our app.js component
which can be found inside the SRC directory
because we're making use of two separate components here
and we want to have some navigation between the two.
We're gonna make use of the React router dom library.
So before we forget, let's add that
as a dependency to the clients' package.json file.
So inside of my client directory
I'll find package.json.
I'll find the list of dependencies.
And then inside of here, I'm gonna add
on the React Router dom package at version 4.3.1.
And we're also making use
of the Axios library for making some requests.
So I'll add on Axios here as well at version 018.0.
And as usual, please double check and make sure
that you get commas in all the appropriate locations.
So comma 1, 2, 3, 4, and then no comma after Axios.
I'll then save this file
and then we will open up the app.js file.
So here's app.js.
So essentially all we wanna do is import
in the two components we just made
to this thing and then wire them up to React router.
Now that might sound like it's really complicated
if you're not coming from the world of React, but trust me
it won't be that bad.
The first thing we're going to do is add
in a couple of import statements at the top of the file.
So I'll say import rouser router, as router
also import route and link.
And that's all going to come
from the React router dom library.
I'll then import the two components that we just created.
So other page from ./other page
and I'll import fib from ./fib.
All right, now down inside
of the render method of the app component
you'll notice that there's already a return statement inside
of here.
We're gonna wrap all the markup that already
exists right here with a new router, component.
So I'll put in the router tag like so I'll close it
off at the very bottom, and then I'm going to indent the div
and everything inside of it.
Next up, I'm gonna find the P tag inside of here.
I'm gonna delete the entire paragraph tag.
I'll replace it with a Div.
And this dig, div is gonna have two routes associated
with it.
I'll make a route with props exact and path equal
to forward slash and I'll define a
component property of fib.
And then the second route will have a path
of /other page and that will show the component
as you might guess, other page.
And then finally, very last thing inside the header
after the image tag and the H one, I'll place a link tag
to the root route and I'll give it the text home.
And then right next to it I'll do another link tag
to other page and I'll give it the text other page like so.
So now when our application first boots up
it's going to attempt to show the component associated
with the root route.
So that's gonna be the Fib calculator.
Essentially all the stuff that you see right here
inside the header, we're also gonna show links to go
to the current page that we're already on.
So essentially just like an identity route right here.
But we'll also show a link to go
to this other page component
which is associated with this route right here.
Again, the only reason that we're doing this is so
that if you're from the React JS world and you are familiar
with React router, you'll know how to kind of set
up some basic routing with Engine X and make sure
that it correctly works with HTML five routing.
And again, that's something that we'll talk
about a little bit later on.
So that's pretty much it.
For this application, we have put together two components.
We wired them up inside the app.js file.
The fib component is going to attempt to fetch information
from the Express API and show it on the screen.
It also has the ability to eventually take some input
from the user and post it up
as a new index that needs to be calculated by the back end.
Now one last quick thing that I wanna check here.
We might have made a little typo.
Yeah, I think we made a little typo.
Let's take a quick pause.
We're gonna come back to the next section and fix
up one tiny little issue that I realized we just
made. fully my mistake.
So quick pause and I'll see you in just a minute.