Now for this first example,
for this delete button, let's remove this hello text,
and instead inside of this div, I'll add another div.
I'll add another div and before that div a h1 tag
where I say My Todos, because that was also
some texts which we had there.
And then, this other div next to the h1 tag
inside of the other div, that div will contain
that signal todo, that signal todo item
which we have in this dummy project.
For that, I'll use a h2 tag for the title.
And then, below that I want to have that delete button here.
Now, I'm using regular HTML elements here
because when working with JSX you can use your own elements,
your own components if you have some,
but you can also use all the built in default browser tags,
like divs, paragraphs, h1 tags, buttons, inputs, and so on.
So, in the end, here in the component
we just write the HTML code
that should eventually appear on the screen.
So, the output that should be rendered by the browser.
So, for this, we have our todo item here,
and some title above it.
And on that button, I'll now say Delete,
that was the text we had here.
Now, for styling purposes, we're going
to add some styling soon, I'll add another div here
and actually put that button inside of that div.
And now I pressed this format document shortcut
to auto format this code and make it a bit more readable.
Now, that's a more complex HTML structure.
And if we now save this file and we reload,
or actually we don't even need to reload
because of this auto reloading built into the dev server,
we should see that output here,
the title, the delete button, and My Todos.
Now, the delete button is not doing anything at the moment.
And the title also is just static text.
But we, again, see that we can influence
what shows up in the browser
with the code we define in our app component here.
Now, some styling would be nice.
And, for this, I attached the index.css file,
which you also find attached here,
which contains some basic styling for this first demo.
You can simply replace your index.css file
with the attached one.
And if you do that and reload, it looks a bit nicer.
And we can also, now, add some CSS classes here to this code
some CSS classes that will also influence the styling.
For example, to this div, which contains the title
and the nested div, I want to add a class of card.
Now, in regular HTML you would do that
by adding the class attribute,
and setting this to card, for example.
Now, this is not how you should do it with React.
This code here looks like HTML, but it actually isn't.
Behind the scenes, it is transformed to standard JavaScript
and in standard JavaScript for one class is a keyword
but, even more important than that, if you look
at Vanilla Java script, the property name
of a HTML element object for assigning,
or for setting the CSS classes on that object
is actually class name, not class.
That's just how Vanilla JavaScript works.
And therefore, here, the attribute name,
actually, also is class name.
Now, again, this can be confusing because it looks like HTML
and in standard HTML that would be class.
But since this isn't HTML since this, in the end,
is JavaScript, just looking differently,
We need to keep minor things like this in mind.
Now, the good news is, however, that this is one
of the very rare cases where the attribute name differs
from the property name, and we have to use
the property name here and, hence, we don't use
what we would write in standard HTML.
In most cases you can write standard HTML code here
and the class name is the most prominent, special case
in React, where you assign a CSS class
to an element with class name,
as a attribute, in quotes, added to an element.
But, with that, if we save this again,
now, we have this card look off this todo.
Now, there are a couple of other classes
that should be added, for example,
on this div, which holds the button
you should add a class name of actions.
And on the button here, we add a class name
of btn for button, we do all of that
that's the look we get and that looks a bit nicer.
So, now, we also added some styling
to our first component simply by changing the code
in the index.css file and adding a couple of classes here
and therefore our first component is taking shape.
However, at the moment, all the code is in one component
and there are a couple of reasons
why we might want to split that up
and also make our component a bit more flexible.