All language subtitles for 010 More Component Work & Styling with CSS Classes_en

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.