Unless sexually generated a brand new project using create react up.
We're not going to open up our code editor and find the newly generated client directory.
So inside the STC folder of the client directory we're going to start working on one or two new files
that's going to represent the different screens that we're able to navigate to inside our application.
Now when we previously looked at some of our mockups we saw this kind of fit calculator that you see
on the left hand side over here.
In reality we're going to make two separate pages that a user can visit with a calculator on the left
hand side and then we're going to 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 each T.M. five push state routing.
So if you don't have a background in react or react router don't worry about it too much.
Essentially I just want 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 going to first put together a very little bit of code to represent this other
page over here.
Well then start to work on the calculator.
The screen over here on the left hand side.
So for the screen on the right hand side I'm going to open up my code editor or find the client SIRC
folder and then inside there I'm going to create a new file called other page.
J.S. inside of your rule.
Import re-act from re-act import link from re-act router dom.
And then I will export default a functional component like so and then inside there and return just
a tiny bit of GSX.
So it's going to have a div that div will have some text like on some other page and I'll also have
a link back to our main page.
Now we'll give it the text of go back home.
OK 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 reactor react right or dom or anything like that.
Don't sweat it.
Essentially just another page that we want to build to navigate to.
So now that we've got that all put together we're going to start working on the main page.
So the actual Fibonacci calculator.
So on this thing we want to have a form where a 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
have been calculated.
So for that I'm going to create another new file inside my SIRC directory and I'm going to call this
one fib.
J.S. like so
that inside of here we'll start off with the little import statement at the top will import react and
component or react.
I will import X-posts from X yields which is the module that we're going to use for making requests
to that back and express server will 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.
It's also to say state equals an object.
Now have a couple of different properties inside of it.
Well say seen indexes is in array values is going to be an empty object an index will be an empty string
like so.
Now we're going to 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 kind of 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 back and API.
So I will define a component.
Did mt life cycle method that we'll call to help or methadose one will be the start fetch values and
the other will be the start fetch indexes
and then I will define both those helper methods.
So first off fetch values.
This is going to be an asynchronous method soil market 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 a weight accedes start get flash API slash values slash current like so
and then I will set my state on this component by calling this start set state and passing an object
with values is values dot data like so.
Then I will also set up the fetch indexes.
So this is the list of indexes that have been requested and stored inside of our Post-Script server.
It's kinda 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 going to look very similar to the helper function that we just put together.
So say Konst seen indexes.
Again this is a list of all the indexes we've ever seen with the await actual start.
Get flash API slash values slash.
All it all without a V.
And we will again update our state by calling set state and I'll pass in a key value pair of scene indexes
is seen indexes that data like so now I'm just going to double check to make sure that all my state
lines up here.
Yeah I got seen indexes and values values and see indexes.
All right.
So let's take a quick pause right here.
When we come back the next section we're going to take this data that we are fetching from the back
end to API and attempt to render it on the screen.
After this component is rendered to a quick break and I'll see you in just a minute.