1
00:00:02,000 --> 00:00:03,000
So let's get started writing

2
00:00:03,000 --> 00:00:05,000
our first custom React code

3
00:00:05,000 --> 00:00:08,000
by building our first custom component.

4
00:00:08,000 --> 00:00:11,000
As mentioned, components are these functions

5
00:00:11,000 --> 00:00:15,000
that return JSX code and as a React developer you'll write

6
00:00:15,000 --> 00:00:18,000
dozens, and hundreds, and thousands of those components

7
00:00:18,000 --> 00:00:21,000
to build up your React applications.

8
00:00:21,000 --> 00:00:25,000
Now we're about to build a Twitter-like demo application

9
00:00:25,000 --> 00:00:28,000
where random people can post their stuff

10
00:00:28,000 --> 00:00:30,000
for the entire world to read it, amazing.

11
00:00:30,000 --> 00:00:32,000
And along the way,

12
00:00:32,000 --> 00:00:35,000
whilst building that application, that demo website,

13
00:00:35,000 --> 00:00:38,000
we'll dive into many core React features.

14
00:00:38,000 --> 00:00:39,000
And we'll get started now by building

15
00:00:39,000 --> 00:00:42,000
our first custom component.

16
00:00:42,000 --> 00:00:45,000
Now for this demo application which we're about to build,

17
00:00:45,000 --> 00:00:49,000
there are actually multiple possible components

18
00:00:49,000 --> 00:00:50,000
we could identify.

19
00:00:50,000 --> 00:00:53,000
We could, for example, build this button

20
00:00:53,000 --> 00:00:55,000
as a separate component.

21
00:00:55,000 --> 00:00:59,000
Or this list of posts of tweets,

22
00:00:59,000 --> 00:01:00,000
if you wanna call it like this.

23
00:01:00,000 --> 00:01:02,000
Or the individual tweets.

24
00:01:02,000 --> 00:01:05,000
And indeed, that is how you should think of components

25
00:01:05,000 --> 00:01:07,000
and React applications.

26
00:01:07,000 --> 00:01:10,000
We have all these building blocks, and we then build

27
00:01:10,000 --> 00:01:12,000
the overall UI by combining them.

28
00:01:13,000 --> 00:01:16,000
Now, of course, you don't have to put every single character

29
00:01:16,000 --> 00:01:18,000
into its own component

30
00:01:18,000 --> 00:01:22,000
but it makes sense to group related functionalities together

31
00:01:22,000 --> 00:01:24,000
into different building blocks.

32
00:01:24,000 --> 00:01:26,000
And here we could, for example,

33
00:01:26,000 --> 00:01:30,000
start by taking a closer look at the individual posts.

34
00:01:30,000 --> 00:01:32,000
And the first custom component,

35
00:01:32,000 --> 00:01:34,000
which I wanna build together with you, therefore,

36
00:01:34,000 --> 00:01:38,000
is a component for such a single post.

37
00:01:38,000 --> 00:01:41,000
And later, we'll be able to then output multiple posts

38
00:01:41,000 --> 00:01:44,000
based on that custom component.

39
00:01:44,000 --> 00:01:47,000
Now therefore, back in this project, which I gave you,

40
00:01:47,000 --> 00:01:49,000
I'll go to that source folder

41
00:01:49,000 --> 00:01:52,000
and in there add a new folder called components.

42
00:01:53,000 --> 00:01:54,000
Now this name is up to you.

43
00:01:54,000 --> 00:01:58,000
You don't have to name this folder, components.

44
00:01:58,000 --> 00:02:01,000
You don't even have to create a folder in the first place,

45
00:02:01,000 --> 00:02:06,000
but it makes sense to group your component files together

46
00:02:06,000 --> 00:02:08,000
into such a folder.

47
00:02:08,000 --> 00:02:10,000
Now this app JSX file,

48
00:02:10,000 --> 00:02:12,000
which technically also contains that component,

49
00:02:12,000 --> 00:02:16,000
is not part of that folder because that will soon be our

50
00:02:16,000 --> 00:02:17,000
root component.

51
00:02:17,000 --> 00:02:19,000
And I'll get back to the concept

52
00:02:19,000 --> 00:02:21,000
of our root component later.

53
00:02:22,000 --> 00:02:24,000
So for the moment, let's go to components.

54
00:02:24,000 --> 00:02:28,000
And in there I'll add a new file called post.jsx.

55
00:02:28,000 --> 00:02:32,000
The name is of course up to you, but post makes sense,

56
00:02:32,000 --> 00:02:34,000
since we're about to add the code

57
00:02:34,000 --> 00:02:37,000
that defines a single post in there.

58
00:02:37,000 --> 00:02:40,000
The markup that defines a single post, for example,

59
00:02:40,000 --> 00:02:44,000
and the .jsx is required because we plan on writing

60
00:02:44,000 --> 00:02:46,000
of JSX code in there.

61
00:02:46,000 --> 00:02:50,000
If we had just .js that would work in projects

62
00:02:50,000 --> 00:02:53,000
created with create React app,

63
00:02:53,000 --> 00:02:58,000
but Vite projects actually want .jsx to support JSX code

64
00:02:59,000 --> 00:03:01,000
in JavaScript files.

65
00:03:01,000 --> 00:03:05,000
And now as a next step, we have to create a function.

66
00:03:05,000 --> 00:03:09,000
Because React components are just functions.

67
00:03:09,000 --> 00:03:12,000
It's as simple as that regular JavaScript functions

68
00:03:12,000 --> 00:03:14,000
with one special gotcha though,

69
00:03:14,000 --> 00:03:17,000
the name of your functions should start

70
00:03:17,000 --> 00:03:19,000
with an uppercase character.

71
00:03:20,000 --> 00:03:22,000
And, of course, the name also should describe

72
00:03:22,000 --> 00:03:25,000
what this component will be about.

73
00:03:25,000 --> 00:03:29,000
So here I plan on defining the markup that defines

74
00:03:29,000 --> 00:03:32,000
an individual post in that grid of posts.

75
00:03:32,000 --> 00:03:35,000
And therefore, I'll name the function post like this.

76
00:03:35,000 --> 00:03:39,000
And the upper-case starting character is important,

77
00:03:39,000 --> 00:03:42,000
it's not required technically in here

78
00:03:42,000 --> 00:03:46,000
but it is a recommendation, and it will be required later.

79
00:03:46,000 --> 00:03:49,000
Now, this function should be exported so that it can be used

80
00:03:49,000 --> 00:03:52,000
in our code files as well.

81
00:03:52,000 --> 00:03:55,000
And for that, you can use the standard modern JavaScript

82
00:03:55,000 --> 00:03:59,000
export syntax, where you either export it like this

83
00:03:59,000 --> 00:04:02,000
by adding the export keyword in front of the function

84
00:04:02,000 --> 00:04:04,000
or as a file default.

85
00:04:04,000 --> 00:04:09,000
And the only difference is then regarding how you import

86
00:04:09,000 --> 00:04:11,000
that function in another file.

87
00:04:12,000 --> 00:04:14,000
So here I export it as a default.

88
00:04:14,000 --> 00:04:17,000
And now in that function, as mentioned before,

89
00:04:17,000 --> 00:04:20,000
we should return some JSX code,

90
00:04:20,000 --> 00:04:23,000
because that is what turns a regular function

91
00:04:23,000 --> 00:04:25,000
into a React component.

92
00:04:25,000 --> 00:04:28,000
It's really only the fact that you start

93
00:04:28,000 --> 00:04:32,000
with an upper-case character and even more important

94
00:04:32,000 --> 00:04:34,000
that you return some JSX code.

95
00:04:35,000 --> 00:04:38,000
Now for a single post to get started here,

96
00:04:38,000 --> 00:04:40,000
we could return a div,

97
00:04:40,000 --> 00:04:42,000
and then in there may be a paragraph

98
00:04:42,000 --> 00:04:46,000
where we output the name of the author of the post.

99
00:04:46,000 --> 00:04:51,000
And below that another paragraph with the post body

100
00:04:51,000 --> 00:04:53,000
like React.js is awesome.

101
00:04:55,000 --> 00:04:58,000
Now, after hitting my auto format shortcut here in VS code,

102
00:04:58,000 --> 00:05:02,000
I get this function and that is now indeed

103
00:05:02,000 --> 00:05:05,000
our first custom React component.

104
00:05:07,000 --> 00:05:10,000
But, of course, if we just add this file like this,

105
00:05:10,000 --> 00:05:14,000
and save all changes, nothing changes on the screen.

106
00:05:14,000 --> 00:05:15,000
And by the way,

107
00:05:15,000 --> 00:05:20,000
you must make sure to keep that NPM run dev process here

108
00:05:20,000 --> 00:05:22,000
up and running.

109
00:05:22,000 --> 00:05:24,000
In case of a create React app project,

110
00:05:24,000 --> 00:05:28,000
it was NPM start with vite its NPM run dev,

111
00:05:28,000 --> 00:05:31,000
and this starts a development server

112
00:05:31,000 --> 00:05:33,000
which watches your code files,

113
00:05:33,000 --> 00:05:36,000
serves your website on the address

114
00:05:36,000 --> 00:05:39,000
that's being output here in the terminal,

115
00:05:39,000 --> 00:05:43,000
in my case, local host 5173 so that you can preview

116
00:05:43,000 --> 00:05:46,000
your React website there as you are building it.

117
00:05:47,000 --> 00:05:50,000
And it will automatically reload the website here

118
00:05:50,000 --> 00:05:53,000
and update the website and update what you see on the screen

119
00:05:53,000 --> 00:05:57,000
as you make and save changes to your code.

120
00:05:57,000 --> 00:06:00,000
So that's why this process must keep up and running.

121
00:06:01,000 --> 00:06:05,000
But with that, we still don't see our post content here.

122
00:06:05,000 --> 00:06:07,000
We still see, Hello World.

123
00:06:07,000 --> 00:06:11,000
The reason for that is that I created this component,

124
00:06:11,000 --> 00:06:13,000
this post component in a separate file

125
00:06:13,000 --> 00:06:15,000
but I'm not using it anywhere.

126
00:06:15,000 --> 00:06:19,000
It's the same as with a regular JavaScript function.

127
00:06:19,000 --> 00:06:24,000
If I add a function called, add, where I do something,

128
00:06:24,000 --> 00:06:27,000
even if I export that function

129
00:06:27,000 --> 00:06:29,000
it's still not getting used anywhere.

130
00:06:30,000 --> 00:06:33,000
Instead, exporting is just the first step

131
00:06:33,000 --> 00:06:35,000
to make it usable outside of this file.

132
00:06:35,000 --> 00:06:39,000
But we then have to use the function outside of this file.

133
00:06:39,000 --> 00:06:41,000
And it's the same with this component function.

134
00:06:42,000 --> 00:06:46,000
Now the place where we want to use our component functions

135
00:06:46,000 --> 00:06:50,000
is inside of JSX code of other components.

136
00:06:50,000 --> 00:06:53,000
So you build your complex user interfaces

137
00:06:53,000 --> 00:06:55,000
by combining components with each other

138
00:06:55,000 --> 00:06:58,000
and nesting components into each other.

139
00:06:58,000 --> 00:07:01,000
Now at the moment we have two places

140
00:07:01,000 --> 00:07:04,000
where we do have some JSX code in use.

141
00:07:04,000 --> 00:07:08,000
That's the main JSX file where we pass some JSX code

142
00:07:08,000 --> 00:07:13,000
to render and app JSX where I return, Hello World.

143
00:07:14,000 --> 00:07:18,000
Now in both places we could output our post component,

144
00:07:18,000 --> 00:07:22,000
but typically, when building React user interfaces,

145
00:07:22,000 --> 00:07:24,000
you have one root component.

146
00:07:24,000 --> 00:07:28,000
So one single component that's being output in main JSX

147
00:07:28,000 --> 00:07:32,000
and in this case, that would be the app component here.

148
00:07:32,000 --> 00:07:34,000
And then inside of that component,

149
00:07:34,000 --> 00:07:37,000
inside of the app component in this case,

150
00:07:37,000 --> 00:07:40,000
and any components used by that component,

151
00:07:40,000 --> 00:07:43,000
you use your other components.

152
00:07:43,000 --> 00:07:46,000
So the post component should be used in the JSX code

153
00:07:46,000 --> 00:07:48,000
of the app component.

154
00:07:48,000 --> 00:07:51,000
So there, instead of outputting Hello World,

155
00:07:51,000 --> 00:07:53,000
we could output post like this.

156
00:07:54,000 --> 00:07:56,000
Now in order to use it,

157
00:07:56,000 --> 00:07:59,000
we have to import that component function though

158
00:07:59,000 --> 00:08:02,000
and we do that by using the import keyword

159
00:08:02,000 --> 00:08:07,000
and then post from ./components/Post.

160
00:08:07,000 --> 00:08:10,000
And the file extension should be omitted, as mentioned.

161
00:08:10,000 --> 00:08:15,000
But you have to specify the full relative path from app JSX

162
00:08:15,000 --> 00:08:18,000
to that post .jsx file.

163
00:08:19,000 --> 00:08:23,000
So with that, we're importing this post component function

164
00:08:23,000 --> 00:08:24,000
and even though it's a function,

165
00:08:24,000 --> 00:08:28,000
we're not using it like you would normally use functions

166
00:08:28,000 --> 00:08:29,000
by executing it,

167
00:08:29,000 --> 00:08:33,000
but instead, we're using it like an HTML element,

168
00:08:33,000 --> 00:08:36,000
in this JSX code that's returned by app.

169
00:08:36,000 --> 00:08:39,000
In this case, it's the only element that's returned.

170
00:08:40,000 --> 00:08:43,000
And that's the special thing about your component functions.

171
00:08:43,000 --> 00:08:47,000
They are standard JavaScript functions

172
00:08:47,000 --> 00:08:50,000
but you can use them in JSX code

173
00:08:50,000 --> 00:08:53,000
and behind the scenes React will basically execute

174
00:08:53,000 --> 00:08:56,000
your component functions for you.

175
00:08:56,000 --> 00:09:00,000
Take a look at the html Vite JSX code to be precise,

176
00:09:00,000 --> 00:09:02,000
that's returned by them.

177
00:09:02,000 --> 00:09:06,000
And then build the overall user interface and render it

178
00:09:06,000 --> 00:09:07,000
to the screen.

179
00:09:07,000 --> 00:09:10,000
That's what React is doing for you.

180
00:09:10,000 --> 00:09:13,000
So React is then generating the browser instructions

181
00:09:13,000 --> 00:09:16,000
that are needed to bring your HTML code

182
00:09:16,000 --> 00:09:18,000
to life in the browser.

183
00:09:19,000 --> 00:09:22,000
Now what's really important is that,

184
00:09:22,000 --> 00:09:27,000
in the place where you use a component function in JSX code,

185
00:09:27,000 --> 00:09:31,000
like we're doing it here with post or in main JSX with app,

186
00:09:31,000 --> 00:09:34,000
your component functions must start

187
00:09:34,000 --> 00:09:36,000
with an uppercase character.

188
00:09:36,000 --> 00:09:40,000
It's optional in the file where you define them,

189
00:09:40,000 --> 00:09:43,000
but there you typically also start their names

190
00:09:43,000 --> 00:09:45,000
with an uppercase character.

191
00:09:45,000 --> 00:09:48,000
But it's absolutely required in the places

192
00:09:48,000 --> 00:09:51,000
where you use your components.

193
00:09:51,000 --> 00:09:56,000
So in app JSX where I import post from the post JSX file,

194
00:09:56,000 --> 00:10:00,000
this name here post must start with an uppercase character.

195
00:10:00,000 --> 00:10:03,000
It should not start with a lowercase character

196
00:10:03,000 --> 00:10:07,000
because in the JSX code you add to your components

197
00:10:07,000 --> 00:10:10,000
elements that start with a lowercase character

198
00:10:10,000 --> 00:10:13,000
are considered to be default elements.

199
00:10:13,000 --> 00:10:16,000
So React will try to find a default HTML element

200
00:10:16,000 --> 00:10:17,000
with that name,

201
00:10:17,000 --> 00:10:20,000
which it would not find in case of post.

202
00:10:21,000 --> 00:10:24,000
And elements starting with the uppercase character

203
00:10:24,000 --> 00:10:27,000
are considered to be custom components.

204
00:10:27,000 --> 00:10:29,000
And in that case, React will go ahead and execute

205
00:10:29,000 --> 00:10:32,000
your custom component function as mentioned before.

206
00:10:33,000 --> 00:10:35,000
But that's why default elements like div

207
00:10:35,000 --> 00:10:38,000
are written like this and do not start

208
00:10:38,000 --> 00:10:40,000
with an upper-case character,

209
00:10:40,000 --> 00:10:43,000
but your own components must start

210
00:10:43,000 --> 00:10:46,000
with an upper-case character when using them in JSX.

211
00:10:46,000 --> 00:10:50,000
And that's really an important rule to memorize.

212
00:10:50,000 --> 00:10:52,000
But with all of that out of the way,

213
00:10:52,000 --> 00:10:56,000
if we save everything, we get this content on the screen.

214
00:10:56,000 --> 00:10:59,000
And this is now the content we defined

215
00:10:59,000 --> 00:11:01,000
in our own post component here.

216
00:11:01,000 --> 00:11:03,000
So even though it's not super fancy

217
00:11:03,000 --> 00:11:06,000
and definitely not interactive in any way,

218
00:11:06,000 --> 00:11:10,000
it is our first custom component defined

219
00:11:10,000 --> 00:11:13,000
and used in our React project.