1
00:00:00,930 --> 00:00:01,763
Instructor: In the last section,

2
00:00:01,763 --> 00:00:03,330
we put together a React router,

3
00:00:03,330 --> 00:00:06,360
and we've got our default route of root route

4
00:00:06,360 --> 00:00:09,630
showing our application component right now.

5
00:00:09,630 --> 00:00:11,670
Remember, we're gonna have a lot of different components

6
00:00:11,670 --> 00:00:12,570
inside the section.

7
00:00:12,570 --> 00:00:13,410
And it's really important

8
00:00:13,410 --> 00:00:16,500
to keep kind of consistent terminology across the board.

9
00:00:16,500 --> 00:00:17,880
The next component that we're gonna make

10
00:00:17,880 --> 00:00:19,860
is gonna be our header component.

11
00:00:19,860 --> 00:00:21,210
And this header is something

12
00:00:21,210 --> 00:00:24,360
that we're gonna spend a pretty good amount of time on.

13
00:00:24,360 --> 00:00:25,830
The header component's purpose

14
00:00:25,830 --> 00:00:28,800
is to either show the Sign In and Sign Up links

15
00:00:28,800 --> 00:00:30,420
or show the Sign Out link.

16
00:00:30,420 --> 00:00:31,770
Depending on whether or not the user

17
00:00:31,770 --> 00:00:33,900
is currently authenticated.

18
00:00:33,900 --> 00:00:35,580
For right now, we don't really have any state

19
00:00:35,580 --> 00:00:37,860
to indicate whether or not the user is authenticated,

20
00:00:37,860 --> 00:00:41,220
so we'll just kind of scaffold out something for right now.

21
00:00:41,220 --> 00:00:43,320
I'm gonna create my header component

22
00:00:43,320 --> 00:00:46,560
by making a new file inside the component's directory

23
00:00:46,560 --> 00:00:48,753
and I'm just gonna call it header.js.

24
00:00:50,760 --> 00:00:51,630
Inside of here,

25
00:00:51,630 --> 00:00:54,840
I expect to have probably not any application levels.

26
00:00:54,840 --> 00:00:57,060
Or excuse me, any component level state.

27
00:00:57,060 --> 00:00:59,100
So this definitely makes it well-suited

28
00:00:59,100 --> 00:01:00,750
for being a functional component.

29
00:01:00,750 --> 00:01:01,770
But I expect there to be

30
00:01:01,770 --> 00:01:04,379
a reasonable amount of kind of logic in here

31
00:01:04,379 --> 00:01:06,060
to decide what to render

32
00:01:06,060 --> 00:01:08,520
based on whether or not the user is authenticated.

33
00:01:08,520 --> 00:01:11,280
And so just to organize my code more effectively,

34
00:01:11,280 --> 00:01:14,700
I'm going to use a class-based component here.

35
00:01:14,700 --> 00:01:16,390
So I'll import React

36
00:01:18,120 --> 00:01:20,823
and component from React.

37
00:01:21,990 --> 00:01:23,940
And then I'll define my component,

38
00:01:23,940 --> 00:01:27,453
class Header extends Component.

39
00:01:29,010 --> 00:01:31,173
And by default we will render,

40
00:01:33,210 --> 00:01:36,330
we're gonna make use of a lot of Bootstrap CSS here.

41
00:01:36,330 --> 00:01:40,560
So I am going to use some Bootstrap class names.

42
00:01:40,560 --> 00:01:45,063
I'll place a nav with a class name of navbar,

43
00:01:46,261 --> 00:01:47,493
navbar-light.

44
00:01:49,740 --> 00:01:50,970
And then inside of here,

45
00:01:50,970 --> 00:01:52,584
I'll place,

46
00:01:52,584 --> 00:01:54,910
just put on a UL for right now

47
00:01:57,300 --> 00:02:00,840
with a class of nav navbar-nav.

48
00:02:00,840 --> 00:02:04,050
Geez, these are just a lot of duplication, huh?

49
00:02:04,050 --> 00:02:05,820
You can't get away with going kinda light on this.

50
00:02:05,820 --> 00:02:07,590
You gotta put it all in here.

51
00:02:07,590 --> 00:02:08,880
And then inside of this nav,

52
00:02:08,880 --> 00:02:09,713
just to make sure

53
00:02:09,713 --> 00:02:11,910
that we've got everything working right now,

54
00:02:11,910 --> 00:02:16,653
I'll place an LI with a class name of nav item.

55
00:02:21,690 --> 00:02:23,280
And we'll start off this application

56
00:02:23,280 --> 00:02:27,057
by just putting in some simple text that says, "Sign in."

57
00:02:29,700 --> 00:02:30,533
At the bottom,

58
00:02:30,533 --> 00:02:33,160
we'll then export the header

59
00:02:36,030 --> 00:02:36,863
like so.

60
00:02:36,863 --> 00:02:37,696
Very good.

61
00:02:37,696 --> 00:02:40,650
So a simple component that shows a nav bar.

62
00:02:40,650 --> 00:02:43,050
One LI that just says Sign In.

63
00:02:43,050 --> 00:02:44,970
Again, we're taking kind of small steps here,

64
00:02:44,970 --> 00:02:47,850
starting with just kind of the very static content

65
00:02:47,850 --> 00:02:49,170
that we want to get on the screen.

66
00:02:49,170 --> 00:02:50,160
And then we're gonna come back

67
00:02:50,160 --> 00:02:52,953
and kind of backfill some of the authentication stuff.

68
00:02:53,820 --> 00:02:54,660
Now we wanna make sure

69
00:02:54,660 --> 00:02:57,090
that no matter what inside of our application,

70
00:02:57,090 --> 00:02:59,460
whether or not a user is signed in or signed out,

71
00:02:59,460 --> 00:03:00,360
doesn't matter,

72
00:03:00,360 --> 00:03:03,060
we always want to show the header component

73
00:03:03,060 --> 00:03:05,250
at the top of our application.

74
00:03:05,250 --> 00:03:06,900
That means that we don't really wanna put it

75
00:03:06,900 --> 00:03:08,850
into our router per se, right?

76
00:03:08,850 --> 00:03:10,410
Because the router kind of implies

77
00:03:10,410 --> 00:03:12,270
that sometimes we'll be showing this component

78
00:03:12,270 --> 00:03:13,533
and sometimes we won't.

79
00:03:14,430 --> 00:03:18,390
Instead, we can add the header to our app component.

80
00:03:18,390 --> 00:03:19,350
The app component

81
00:03:19,350 --> 00:03:21,420
is always showing the screen no matter what.

82
00:03:21,420 --> 00:03:22,830
Which makes it a really good place

83
00:03:22,830 --> 00:03:25,110
to put something that is very consistent

84
00:03:25,110 --> 00:03:27,510
and something we always expect to be on the screen,

85
00:03:27,510 --> 00:03:28,473
like the header.

86
00:03:29,340 --> 00:03:32,220
So inside of app.js,

87
00:03:32,220 --> 00:03:35,320
I will import my header

88
00:03:37,980 --> 00:03:39,450
and then I'll show it on,

89
00:03:39,450 --> 00:03:40,770
inside this app component

90
00:03:40,770 --> 00:03:43,053
just by dropping it inside of the div.

91
00:03:44,220 --> 00:03:46,023
Like so with header tag.

92
00:03:47,040 --> 00:03:49,710
Now I should be able to flip back over to Google Chrome.

93
00:03:49,710 --> 00:03:51,870
I currently have the React simple starter

94
00:03:51,870 --> 00:03:53,910
but if I refresh the page,

95
00:03:53,910 --> 00:03:56,730
I get my Sign In at the top.

96
00:03:56,730 --> 00:03:57,810
Right now it's not a link,

97
00:03:57,810 --> 00:04:01,110
so it doesn't actually quite do anything just yet.

98
00:04:01,110 --> 00:04:04,050
But certainly when we put together the Sign In page

99
00:04:04,050 --> 00:04:05,070
the Sign In form,

100
00:04:05,070 --> 00:04:07,140
we'll link over to that page.

101
00:04:07,140 --> 00:04:08,400
That seems like a really good place

102
00:04:08,400 --> 00:04:11,700
to start to dive into our application with the Sign In form.

103
00:04:11,700 --> 00:04:13,740
So let's start working on this Sign In form

104
00:04:13,740 --> 00:04:15,060
inside the next section.

105
00:04:15,060 --> 00:04:16,010
I'll see you there.