1
00:00:01,000 --> 00:00:03,000
This first code here

2
00:00:03,000 --> 00:00:05,000
for our Todo element,

3
00:00:05,000 --> 00:00:07,000
exists in this App component.

4
00:00:07,000 --> 00:00:09,000
There's nothing wrong with it.

5
00:00:09,000 --> 00:00:12,000
But not only do we have some static text here,

6
00:00:12,000 --> 00:00:15,000
we would of course want the actual Todo title here.

7
00:00:15,000 --> 00:00:17,000
Not only is that the case,

8
00:00:17,000 --> 00:00:19,000
if we would want to add a second Todo,

9
00:00:19,000 --> 00:00:23,000
we would have to replicate this entire code block.

10
00:00:23,000 --> 00:00:26,000
And if we then ever want to change anything about that,

11
00:00:26,000 --> 00:00:28,000
let's say we wanna add extra span

12
00:00:28,000 --> 00:00:29,000
to that button, whatever.

13
00:00:29,000 --> 00:00:33,000
Then we have to do this in all those places

14
00:00:33,000 --> 00:00:35,000
where we use the same code.

15
00:00:35,000 --> 00:00:37,000
That's not really what we wanna do.

16
00:00:37,000 --> 00:00:41,000
That's why React embraces this concept of components

17
00:00:41,000 --> 00:00:43,000
of building our own building blocks,

18
00:00:43,000 --> 00:00:45,000
which we then compose together.

19
00:00:46,000 --> 00:00:49,000
For this, I'll remove this duplicate code

20
00:00:49,000 --> 00:00:52,000
and instead create a new file.

21
00:00:52,000 --> 00:00:55,000
A new file in that src folder,

22
00:00:55,000 --> 00:00:58,000
which I'll name Todo.js.

23
00:00:58,000 --> 00:00:59,000
The name is up to you,

24
00:00:59,000 --> 00:01:01,000
the extension should be dot js though.

25
00:01:01,000 --> 00:01:05,000
And that will simply hold another component,

26
00:01:05,000 --> 00:01:08,000
we're going to build our second component here.

27
00:01:09,000 --> 00:01:11,000
Now typically, those component files,

28
00:01:11,000 --> 00:01:14,000
except for that so called root component,

29
00:01:14,000 --> 00:01:15,000
this App component,

30
00:01:15,000 --> 00:01:18,000
are stored in a separate components folder,

31
00:01:18,000 --> 00:01:21,000
which I also added in the source folder.

32
00:01:21,000 --> 00:01:24,000
So, I'll move Todo.js into that folder.

33
00:01:24,000 --> 00:01:25,000
That's not a must do,

34
00:01:25,000 --> 00:01:28,000
but it is a convention to keep your project organized.

35
00:01:29,000 --> 00:01:31,000
Now in this Todo.js file,

36
00:01:31,000 --> 00:01:33,000
I wanna create my second component,

37
00:01:33,000 --> 00:01:36,000
that Todo component.

38
00:01:36,000 --> 00:01:38,000
And we did learn that a component in React

39
00:01:38,000 --> 00:01:40,000
is just a function.

40
00:01:40,000 --> 00:01:41,000
So in the end here,

41
00:01:41,000 --> 00:01:42,000
we define a function Todo

42
00:01:43,000 --> 00:01:46,000
and then we export that.

43
00:01:46,000 --> 00:01:50,000
We need to export it like this with this syntax,

44
00:01:50,000 --> 00:01:54,000
to make this function available outside of this file

45
00:01:54,000 --> 00:01:56,000
and usable in other files.

46
00:01:56,000 --> 00:02:00,000
Now, one important to note about this function name though,

47
00:02:00,000 --> 00:02:04,000
you can name your component functions however you want.

48
00:02:04,000 --> 00:02:07,000
But, there is one important restriction,

49
00:02:07,000 --> 00:02:09,000
one important thing to keep in mind.

50
00:02:09,000 --> 00:02:11,000
The name of the function

51
00:02:11,000 --> 00:02:14,000
should start with a capital character.

52
00:02:14,000 --> 00:02:17,000
That matters because when we later use this function

53
00:02:17,000 --> 00:02:21,000
as a component in our HTML code,

54
00:02:21,000 --> 00:02:24,000
so if we use it as a custom HTML element,

55
00:02:24,000 --> 00:02:27,000
then it will have to start with a capital character

56
00:02:27,000 --> 00:02:29,000
there as well,

57
00:02:29,000 --> 00:02:33,000
to differentiate it from the built-in HTML elements.

58
00:02:33,000 --> 00:02:36,000
React wants custom components

59
00:02:36,000 --> 00:02:38,000
to start with a capital character.

60
00:02:39,000 --> 00:02:41,000
So now we have our function here.

61
00:02:41,000 --> 00:02:43,000
And then here in this function,

62
00:02:43,000 --> 00:02:47,000
we must return something that can be rendered

63
00:02:47,000 --> 00:02:50,000
to turn this function into a component.

64
00:02:50,000 --> 00:02:53,000
And that something is this div here,

65
00:02:53,000 --> 00:02:55,000
this div with the class name card.

66
00:02:55,000 --> 00:02:58,000
I'll cut it from App.js

67
00:02:58,000 --> 00:03:00,000
and then return it here in Todo.js.

68
00:03:01,000 --> 00:03:04,000
And press that auto format shortcut again.

69
00:03:05,000 --> 00:03:07,000
So now that's our Todo function

70
00:03:07,000 --> 00:03:09,000
returning this JS Xcode.

71
00:03:10,000 --> 00:03:11,000
Back in App.js,

72
00:03:11,000 --> 00:03:14,000
we can now use this Todo component.

73
00:03:14,000 --> 00:03:19,000
And we don't do that by executing Todo like a function

74
00:03:19,000 --> 00:03:21,000
as we would normally do that.

75
00:03:21,000 --> 00:03:25,000
But instead, we use it as a custom HTML element,

76
00:03:25,000 --> 00:03:29,000
just as we did it with App in the index.js file.

77
00:03:31,000 --> 00:03:34,000
So here, where I cut the code from,

78
00:03:34,000 --> 00:03:39,000
I'll add Todo like this as an HTML element.

79
00:03:39,000 --> 00:03:40,000
The only special thing here

80
00:03:40,000 --> 00:03:42,000
is that it's self closing.

81
00:03:42,000 --> 00:03:46,000
Alternatively, we write an opening and closing tag,

82
00:03:46,000 --> 00:03:48,000
this would work as well.

83
00:03:48,000 --> 00:03:51,000
But since there will be no content between the tags,

84
00:03:51,000 --> 00:03:53,000
we can also write a self closing tag.

85
00:03:53,000 --> 00:03:56,000
But then it has to have this forward slash,

86
00:03:56,000 --> 00:03:58,000
it would not be allowed like this.

87
00:04:00,000 --> 00:04:01,000
Now, as noted before,

88
00:04:01,000 --> 00:04:03,000
it is worth pointing out here,

89
00:04:03,000 --> 00:04:05,000
that this component,

90
00:04:05,000 --> 00:04:06,000
this custom element,

91
00:04:06,000 --> 00:04:09,000
when we're using it here in this JS Xcode,

92
00:04:09,000 --> 00:04:13,000
that there it has to start with a capital character.

93
00:04:13,000 --> 00:04:17,000
So, todo with a lowercase t at the beginning

94
00:04:17,000 --> 00:04:19,000
would not be valid.

95
00:04:19,000 --> 00:04:21,000
Because react internally

96
00:04:21,000 --> 00:04:26,000
differentiates between built-in HTML elements like divs,

97
00:04:26,000 --> 00:04:30,000
and h1 tags and custom elements, by casing.

98
00:04:30,000 --> 00:04:31,000
All these built-in elements

99
00:04:31,000 --> 00:04:34,000
start with a lowercase character,

100
00:04:34,000 --> 00:04:37,000
custom elements built by you or others

101
00:04:37,000 --> 00:04:40,000
have to start with the uppercase character.

102
00:04:40,000 --> 00:04:42,000
And that is just something to be aware of.

103
00:04:43,000 --> 00:04:46,000
Now to use Todo in App.js though,

104
00:04:46,000 --> 00:04:49,000
we need to import it from the Todo.js file.

105
00:04:49,000 --> 00:04:51,000
And for this at the top of this file,

106
00:04:51,000 --> 00:04:56,000
we import Todo from dot slash components

107
00:04:56,000 --> 00:04:58,000
to construct a relative path

108
00:04:58,000 --> 00:05:01,000
to that components folder, slash Todo.

109
00:05:02,000 --> 00:05:07,000
Again, the file extension of dot js can be omitted here.

110
00:05:07,000 --> 00:05:12,000
That's now this Todo imported and rendered here.

111
00:05:12,000 --> 00:05:14,000
If we now save all files,

112
00:05:16,000 --> 00:05:18,000
we see the same output as before,

113
00:05:18,000 --> 00:05:19,000
which is good.

114
00:05:19,000 --> 00:05:21,000
That means that everything still works.

115
00:05:21,000 --> 00:05:23,000
But, we're now getting to the output

116
00:05:23,000 --> 00:05:27,000
with help of our separate component.

117
00:05:27,000 --> 00:05:29,000
Now, if we wanna have multiple Todos,

118
00:05:29,000 --> 00:05:33,000
we just got to replicate this Todo component here

119
00:05:33,000 --> 00:05:35,000
in the App component.

120
00:05:35,000 --> 00:05:38,000
And we now have a couple of Todos.

121
00:05:38,000 --> 00:05:40,000
And if we now ever want to change anything

122
00:05:40,000 --> 00:05:42,000
about that Todo component,

123
00:05:42,000 --> 00:05:44,000
about this HTML markup

124
00:05:44,000 --> 00:05:45,000
that makes up our Todo,

125
00:05:45,000 --> 00:05:49,000
we just need to do it in the Todo.js file,

126
00:05:49,000 --> 00:05:50,000
like adding this span

127
00:05:50,000 --> 00:05:52,000
which has no real purpose,

128
00:05:52,000 --> 00:05:53,000
but acts as a demo.

129
00:05:53,000 --> 00:05:55,000
And if we did save that file,

130
00:05:55,000 --> 00:05:59,000
we see that extra span in all our Todos.

131
00:05:59,000 --> 00:06:00,000
Because we defined it once

132
00:06:00,000 --> 00:06:03,000
and then reuse it multiple times.

133
00:06:03,000 --> 00:06:05,000
Just as in vanilla JavaScript,

134
00:06:05,000 --> 00:06:07,000
we would define a function once,

135
00:06:07,000 --> 00:06:10,000
and then possibly call it multiple times

136
00:06:10,000 --> 00:06:13,000
from different places in our application.

137
00:06:13,000 --> 00:06:17,000
It's the same concept here with React components.

138
00:06:17,000 --> 00:06:19,000
Though we don't need to span here,

139
00:06:19,000 --> 00:06:21,000
so I will get rid of that now.

140
00:06:21,000 --> 00:06:23,000
What we do need here though,

141
00:06:23,000 --> 00:06:26,000
is some configurability.

142
00:06:26,000 --> 00:06:27,000
At the moment,

143
00:06:27,000 --> 00:06:30,000
all Todo is just say TITLE.

144
00:06:30,000 --> 00:06:32,000
And that's not too useful.

145
00:06:32,000 --> 00:06:35,000
These should be different Todo titles

146
00:06:35,000 --> 00:06:36,000
for our different Todos.

147
00:06:37,000 --> 00:06:38,000
And of course,

148
00:06:38,000 --> 00:06:41,000
I can change the title here to Learn React.

149
00:06:41,000 --> 00:06:44,000
But since I do this in this Todo.js file,

150
00:06:44,000 --> 00:06:47,000
this will now affect all Todo usages again.

151
00:06:47,000 --> 00:06:49,000
So, all Todos which were outputting.

152
00:06:50,000 --> 00:06:54,000
So, that's not how we make this more configurable.

153
00:06:54,000 --> 00:06:56,000
Instead, we want to let the place

154
00:06:56,000 --> 00:06:58,000
where we used the Todo.

155
00:06:58,000 --> 00:06:59,000
So the App component,

156
00:06:59,000 --> 00:07:04,000
pass different data into these Todo components,

157
00:07:04,000 --> 00:07:07,000
just as we pass arguments into functions

158
00:07:07,000 --> 00:07:08,000
when we call them,

159
00:07:08,000 --> 00:07:12,000
to then output different data in each Todo instance,

160
00:07:12,000 --> 00:07:15,000
depending on which data we're passing in.

161
00:07:15,000 --> 00:07:17,000
And that's what we're going to do now.