1
00:00:01,050 --> 00:00:03,990
‫So with our new knowledge about JSX,

2
00:00:03,990 --> 00:00:06,840
‫let's now create a couple more components

3
00:00:06,840 --> 00:00:09,273
‫to keep building our application.

4
00:00:10,650 --> 00:00:14,220
‫But before we do that, this is probably the perfect time

5
00:00:14,220 --> 00:00:17,490
‫to show you the application as it will look like

6
00:00:17,490 --> 00:00:20,160
‫after we are finished with this section.

7
00:00:20,160 --> 00:00:22,470
‫So basically, we have this header here

8
00:00:22,470 --> 00:00:25,140
‫with the name of a pizzeria.

9
00:00:25,140 --> 00:00:27,840
‫Then down here we have the menu,

10
00:00:27,840 --> 00:00:30,720
‫and then basically here we have some kind

11
00:00:30,720 --> 00:00:32,790
‫of footer letting the user know

12
00:00:32,790 --> 00:00:36,030
‫that the restaurant is currently open, and this button,

13
00:00:36,030 --> 00:00:39,690
‫which of course doesn't do anything once we click it.

14
00:00:39,690 --> 00:00:43,320
‫So, here is like the heart of this application,

15
00:00:43,320 --> 00:00:46,920
‫which is the display of these six pizzas,

16
00:00:46,920 --> 00:00:51,150
‫and notice how we already kind of displayed this pizza here.

17
00:00:51,150 --> 00:00:53,490
‫And so here you see that we are going

18
00:00:53,490 --> 00:00:57,030
‫to reuse this pizza component six times

19
00:00:57,030 --> 00:01:00,570
‫in order to print these six pizzas.

20
00:01:00,570 --> 00:01:01,650
‫All right?

21
00:01:01,650 --> 00:01:04,350
‫But now, what I want to do in this lecture is

22
00:01:04,350 --> 00:01:08,433
‫to basically focus more on these bigger layout components.

23
00:01:09,840 --> 00:01:12,330
‫So, let's create one component

24
00:01:12,330 --> 00:01:14,703
‫for each of these three big parts.

25
00:01:18,030 --> 00:01:20,013
‫So, one for the header.

26
00:01:21,180 --> 00:01:23,010
‫So, a component called Header,

27
00:01:23,010 --> 00:01:24,873
‫and we can leave this empty for now.

28
00:01:25,721 --> 00:01:27,921
‫We are just building out here the structure.

29
00:01:28,860 --> 00:01:30,213
‫Then, one for the menu,

30
00:01:33,750 --> 00:01:37,443
‫and then one for the footer.

31
00:01:38,640 --> 00:01:41,760
‫And here, I'm always missing the parentheses,

32
00:01:41,760 --> 00:01:43,173
‫so that's not good.

33
00:01:45,150 --> 00:01:47,010
‫Yeah, nice.

34
00:01:47,010 --> 00:01:48,360
‫And just by the way,

35
00:01:48,360 --> 00:01:50,850
‫we could of course also write these functions

36
00:01:50,850 --> 00:01:54,300
‫as function expressions and arrow functions.

37
00:01:54,300 --> 00:01:58,710
‫So, we could also do const, let's just call it test,

38
00:01:58,710 --> 00:02:02,190
‫equal function like this.

39
00:02:02,190 --> 00:02:05,760
‫Or even simpler, it could be an arrow function.

40
00:02:05,760 --> 00:02:08,820
‫So if you prefer these types of functions,

41
00:02:08,820 --> 00:02:10,290
‫feel free to use those,

42
00:02:10,290 --> 00:02:14,520
‫but I always like to use the regular function keywords

43
00:02:14,520 --> 00:02:16,170
‫as I have been using.

44
00:02:16,170 --> 00:02:20,820
‫But anyway, let's now return something from here.

45
00:02:20,820 --> 00:02:24,240
‫And so here is where we write that name of the restaurant,

46
00:02:24,240 --> 00:02:29,240
‫which is Fast React Pizza Company.

47
00:02:32,400 --> 00:02:36,240
‫All right, and here we can now use this component instead

48
00:02:36,240 --> 00:02:37,563
‫of this h1.

49
00:02:39,090 --> 00:02:40,840
‫And again, we include it here

50
00:02:41,700 --> 00:02:45,270
‫as if it was just any other HTML element,

51
00:02:45,270 --> 00:02:47,913
‫and so that's the beauty of JSX.

52
00:02:49,590 --> 00:02:54,270
‫So, it changed to Fast React Pizza Co. right here now,

53
00:02:54,270 --> 00:02:57,633
‫and let's next up create a footer.

54
00:02:58,560 --> 00:03:00,930
‫And here let's actually play around a little bit

55
00:03:00,930 --> 00:03:04,410
‫with JSX and with create element.

56
00:03:04,410 --> 00:03:06,540
‫So using the knowledge that we gained

57
00:03:06,540 --> 00:03:07,830
‫in the previous lecture,

58
00:03:07,830 --> 00:03:11,820
‫let's instead of immediately returning to JSX,

59
00:03:11,820 --> 00:03:14,970
‫return a create element call.

60
00:03:14,970 --> 00:03:17,913
‫So, React.createElement,

61
00:03:20,406 --> 00:03:21,900
‫just so you can see how

62
00:03:21,900 --> 00:03:26,900
‫bad it would be to write components this way without JSX.

63
00:03:27,840 --> 00:03:32,840
‫So we want to return an HTML note, so an HTML element,

64
00:03:32,850 --> 00:03:34,440
‫named footer.

65
00:03:34,440 --> 00:03:36,480
‫Then here, the second argument is null

66
00:03:36,480 --> 00:03:38,490
‫because it is for props,

67
00:03:38,490 --> 00:03:41,160
‫and then here is the child element.

68
00:03:41,160 --> 00:03:43,560
‫So here, we just want some text.

69
00:03:43,560 --> 00:03:44,393
‫Let's say.

70
00:03:47,070 --> 00:03:49,413
‫Anteriors must actually be a string now.

71
00:03:50,280 --> 00:03:54,033
‫We're currently open.

72
00:03:55,226 --> 00:03:56,460
‫And now, of course, we need

73
00:03:56,460 --> 00:03:59,283
‫to then use the component here in the app.

74
00:04:02,520 --> 00:04:05,253
‫So that's footer, close it immediately.

75
00:04:09,178 --> 00:04:11,490
‫And let's check it out down here.

76
00:04:12,390 --> 00:04:14,880
‫Yeah, there is our footer.

77
00:04:14,880 --> 00:04:18,633
‫We can see that also here, at least if we had some space.

78
00:04:20,430 --> 00:04:23,760
‫Yeah, so in the body we have, of course,

79
00:04:23,760 --> 00:04:26,910
‫our root, where the entire application is rendered.

80
00:04:26,910 --> 00:04:30,333
‫Then we have this div right here, which is this one.

81
00:04:31,796 --> 00:04:34,230
‫So coming from the app component,

82
00:04:34,230 --> 00:04:39,230
‫and then we have here the h1, which is this one here,

83
00:04:39,270 --> 00:04:42,480
‫and then these three divs, each for one pizza,

84
00:04:42,480 --> 00:04:45,690
‫and finally the footer that we just created.

85
00:04:45,690 --> 00:04:48,840
‫So of course, here in the actual HTML

86
00:04:48,840 --> 00:04:52,920
‫we will no longer see the name of our components, right?

87
00:04:52,920 --> 00:04:56,280
‫Because once React renders everything into the dom,

88
00:04:56,280 --> 00:04:59,400
‫it only renders the h1 element itself.

89
00:04:59,400 --> 00:05:03,630
‫So the dom doesn't know that this h1 is actually coming

90
00:05:03,630 --> 00:05:07,410
‫from this header component and that these divs,

91
00:05:07,410 --> 00:05:11,100
‫for example, are actually coming from a pizza component.

92
00:05:11,100 --> 00:05:13,410
‫This webpage that is now being rendered here

93
00:05:13,410 --> 00:05:15,783
‫has no idea about any of that.

94
00:05:17,070 --> 00:05:17,903
‫Okay?

95
00:05:17,903 --> 00:05:20,610
‫But anyway, going back here to our footer,

96
00:05:20,610 --> 00:05:22,713
‫let's now just comment this out,

97
00:05:24,000 --> 00:05:26,400
‫and then return what we actually want to return,

98
00:05:28,350 --> 00:05:30,000
‫which is, for now, actually the same

99
00:05:30,000 --> 00:05:31,953
‫but written in a nice way.

100
00:05:34,380 --> 00:05:36,210
‫So we're currently open,

101
00:05:36,210 --> 00:05:40,050
‫and now let's actually enter JavaScript mode here.

102
00:05:40,050 --> 00:05:44,820
‫Why not, just to do some JavaScript in here,

103
00:05:44,820 --> 00:05:47,820
‫and let's just display the current time.

104
00:05:47,820 --> 00:05:49,170
‫We actually did that before.

105
00:05:49,170 --> 00:05:50,820
‫So, just create a new date,

106
00:05:50,820 --> 00:05:52,253
‫and then .toLocaleTimeString.

107
00:05:57,810 --> 00:05:59,400
‫All right.

108
00:05:59,400 --> 00:06:02,700
‫And so down here, we see that right now

109
00:06:02,700 --> 00:06:05,640
‫it's this time we're currently open.

110
00:06:05,640 --> 00:06:06,473
‫Nice.

111
00:06:06,473 --> 00:06:09,180
‫So, this is the power of being able

112
00:06:09,180 --> 00:06:13,230
‫to combine JavaScript basically right into the HTML.

113
00:06:13,230 --> 00:06:15,753
‫So, just as we learned in the previous lecture.

114
00:06:17,280 --> 00:06:20,610
‫Now finally, we have the menu here.

115
00:06:20,610 --> 00:06:22,473
‫And what do we want in the menu?

116
00:06:24,000 --> 00:06:27,003
‫Well, let's start by adding an h2 here,

117
00:06:28,380 --> 00:06:31,440
‫just saying our menu,

118
00:06:31,440 --> 00:06:35,070
‫and then let's actually place our pizzas here.

119
00:06:35,070 --> 00:06:38,643
‫So, these pizzas should actually be part of the menu.

120
00:06:39,540 --> 00:06:41,613
‫So, let's do that.

121
00:06:43,680 --> 00:06:46,710
‫You can just write pizza, but then of course,

122
00:06:46,710 --> 00:06:48,990
‫React is not going to be happy about that,

123
00:06:48,990 --> 00:06:53,373
‫because remember each time that we write one piece of JSX,

124
00:06:53,373 --> 00:06:58,373
‫that JSX can only have basically one root element.

125
00:07:01,710 --> 00:07:03,450
‫All right.

126
00:07:03,450 --> 00:07:05,553
‫So, let's remove all the pizzas.

127
00:07:06,540 --> 00:07:10,770
‫So, I'm cutting them and place them here.

128
00:07:10,770 --> 00:07:12,660
‫And now they are gone from here,

129
00:07:12,660 --> 00:07:14,823
‫because we didn't include the menu yet.

130
00:07:17,130 --> 00:07:19,620
‫So, let's quickly do that.

131
00:07:19,620 --> 00:07:21,540
‫And there we go.

132
00:07:21,540 --> 00:07:24,240
‫So we have the same result as before,

133
00:07:24,240 --> 00:07:27,930
‫but now our components are even more nested.

134
00:07:27,930 --> 00:07:30,780
‫So all of this here is the app component,

135
00:07:30,780 --> 00:07:32,220
‫and then inside the app

136
00:07:32,220 --> 00:07:35,550
‫we have the menu component nested into it,

137
00:07:35,550 --> 00:07:37,590
‫and then inside the menu

138
00:07:37,590 --> 00:07:40,470
‫we have these four pizza components.

139
00:07:40,470 --> 00:07:43,290
‫And so, now you really start to see this idea

140
00:07:43,290 --> 00:07:45,870
‫that we built complex user interfaces

141
00:07:45,870 --> 00:07:49,290
‫by combining small components into bigger ones.

142
00:07:49,290 --> 00:07:51,930
‫So, we have these really small pizza components,

143
00:07:51,930 --> 00:07:53,910
‫then we combine a couple of them

144
00:07:53,910 --> 00:07:56,460
‫into one slightly bigger component,

145
00:07:56,460 --> 00:07:59,940
‫which is the menu, which we then combine with header

146
00:07:59,940 --> 00:08:04,173
‫and footer to create the overall big app component.