1
00:00:00,720 --> 00:00:04,810
Unless sexually generated a brand new project using create react up.

2
00:00:04,980 --> 00:00:10,060
We're not going to open up our code editor and find the newly generated client directory.

3
00:00:10,320 --> 00:00:15,510
So inside the STC folder of the client directory we're going to start working on one or two new files

4
00:00:15,780 --> 00:00:21,370
that's going to represent the different screens that we're able to navigate to inside our application.

5
00:00:21,380 --> 00:00:25,790
Now when we previously looked at some of our mockups we saw this kind of fit calculator that you see

6
00:00:25,790 --> 00:00:27,380
on the left hand side over here.

7
00:00:27,560 --> 00:00:33,680
In reality we're going to make two separate pages that a user can visit with a calculator on the left

8
00:00:33,680 --> 00:00:38,500
hand side and then we're going to have some other kind of dummy page on the right hand side.

9
00:00:38,540 --> 00:00:43,310
The only reason that we are doing this other page over here which we're going to literally call other

10
00:00:43,310 --> 00:00:48,960
page is to show you an example of each T.M. five push state routing.

11
00:00:48,980 --> 00:00:53,780
So if you don't have a background in react or react router don't worry about it too much.

12
00:00:53,780 --> 00:00:58,640
Essentially I just want make sure that you have a very complete front end example that shows you how

13
00:00:58,640 --> 00:01:04,740
you can navigate to different nested pages in a single application while still using docker.

14
00:01:04,760 --> 00:01:09,860
So to get started we're going to first put together a very little bit of code to represent this other

15
00:01:09,860 --> 00:01:10,870
page over here.

16
00:01:10,970 --> 00:01:13,090
Well then start to work on the calculator.

17
00:01:13,160 --> 00:01:15,230
The screen over here on the left hand side.

18
00:01:15,530 --> 00:01:21,080
So for the screen on the right hand side I'm going to open up my code editor or find the client SIRC

19
00:01:21,290 --> 00:01:26,840
folder and then inside there I'm going to create a new file called other page.

20
00:01:26,880 --> 00:01:30,040
J.S. inside of your rule.

21
00:01:30,060 --> 00:01:38,660
Import re-act from re-act import link from re-act router dom.

22
00:01:38,840 --> 00:01:46,150
And then I will export default a functional component like so and then inside there and return just

23
00:01:46,150 --> 00:01:48,390
a tiny bit of GSX.

24
00:01:48,670 --> 00:01:55,660
So it's going to have a div that div will have some text like on some other page and I'll also have

25
00:01:55,690 --> 00:01:58,320
a link back to our main page.

26
00:02:00,340 --> 00:02:03,150
Now we'll give it the text of go back home.

27
00:02:03,270 --> 00:02:08,650
OK so again we're just doing this right here so I can give you a complete navigational example on the

28
00:02:08,650 --> 00:02:10,310
front end of our application.

29
00:02:10,420 --> 00:02:14,060
And if you're not coming from the world of reactor react right or dom or anything like that.

30
00:02:14,170 --> 00:02:14,760
Don't sweat it.

31
00:02:14,770 --> 00:02:18,560
Essentially just another page that we want to build to navigate to.

32
00:02:18,580 --> 00:02:22,370
So now that we've got that all put together we're going to start working on the main page.

33
00:02:22,390 --> 00:02:24,840
So the actual Fibonacci calculator.

34
00:02:24,970 --> 00:02:30,490
So on this thing we want to have a form where a user can enter in some index and submit it and then

35
00:02:30,490 --> 00:02:35,290
see a list of all the indexes that have ever been submitted and see a list of all the different values

36
00:02:35,290 --> 00:02:36,910
have been calculated.

37
00:02:36,910 --> 00:02:43,200
So for that I'm going to create another new file inside my SIRC directory and I'm going to call this

38
00:02:43,200 --> 00:02:44,970
one fib.

39
00:02:45,080 --> 00:02:46,320
J.S. like so

40
00:02:49,470 --> 00:02:56,150
that inside of here we'll start off with the little import statement at the top will import react and

41
00:02:56,150 --> 00:02:58,850
component or react.

42
00:02:58,910 --> 00:03:04,760
I will import X-posts from X yields which is the module that we're going to use for making requests

43
00:03:04,760 --> 00:03:12,930
to that back and express server will create a new class called fib which is going to be extending the

44
00:03:12,930 --> 00:03:19,040
component base class at the very top of this we're going to initialize some default state.

45
00:03:19,270 --> 00:03:22,900
It's also to say state equals an object.

46
00:03:22,960 --> 00:03:25,870
Now have a couple of different properties inside of it.

47
00:03:26,100 --> 00:03:35,270
Well say seen indexes is in array values is going to be an empty object an index will be an empty string

48
00:03:35,330 --> 00:03:36,060
like so.

49
00:03:37,450 --> 00:03:42,310
Now we're going to this code pretty quickly as a reminder I'm just kind of giving you a very high level

50
00:03:42,310 --> 00:03:43,680
description of what's going on.

51
00:03:43,690 --> 00:03:47,410
This is all stuff that is super unrelated from the world of docker.

52
00:03:47,500 --> 00:03:51,520
And if you don't care to learn any of this javascript stuff or you just don't care about it one bit.

53
00:03:51,610 --> 00:03:56,500
You can always continue on to that future section that has all this code for download.

54
00:03:56,710 --> 00:04:00,370
I'm just putting these videos in here in case you're kind of curious about the inner workings of the

55
00:04:00,370 --> 00:04:01,210
application.

56
00:04:02,400 --> 00:04:06,930
All right so now the instant that this component is rendered on the screen we're going to want to attempt

57
00:04:06,930 --> 00:04:10,380
to fetch some data from our back and API.

58
00:04:10,490 --> 00:04:12,020
So I will define a component.

59
00:04:12,050 --> 00:04:19,940
Did mt life cycle method that we'll call to help or methadose one will be the start fetch values and

60
00:04:19,940 --> 00:04:22,850
the other will be the start fetch indexes

61
00:04:26,320 --> 00:04:29,000
and then I will define both those helper methods.

62
00:04:29,200 --> 00:04:32,710
So first off fetch values.

63
00:04:32,780 --> 00:04:37,460
This is going to be an asynchronous method soil market with the async keyword because we're going to

64
00:04:37,460 --> 00:04:40,260
do a little bit of data fetching in here.

65
00:04:40,460 --> 00:04:46,780
So I will make a request to get a list of all the different values that have been stored on our API.

66
00:04:47,210 --> 00:04:54,860
I'll say a weight accedes start get flash API slash values slash current like so

67
00:04:58,480 --> 00:05:04,010
and then I will set my state on this component by calling this start set state and passing an object

68
00:05:04,340 --> 00:05:08,770
with values is values dot data like so.

69
00:05:10,880 --> 00:05:13,440
Then I will also set up the fetch indexes.

70
00:05:13,440 --> 00:05:18,640
So this is the list of indexes that have been requested and stored inside of our Post-Script server.

71
00:05:18,810 --> 00:05:23,790
It's kinda hard coded copy just saying hey here's a list of all the indexes that have been ever submitted

72
00:05:23,790 --> 00:05:24,810
to the application.

73
00:05:25,540 --> 00:05:32,660
And so for that we'll define another async method called fetch indexes.

74
00:05:34,120 --> 00:05:38,150
And this is going to look very similar to the helper function that we just put together.

75
00:05:38,350 --> 00:05:41,380
So say Konst seen indexes.

76
00:05:41,440 --> 00:05:46,590
Again this is a list of all the indexes we've ever seen with the await actual start.

77
00:05:46,600 --> 00:05:50,500
Get flash API slash values slash.

78
00:05:50,530 --> 00:05:53,940
All it all without a V.

79
00:05:56,250 --> 00:06:04,380
And we will again update our state by calling set state and I'll pass in a key value pair of scene indexes

80
00:06:04,710 --> 00:06:12,130
is seen indexes that data like so now I'm just going to double check to make sure that all my state

81
00:06:12,340 --> 00:06:13,130
lines up here.

82
00:06:13,150 --> 00:06:18,340
Yeah I got seen indexes and values values and see indexes.

83
00:06:18,580 --> 00:06:18,790
All right.

84
00:06:18,790 --> 00:06:20,360
So let's take a quick pause right here.

85
00:06:20,380 --> 00:06:24,430
When we come back the next section we're going to take this data that we are fetching from the back

86
00:06:24,430 --> 00:06:27,050
end to API and attempt to render it on the screen.

87
00:06:27,070 --> 00:06:30,820
After this component is rendered to a quick break and I'll see you in just a minute.