1
00:00:01,020 --> 00:00:02,460
Instructor: In the last section

2
00:00:02,460 --> 00:00:03,750
we created our app component.

3
00:00:03,750 --> 00:00:06,180
We'll now continue by adding in React Router

4
00:00:06,180 --> 00:00:07,620
to our application as well

5
00:00:07,620 --> 00:00:09,720
and we'll add one or two other components

6
00:00:09,720 --> 00:00:11,820
that a user can navigate to.

7
00:00:11,820 --> 00:00:13,670
So if we go back over to our mock-up,

8
00:00:14,640 --> 00:00:16,410
this is gonna be the root route

9
00:00:16,410 --> 00:00:18,744
of our entire application right here.

10
00:00:18,744 --> 00:00:19,770
So presumably we'll wanna show that

11
00:00:19,770 --> 00:00:22,980
welcome to our application message on the screen.

12
00:00:22,980 --> 00:00:24,960
And then, of course, as the user navigates around,

13
00:00:24,960 --> 00:00:27,963
we're going to want to show these other forms as well.

14
00:00:29,040 --> 00:00:30,450
At the top you'll notice that we've got

15
00:00:30,450 --> 00:00:33,870
a very consistent element of these header buttons.

16
00:00:33,870 --> 00:00:36,030
Now the actual content of the buttons

17
00:00:36,030 --> 00:00:38,760
seems to change over time, but it seems as though

18
00:00:38,760 --> 00:00:42,300
there is at least always a header of sorts.

19
00:00:42,300 --> 00:00:44,040
So I'm seeing a couple of different elements

20
00:00:44,040 --> 00:00:45,420
that we can create.

21
00:00:45,420 --> 00:00:47,700
We could definitely make a header component

22
00:00:47,700 --> 00:00:49,855
that could be displayed through the app

23
00:00:49,855 --> 00:00:51,510
and is not tied to any navigation.

24
00:00:51,510 --> 00:00:52,920
We could definitely make a component

25
00:00:52,920 --> 00:00:54,990
to represent the welcome page.

26
00:00:54,990 --> 00:00:56,640
And we could definitely make components

27
00:00:56,640 --> 00:01:00,960
for the sign up and the sign in forms as well.

28
00:01:00,960 --> 00:01:02,490
So definitely a couple of components

29
00:01:02,490 --> 00:01:04,650
that we're going to have to eventually create.

30
00:01:04,650 --> 00:01:06,570
Let's first make the header component

31
00:01:06,570 --> 00:01:08,340
that will show the different set of buttons

32
00:01:08,340 --> 00:01:09,840
at the very top of the screen.

33
00:01:11,070 --> 00:01:14,220
So back inside my project, I'll make a new file

34
00:01:14,220 --> 00:01:18,480
inside my components directory called header.js

35
00:01:18,480 --> 00:01:23,280
and then inside of here we'll get React from React.

36
00:01:23,280 --> 00:01:24,780
And then right underneath that

37
00:01:24,780 --> 00:01:27,510
we'll make a class-based component.

38
00:01:27,510 --> 00:01:29,550
The reason we're gonna make a class-based component

39
00:01:29,550 --> 00:01:31,680
is that the content of these buttons

40
00:01:31,680 --> 00:01:33,090
or the content of the header

41
00:01:33,090 --> 00:01:36,040
changes depending upon whether or not the user's logged in.

42
00:01:36,990 --> 00:01:38,640
That's not a good enough reason alone

43
00:01:38,640 --> 00:01:40,380
for making a class-based component,

44
00:01:40,380 --> 00:01:43,860
but I think that having some easy to define helper methods

45
00:01:43,860 --> 00:01:47,278
will make working with the header a little bit easier.

46
00:01:47,278 --> 00:01:49,470
So that's why we're gonna make a class component.

47
00:01:49,470 --> 00:01:53,940
So I'll do a class header extends component

48
00:01:53,940 --> 00:01:58,143
and I will remember to import component from React as well.

49
00:01:59,250 --> 00:02:02,643
So now inside of our header we can define our render method.

50
00:02:03,900 --> 00:02:08,353
And for right now, maybe we will just show a div

51
00:02:10,770 --> 00:02:12,330
and we're going to eventually want links

52
00:02:12,330 --> 00:02:15,210
to all the different pages inside of our application.

53
00:02:15,210 --> 00:02:17,640
We haven't wired up React Router just yet,

54
00:02:17,640 --> 00:02:19,860
but we might as well import the link tag

55
00:02:19,860 --> 00:02:22,110
from React Router dom into this file.

56
00:02:22,110 --> 00:02:24,480
And we can at least stub out a couple of different links

57
00:02:24,480 --> 00:02:26,970
to navigate around to the different pages

58
00:02:26,970 --> 00:02:30,210
that we will eventually have inside of our app.

59
00:02:30,210 --> 00:02:35,023
So at the top I will import link from React-router-dom

60
00:02:36,960 --> 00:02:40,713
and then inside of our div I'll do a few link tags.

61
00:02:42,090 --> 00:02:44,250
So the first link tag should take our user back

62
00:02:44,250 --> 00:02:47,045
to the homepage of our application

63
00:02:47,045 --> 00:02:48,450
or essentially the root route.

64
00:02:48,450 --> 00:02:51,420
For the actual text inside this link tag, I'll simply say,

65
00:02:51,420 --> 00:02:53,400
how about, Redux Auth,

66
00:02:54,415 --> 00:02:56,460
which is more or less the name of our application.

67
00:02:56,460 --> 00:02:58,170
So if a user clicks on this thing,

68
00:02:58,170 --> 00:03:00,843
we're going to take them to the root route.

69
00:03:02,220 --> 00:03:04,980
And now we can repeat that process for a couple

70
00:03:04,980 --> 00:03:07,630
of the other routes that a user is gonna navigate to.

71
00:03:08,580 --> 00:03:10,950
So I will copy down the link.

72
00:03:10,950 --> 00:03:12,990
I think the next link tag that we put together

73
00:03:12,990 --> 00:03:16,863
can take a user to our signup form which will be at /signup.

74
00:03:18,510 --> 00:03:23,283
So let's do signup and I'll change the text to say sign up.

75
00:03:24,210 --> 00:03:25,989
And then I'll do the same thing

76
00:03:25,989 --> 00:03:27,439
for the sign in form as well.

77
00:03:28,770 --> 00:03:29,823
Sign in.

78
00:03:31,236 --> 00:03:32,069
And you know what, while we're here,

79
00:03:32,069 --> 00:03:33,240
let's take care of the other links

80
00:03:33,240 --> 00:03:35,310
that we'll probably need as well.

81
00:03:35,310 --> 00:03:38,610
So we will also need a link that will take the user

82
00:03:38,610 --> 00:03:40,710
to the sign out page.

83
00:03:40,710 --> 00:03:42,390
And we also need a link that will take user

84
00:03:42,390 --> 00:03:44,460
to the feature page.

85
00:03:44,460 --> 00:03:46,320
So we'll define all these links right now

86
00:03:46,320 --> 00:03:48,330
and we'll just show them at all times.

87
00:03:48,330 --> 00:03:49,980
And then later on when we have the idea

88
00:03:49,980 --> 00:03:51,990
of authentication inside of our app,

89
00:03:51,990 --> 00:03:53,580
we'll come back to this component

90
00:03:53,580 --> 00:03:56,760
and we'll decide to show or hide different link tags

91
00:03:56,760 --> 00:04:00,150
depending upon our user's authentication status.

92
00:04:00,150 --> 00:04:02,620
So I'll do another link for sign out

93
00:04:06,690 --> 00:04:10,230
and maybe one last one for that feature page

94
00:04:10,230 --> 00:04:12,453
which we'll place on the feature route.

95
00:04:16,019 --> 00:04:17,970
And just to be consistent here with sign out,

96
00:04:17,970 --> 00:04:21,993
I'll do a space on sign up and sign in as well.

97
00:04:22,920 --> 00:04:24,510
Okay, so that looks pretty good.

98
00:04:24,510 --> 00:04:25,650
Now at the bottom of the file,

99
00:04:25,650 --> 00:04:28,443
I'll make sure that I add in my export default header.

100
00:04:31,050 --> 00:04:32,760
And then like we said just a moment ago,

101
00:04:32,760 --> 00:04:35,580
this header component appears to always be visible

102
00:04:35,580 --> 00:04:37,170
at the top of the screen.

103
00:04:37,170 --> 00:04:39,420
The content of it appears to change

104
00:04:39,420 --> 00:04:42,120
but the header itself is always visible.

105
00:04:42,120 --> 00:04:43,740
So I'm gonna put the header component

106
00:04:43,740 --> 00:04:47,250
directly into the app.js file, right above the text

107
00:04:47,250 --> 00:04:49,770
that we already put in here, right there.

108
00:04:49,770 --> 00:04:54,770
So inside of app.js, I will import header from header

109
00:04:59,370 --> 00:05:01,770
and then we'll place the header inside this div.

110
00:05:06,727 --> 00:05:08,640
And just to be a little bit more semantically correct,

111
00:05:08,640 --> 00:05:11,352
I'm going to wrap this JSX

112
00:05:11,352 --> 00:05:13,052
with a set of parentheses as well.

113
00:05:14,984 --> 00:05:16,620
If you do that, don't forget to clean up the semicolon

114
00:05:16,620 --> 00:05:19,642
that you might have at the very end of the div right here,

115
00:05:19,642 --> 00:05:21,473
'cause that semicolon will give you a little error.

116
00:05:22,888 --> 00:05:24,060
Okay, I think we're ready to test this out.

117
00:05:24,060 --> 00:05:26,160
So I'm gonna flip back over to the browser

118
00:05:27,450 --> 00:05:29,763
and once over here, I'll do a hard refresh.

119
00:05:35,208 --> 00:05:36,893
And then when the application loads back up,

120
00:05:38,850 --> 00:05:42,123
you'll notice that we get a nasty error message.

121
00:05:43,385 --> 00:05:44,648
So if you look at the error message

122
00:05:44,648 --> 00:05:46,392
it's actually not that bad.

123
00:05:46,392 --> 00:05:48,090
All it says is that you should not use a link tag

124
00:05:48,090 --> 00:05:50,640
outside of a router, which is totally fine

125
00:05:50,640 --> 00:05:51,900
'cause we have not yet set up

126
00:05:51,900 --> 00:05:54,330
React Router inside of our application.

127
00:05:54,330 --> 00:05:55,410
So let's take a quick pause,

128
00:05:55,410 --> 00:05:56,700
we'll come back to the next section

129
00:05:56,700 --> 00:06:00,030
and we'll wire up React Router inside of our root component.

130
00:06:00,030 --> 00:06:02,480
So quick break and I'll see you in just a minute.