-: In the last section, we generated a brand new project
using Create React App.
We're now gonna open up our code editor
and find the newly generated client directory.
So inside the SRC folder of the client directory,
we're gonna start working on one or two new files
that's going to represent the different screens
that we're able to navigate to inside of our application.
Now when we previously looked at some of our mock-ups,
we saw this kind of Fib calculator that you see
on the left hand side over here.
In reality, we're going to actually make
two separate pages that a user can visit,
both a Fib calculator on the left hand side,
and then we're gonna have some other kind of dummy page
on the right hand side.
The only reason that we are doing this other page over here,
which we're going to literally call "other page,"
is to show you an example of HTML5 pushState routing.
So if you don't have a background in React or React Router,
don't worry about it too much.
Essentially, I just wanna make sure
that you have a very complete front end example
that shows you how you can navigate
to different nested pages in a single application
while still using Docker.
So to get started, we're gonna first put together
a very little bit of code
to represent this other page over here.
We'll then start to work on the Fib calculator,
this screen over here on the left hand side.
So for the screen on the right hand side,
I'm gonna open up my code editor.
I'll find the client, SRC folder.
And then inside there, I'm gonna create a new file
called otherpage.js.
Inside of here, we will import React from React.
I will import link from React Router DOM,
and then I will export default
a functional component like so.
And then inside there, I'm gonna return
just a tiny bit of JSX.
So it's gonna have a div.
The div will have some text like "I'm some other page,"
and it'll also have a link back to our main page.
And we'll give it the text of "Go back home."
Okay, so again, we're just doing this right here,
so I can give you a complete navigational example
on the front end of our application.
And if you're not coming from the world of React
or React Router DOM or anything like that, don't sweat it.
Essentially, it's just another page
that we want to be able to navigate to.
So now that we've got that all put together,
we're gonna start working on the main page.
So the actual Fibonacci calculator.
So on this thing, we wanna have a form
where user can enter in some index and submit it,
and then see a list of all the indexes
that have ever been submitted, and see a list
of all the different values that have been calculated.
So for that, I'm gonna create another new file
inside my SRC directory,
and I'm going to call this one fib.js like so.
Then inside of here, we'll start off
with a little import statement at the top.
I will import React and component from React.
I will import Axios from Axios,
which is a module that we're going to use
for making requests to that backend express server.
And then we'll create a new class called Fib,
which is going to be extending the component base class.
At the very top of this,
we're going to initialize some default state.
So we'll say, state equals an object.
It'll have a couple of different properties inside of it.
I'll say scene indexes is in array.
Values is going to be in empty object,
and index will be in empty string like so.
Now we're going through this code pretty quickly.
As a reminder, I'm just kind of giving you
a very high-level description of what's going on.
This is all stuff that is super unrelated
from the world of Docker.
And if you don't care to learn any of this JavaScript stuff
or you just don't care about it one bit,
you can always continue on to that future section
that has all this code for download.
I'm just putting these videos in here
in case you're kinda curious about the inner workings
of the application.
All right, so now the instant that this component
is rendered on the screen, we're going to want to attempt
to fetch some data from our backend API.
So I will define a component DidMount lifecycle method
that will call two helper methods.
One will be this .fetch values,
and the other will be this .fetch indexes.
And then I will define both those helper methods.
So first off, fetch values.
This is going to be an asynchronous method,
so I will mark it with the async keyword,
because we're going to do a little bit
of data fetching in here.
So I will make a request
to get a list of all the different values
that have been stored on our API.
I'll say await axios.get/api/values/current
like so.
And then I will set my state on this component
by calling this .setState and passing in an object
with values, is values.data like so.
Then we'll also set up the fetch indexes.
So this is the list of indexes that have been requested
and stored inside of our Postgres server.
It's kind of the hard coded copy,
just saying, "Hey, here's a list of all the indexes
that have been ever submitted to the application."
And so for that,
we'll define another async method called fetch indexes.
And this is gonna look very similar
to the helper function that we just put together.
So we'll say const seen indexes.
Again, this is a list of all the indexes we've ever seen,
will be await axios.get/API/values/all.
Oop, all without a V.
And we will again update our state by calling setState,
and I'll pass in a key value pair of seen indexes,
is seen indexes.data like so.
Now I'm just gonna double check to make sure
that all my state lines up here.
Yep, I got seen indexes and values,
values and seen indexes.
All right, so let's take a quick pause right here.
When we come back the next section,
we're gonna take this data that we are fetching
from the backend API and attempt to render it
on the screen after this component is rendered.
So a quick break and I'll see you in just a minute.