WEBVTT

0
00:00.260 --> 00:00.660
All right.

1
00:00.690 --> 00:03.360
So how did you get on with that challenge?

2
00:03.360 --> 00:04.200
Was it easy?

3
00:04.200 --> 00:05.620
Was it hard?

4
00:05.660 --> 00:10.560
If it was really easy and you've managed to complete everything and you've gotten it to look like this,

5
00:10.890 --> 00:14.670
then feel free to just skip this lesson and continue in the curriculum.

6
00:14.670 --> 00:19.890
But if you got stuck at a certain point or if you want to see me go through the solution then continue

7
00:19.890 --> 00:20.550
watching

8
00:20.700 --> 00:23.140
and let's run through the solution together.

9
00:23.160 --> 00:24.390
First step is easy enough.

10
00:24.390 --> 00:26.160
Create a new React app.

11
00:26.160 --> 00:28.140
We've done this a million times.

12
00:28.140 --> 00:30.820
So let's go ahead and just do that quickly.

13
00:31.170 --> 00:31.800
As always,

14
00:31.800 --> 00:38.010
let's just start out by rendering a h1 and just check to see that it actually works and it gets

15
00:38.010 --> 00:43.380
shown on screen in the element with id of root.

16
00:43.470 --> 00:49.320
And once we can see it in there, then we can go ahead and continue onto the next step.

17
00:49.380 --> 00:53.330
So we're going to be creating a App.jsx component.

18
00:53.340 --> 00:59.310
Now notice how in the instructions I've always added the JSX extension for the file names.

19
00:59.310 --> 01:02.550
Now this currently is a point of contention.

20
01:02.610 --> 01:09.510
The official AirBnB style guide which a lot of people follow for creating React components advises us

21
01:09.600 --> 01:10.950
to do this.

22
01:10.950 --> 01:17.520
And the reason is because when you have these files say Atlassian, Bitbucket or some other services

23
01:17.850 --> 01:24.810
it needs to recognize this extension in order to highlight the syntax in the correct way. But actually

24
01:24.810 --> 01:30.150
in terms of the functionality for React apps, you can actually just leave it as App.js and have

25
01:30.180 --> 01:34.270
all of your files just as Javascript files.

26
01:34.320 --> 01:39.360
So this is something that a lot of people argue about and I've recently started removing the x from

27
01:39.360 --> 01:41.700
my App.js files as well.

28
01:41.700 --> 01:46.500
But at the end of the day, it really doesn't matter as long as you pick one and you stick to it and you're

29
01:46.500 --> 01:49.110
consistent about it then that's absolutely fine.

30
01:49.920 --> 01:56.040
So in order to create a App.js component, I'm already going to start creating a components folder

31
01:56.790 --> 02:06.150
and that way I can create my new App.js file inside my components folder. And inside here I'm going

32
02:06.150 --> 02:09.470
to be creating the very root of my component tree.

33
02:09.510 --> 02:17.160
So I'm going to import React from react and then I'm going to create a functional component called App

34
02:17.670 --> 02:21.930
and this is going to simply return a div.

35
02:25.340 --> 02:28.940
And inside this div, let's just make sure that it works. Again

36
02:28.970 --> 02:34.790
let's create an h1 called Hello App to differentiate it from the old content and then let's go ahead

37
02:34.790 --> 02:37.820
and export this as the default.

38
02:37.880 --> 02:42.800
So the only thing that we actually have inside this file is just our app function.

39
02:42.800 --> 02:47.070
So it makes sense to export it just as the default export.

40
02:47.360 --> 02:54.170
Now let's hit save and let's head back to our index.js. Instead of rendering our h1 Hello world,

41
02:54.430 --> 02:58.580
I'm going to render that app component that we built just now.

42
02:58.580 --> 03:02.000
But in order for it to be recognized, we of course have to import it.

43
03:02.060 --> 03:10.760
So import app from ./components/App and I'm gonna leave off the js at the end.

44
03:10.760 --> 03:15.660
Now you can see it's working because we can see Hello App instead sort of Hello world.

45
03:15.680 --> 03:17.250
So now we can tick off

46
03:17.270 --> 03:21.270
step 2. Step 3 is to create a header

47
03:21.290 --> 03:27.950
.jsx component that renders a header element. Again that means we're going to be creating a new component

48
03:28.040 --> 03:34.390
inside our already created components folder. And it's going to be called header.jsx.

49
03:34.620 --> 03:39.980
Now inside our header.jsx we're going to do all the classic things that we always have to do

50
03:39.980 --> 03:48.110
inside any component which is to import and then create the component which is a Header function and

51
03:48.230 --> 03:58.690
then we're going to export it as the default. The header is going to be inserted into the app component

52
03:59.050 --> 04:03.430
instead of the h1. And inside this header component,

53
04:03.430 --> 04:10.380
we need to render a header element and a keeper app name inside an h1.

54
04:10.480 --> 04:17.570
So instead of returning nothing, let's go ahead and return a header element and remember that the HTML

55
04:17.570 --> 04:26.570
elements are lowercase and our custom components are always capitalized with Pascal case.

56
04:27.010 --> 04:32.980
So this way React can differentiate when you are trying to use a custom React component versus when

57
04:32.980 --> 04:39.460
you're just trying to tap into the native HTML elements. Inside this header HTML element I'm

58
04:39.460 --> 04:45.610
going to create an h1 element and this is just going to say keeper because that's what I'm going

59
04:45.610 --> 04:49.790
to name my app. You might name it something else, it really doesn't matter.

60
04:49.930 --> 04:57.740
But now we're going to try and render this header component inside our App.js instead of this h

61
04:57.740 --> 04:59.320
1 right here.

62
04:59.500 --> 05:06.010
So let's go ahead and add this as a self closing tag and in order for us to use it, we of course have

63
05:06.010 --> 05:15.190
to import the header component from the ./header file. And now once we refresh our website, you

64
05:15.190 --> 05:21.620
can see that our header has gone in with all of the styling and all of the bells and whistles.

65
05:21.820 --> 05:28.420
And the reason for this is because inside are public folder, we've got a styles.css file which

66
05:28.420 --> 05:35.740
says that the header elements should always have a yellow background, has this margin, padding and the

67
05:35.740 --> 05:37.750
box shadow at the bottom.

68
05:37.750 --> 05:44.880
The h1 elements inside a header component should have this colour and the McLaren font family.

69
05:44.980 --> 05:51.280
So we're seeing all of these styles being applied just because we are using the same HTML elements which

70
05:51.370 --> 05:59.230
are being targeted in our CSS. If in your case you don't see the styling being applied, then it might be

71
05:59.230 --> 06:07.150
because you are actually not using the elements that are being targeted in your styles.css. If this

72
06:07.150 --> 06:12.400
was something that you got stuck on, then it might be a chance to go back to your code and see if you

73
06:12.400 --> 06:16.240
can continue the challenge with this knowledge in hand.

74
06:16.240 --> 06:22.480
Now that we've completed step 3, it's time to move on to step 4. And step 4 is to create

75
06:22.570 --> 06:30.130
a footer component that renders a footer element to show a copyright message with a dynamically updated

76
06:30.250 --> 06:30.880
year.

77
06:30.880 --> 06:38.830
So let's go and create a new footer.jsx and do all of the housekeeping.

78
06:41.410 --> 06:49.120
And in terms of the footer, all we want to return is just a simple paragraph element. But the paragraph

79
06:49.150 --> 06:56.790
element is hopefully going to write some text dynamically. So it's going to say something like copyright

80
06:56.830 --> 07:02.110
and then maybe you can add in the copyright symbol if you wanted to, you can either copy it from here

81
07:02.590 --> 07:10.090
or you can search in Google for the copyright symbol and just copy it from here.

82
07:10.150 --> 07:12.060
Either way you should be able to get that symbol.

83
07:12.490 --> 07:18.400
But the important part is that in the instructions we mentioned that we wanted a dynamically created

84
07:18.400 --> 07:18.690
year.

85
07:18.700 --> 07:24.460
So instead of just typing in 2019 in which case it's going to be out of date pretty soon

86
07:24.600 --> 07:29.920
and there are developers who feel really strongly about hating on websites that don't have a dynamic

87
07:29.920 --> 07:30.650
footer.

88
07:30.790 --> 07:36.970
There's even a website created called updateyourfooter.com so that you have a dynamic timestamp.

89
07:37.390 --> 07:43.090
And they've got javascript snippets, PHP snippets, basically trying to encourage web developers to

90
07:43.090 --> 07:47.100
always use a dynamic year in their footer.

91
07:47.170 --> 07:50.250
So we already know how to create a dynamic year

92
07:50.310 --> 07:50.870
right?

93
07:50.890 --> 07:56.320
We create a new date object with Javascript and then we use the get full year method.

94
07:56.320 --> 07:59.470
So let's go ahead and apply it in our code.

95
07:59.530 --> 08:06.820
You can either do this inline right here using a set of JSX curly braces or you can create a

96
08:06.820 --> 08:15.360
constant here called the current year maybe and set it to equal a new Date object and then we get

97
08:15.400 --> 08:20.090
full year, call that method in order to store it inside this constant.

98
08:20.320 --> 08:22.750
And then you can just insert it in here.

99
08:23.230 --> 08:31.190
Alternatively you could have it inline by just putting this code inside here of course. Now the proof

100
08:31.250 --> 08:32.450
is really in the pudding.

101
08:32.450 --> 08:38.810
So let's go ahead and save our footer.jsx and import it into our app.

102
08:41.660 --> 08:45.200
And render it just below the header,

103
08:46.510 --> 08:47.100
like so.

104
08:48.120 --> 08:55.190
And if you have the same appearance as I have and you're miffed as to, "how can I get it down at the bottom?

105
08:55.200 --> 08:56.210
how can I get it

106
08:56.250 --> 08:58.020
this particular color?"

107
08:58.020 --> 09:03.950
Well it's probably because we're not actually applying any styling to the text in our footer.

108
09:03.990 --> 09:11.230
So in order to investigate, you can head into the styles.css and see how these styles are being targeted.

109
09:11.250 --> 09:17.280
So for example notice how we've got a position absolute test-align center which should theoretically

110
09:17.280 --> 09:19.890
center a HTML element.

111
09:19.890 --> 09:27.480
But notice how that is targeting a footer HTML element. And also the text color of this kind of

112
09:27.600 --> 09:35.650
gray color that you see here is targeting paragraph elements inside a footer element.

113
09:35.790 --> 09:41.040
So it's really likely that you might have had the same problem because it's very easy enough to just

114
09:41.040 --> 09:46.590
render a paragraph tag. But if you're not getting the styling it might be because you're not wrapping

115
09:46.590 --> 09:53.630
it inside a footer element which is what is used inside these styles.css

116
09:53.790 --> 09:59.770
in order to convey all of this styling, the centering and the color etc.

117
09:59.790 --> 10:08.010
So that's a common source of confusion. But now we've completed step 4 and all we have left is to

118
10:08.010 --> 10:09.570
create a Note component

119
10:09.570 --> 10:16.010
and style the Note component. The Note component is probably going to go in between the header and the

120
10:16.020 --> 10:18.410
footer, in the middle here.

121
10:18.450 --> 10:22.000
So let's go ahead and create this new Note.

122
10:22.000 --> 10:26.090
jsx component, import React from react,

123
10:26.090 --> 10:28.140
export it as the default

124
10:28.140 --> 10:34.310
and let's think about what it is that we need to write in order to create a new Note. So we want to have

125
10:34.310 --> 10:42.010
a h1 and a paragraph which is going to denote the title and the content stored inside a div group.

126
10:42.080 --> 10:47.330
And this is a very common way of grouping a component using a single divider

127
10:47.330 --> 10:47.900
right?

128
10:48.140 --> 10:56.290
Let's go ahead and add an h1 which we'll just call, 'This is the title' and then let's add a paragraph,

129
10:56.300 --> 11:02.690
'This is the content' and it doesn't really matter what you put in here as long as you've got some content

130
11:02.750 --> 11:04.710
that can be shown on screen.

131
11:04.730 --> 11:08.710
Now let's go into our App.js, import our note

132
11:11.350 --> 11:15.310
and add it in between the header and the footer.

133
11:15.310 --> 11:16.420
So here it is.

134
11:16.510 --> 11:19.650
But why does that not look like this?

135
11:19.660 --> 11:23.440
Well we need to look for clues inside the styles.css.

136
11:24.230 --> 11:24.930
Here,

137
11:25.060 --> 11:32.930
you'll notice that there is a class style called note and it defines things such as a box-shadow, border-

138
11:32.930 --> 11:36.550
radius, padding and how it should be arranged.

139
11:36.640 --> 11:42.520
And then we've also got styles for <h1>s associated with the note class, paragraphs associated with

140
11:42.520 --> 11:43.660
the note class.

141
11:43.660 --> 11:49.750
So it seems like we need to apply this class style to our note component.

142
11:49.750 --> 11:58.180
This is a quick tip. You might think that you can actually apply the style inside your custom component.

143
11:58.240 --> 12:01.200
You might say something like class name,

144
12:01.270 --> 12:05.450
remember that's the React way of targeting a particular

145
12:05.460 --> 12:10.580
CSS class, and class name equals

146
12:10.660 --> 12:11.670
note right?

147
12:12.220 --> 12:20.020
But unfortunately this does not actually do what you expect it to do. That note style is not in fact

148
12:20.020 --> 12:26.080
being applied and we're going to learn about this a little bit later on when we learn about React properties

149
12:26.530 --> 12:34.990
but essentially whenever you are applying a HTML attribute such as class name or style or onClick or

150
12:34.990 --> 12:40.840
all of those things, they shouldn't go into your custom component, so the components that you've created

151
12:40.840 --> 12:48.190
like note or header or footer. Instead they need to be applied to a HTML element such as our div

152
12:48.250 --> 12:49.150
here.

153
12:49.180 --> 12:56.860
So if I go ahead and add my class name right here with the name of note, you'll see that this now works

154
12:56.890 --> 13:01.100
predictably. And we're going to be talking about this a little bit later on

155
13:01.150 --> 13:06.910
so remember that when you're using HTML attributes they can only be applied to HTML elements

156
13:07.120 --> 13:15.130
even if it's inside the JSX and not your custom created React elements.

157
13:15.220 --> 13:22.030
So now that we've completed everything in our challenge, we can take a look at the final website we've

158
13:22.030 --> 13:27.970
created using what we've learnt about React. And you can see that it looks pretty much exactly the same

159
13:28.150 --> 13:31.420
as the sample app that I gave you to compare against.

160
13:32.260 --> 13:34.430
How did you get on with this challenge?

161
13:34.630 --> 13:40.000
If there was anything that was confusing, I recommend to just take a moment and play around with the

162
13:40.000 --> 13:45.520
code and change some things or or switch things around just so that you really get to grips with it

163
13:45.520 --> 13:46.960
before moving on.

164
13:46.960 --> 13:54.220
This is kind of a checkpoint or a save point if you will and it's a good idea to even just take a break

165
13:54.220 --> 14:01.150
and have a think about it before you move on. But once you're done then head back and in the next lesson

166
14:01.420 --> 14:04.620
we're going to be learning about React properties.

167
14:04.620 --> 14:07.030
So for all of that and more, I see there.