1
00:00:02,000 --> 00:00:03,000
Now for this first example,

2
00:00:03,000 --> 00:00:07,000
for this delete button, let's remove this hello text,

3
00:00:07,000 --> 00:00:12,000
and instead inside of this div, I'll add another div.

4
00:00:12,000 --> 00:00:15,000
I'll add another div and before that div a h1 tag

5
00:00:15,000 --> 00:00:17,000
where I say My Todos, because that was also

6
00:00:17,000 --> 00:00:20,000
some texts which we had there.

7
00:00:20,000 --> 00:00:24,000
And then, this other div next to the h1 tag

8
00:00:24,000 --> 00:00:28,000
inside of the other div, that div will contain

9
00:00:28,000 --> 00:00:31,000
that signal todo, that signal todo item

10
00:00:31,000 --> 00:00:34,000
which we have in this dummy project.

11
00:00:35,000 --> 00:00:39,000
For that, I'll use a h2 tag for the title.

12
00:00:39,000 --> 00:00:42,000
And then, below that I want to have that delete button here.

13
00:00:43,000 --> 00:00:47,000
Now, I'm using regular HTML elements here

14
00:00:47,000 --> 00:00:51,000
because when working with JSX you can use your own elements,

15
00:00:51,000 --> 00:00:53,000
your own components if you have some,

16
00:00:53,000 --> 00:00:58,000
but you can also use all the built in default browser tags,

17
00:00:58,000 --> 00:01:03,000
like divs, paragraphs, h1 tags, buttons, inputs, and so on.

18
00:01:03,000 --> 00:01:05,000
So, in the end, here in the component

19
00:01:05,000 --> 00:01:08,000
we just write the HTML code

20
00:01:08,000 --> 00:01:11,000
that should eventually appear on the screen.

21
00:01:11,000 --> 00:01:15,000
So, the output that should be rendered by the browser.

22
00:01:15,000 --> 00:01:17,000
So, for this, we have our todo item here,

23
00:01:17,000 --> 00:01:19,000
and some title above it.

24
00:01:19,000 --> 00:01:23,000
And on that button, I'll now say Delete,

25
00:01:23,000 --> 00:01:25,000
that was the text we had here.

26
00:01:25,000 --> 00:01:28,000
Now, for styling purposes, we're going

27
00:01:28,000 --> 00:01:30,000
to add some styling soon, I'll add another div here

28
00:01:30,000 --> 00:01:35,000
and actually put that button inside of that div.

29
00:01:35,000 --> 00:01:38,000
And now I pressed this format document shortcut

30
00:01:38,000 --> 00:01:42,000
to auto format this code and make it a bit more readable.

31
00:01:43,000 --> 00:01:46,000
Now, that's a more complex HTML structure.

32
00:01:46,000 --> 00:01:49,000
And if we now save this file and we reload,

33
00:01:49,000 --> 00:01:52,000
or actually we don't even need to reload

34
00:01:52,000 --> 00:01:55,000
because of this auto reloading built into the dev server,

35
00:01:55,000 --> 00:01:57,000
we should see that output here,

36
00:01:57,000 --> 00:02:01,000
the title, the delete button, and My Todos.

37
00:02:01,000 --> 00:02:04,000
Now, the delete button is not doing anything at the moment.

38
00:02:04,000 --> 00:02:07,000
And the title also is just static text.

39
00:02:07,000 --> 00:02:10,000
But we, again, see that we can influence

40
00:02:10,000 --> 00:02:11,000
what shows up in the browser

41
00:02:11,000 --> 00:02:16,000
with the code we define in our app component here.

42
00:02:16,000 --> 00:02:18,000
Now, some styling would be nice.

43
00:02:18,000 --> 00:02:22,000
And, for this, I attached the index.css file,

44
00:02:22,000 --> 00:02:24,000
which you also find attached here,

45
00:02:24,000 --> 00:02:28,000
which contains some basic styling for this first demo.

46
00:02:28,000 --> 00:02:31,000
You can simply replace your index.css file

47
00:02:31,000 --> 00:02:33,000
with the attached one.

48
00:02:33,000 --> 00:02:37,000
And if you do that and reload, it looks a bit nicer.

49
00:02:37,000 --> 00:02:41,000
And we can also, now, add some CSS classes here to this code

50
00:02:41,000 --> 00:02:45,000
some CSS classes that will also influence the styling.

51
00:02:45,000 --> 00:02:48,000
For example, to this div, which contains the title

52
00:02:48,000 --> 00:02:52,000
and the nested div, I want to add a class of card.

53
00:02:52,000 --> 00:02:56,000
Now, in regular HTML you would do that

54
00:02:56,000 --> 00:02:58,000
by adding the class attribute,

55
00:02:58,000 --> 00:03:00,000
and setting this to card, for example.

56
00:03:01,000 --> 00:03:05,000
Now, this is not how you should do it with React.

57
00:03:05,000 --> 00:03:10,000
This code here looks like HTML, but it actually isn't.

58
00:03:10,000 --> 00:03:14,000
Behind the scenes, it is transformed to standard JavaScript

59
00:03:14,000 --> 00:03:19,000
and in standard JavaScript for one class is a keyword

60
00:03:20,000 --> 00:03:24,000
but, even more important than that, if you look

61
00:03:24,000 --> 00:03:28,000
at Vanilla Java script, the property name

62
00:03:28,000 --> 00:03:32,000
of a HTML element object for assigning,

63
00:03:32,000 --> 00:03:35,000
or for setting the CSS classes on that object

64
00:03:35,000 --> 00:03:39,000
is actually class name, not class.

65
00:03:39,000 --> 00:03:42,000
That's just how Vanilla JavaScript works.

66
00:03:42,000 --> 00:03:44,000
And therefore, here, the attribute name,

67
00:03:44,000 --> 00:03:47,000
actually, also is class name.

68
00:03:47,000 --> 00:03:51,000
Now, again, this can be confusing because it looks like HTML

69
00:03:51,000 --> 00:03:55,000
and in standard HTML that would be class.

70
00:03:55,000 --> 00:03:58,000
But since this isn't HTML since this, in the end,

71
00:03:58,000 --> 00:04:02,000
is JavaScript, just looking differently,

72
00:04:02,000 --> 00:04:06,000
We need to keep minor things like this in mind.

73
00:04:06,000 --> 00:04:08,000
Now, the good news is, however, that this is one

74
00:04:08,000 --> 00:04:13,000
of the very rare cases where the attribute name differs

75
00:04:13,000 --> 00:04:15,000
from the property name, and we have to use

76
00:04:15,000 --> 00:04:18,000
the property name here and, hence, we don't use

77
00:04:18,000 --> 00:04:21,000
what we would write in standard HTML.

78
00:04:21,000 --> 00:04:25,000
In most cases you can write standard HTML code here

79
00:04:25,000 --> 00:04:30,000
and the class name is the most prominent, special case

80
00:04:30,000 --> 00:04:33,000
in React, where you assign a CSS class

81
00:04:33,000 --> 00:04:35,000
to an element with class name,

82
00:04:35,000 --> 00:04:39,000
as a attribute, in quotes, added to an element.

83
00:04:40,000 --> 00:04:42,000
But, with that, if we save this again,

84
00:04:42,000 --> 00:04:45,000
now, we have this card look off this todo.

85
00:04:46,000 --> 00:04:48,000
Now, there are a couple of other classes

86
00:04:48,000 --> 00:04:50,000
that should be added, for example,

87
00:04:50,000 --> 00:04:52,000
on this div, which holds the button

88
00:04:52,000 --> 00:04:55,000
you should add a class name of actions.

89
00:04:55,000 --> 00:04:58,000
And on the button here, we add a class name

90
00:04:58,000 --> 00:05:03,000
of btn for button, we do all of that

91
00:05:03,000 --> 00:05:05,000
that's the look we get and that looks a bit nicer.

92
00:05:08,000 --> 00:05:09,000
So, now, we also added some styling

93
00:05:09,000 --> 00:05:13,000
to our first component simply by changing the code

94
00:05:13,000 --> 00:05:17,000
in the index.css file and adding a couple of classes here

95
00:05:17,000 --> 00:05:21,000
and therefore our first component is taking shape.

96
00:05:21,000 --> 00:05:25,000
However, at the moment, all the code is in one component

97
00:05:25,000 --> 00:05:27,000
and there are a couple of reasons

98
00:05:27,000 --> 00:05:29,000
why we might want to split that up

99
00:05:29,000 --> 00:05:32,000
and also make our component a bit more flexible.