Original subtitles

Now regarding the styling

of our components, we still use CSS,

but there is nothing too React specific

when it comes to that CSS code.

In the end, we can just add a new CSS file.

And typically for the CSS code of a given component

you add that file next to the component JavaScript file

and that would be the ExpenseItem.CSS file here.

Then you want to write your CSS code in there

but since this is no CSS course,

I don't want to bore you with writing a lot of CSS code

and hence you attached find a finished

ExpenseItem.CSS file, which you can simply download

and use or simply download it, open it,

and copy the code you find in there

into your ExpenseItem.CSS file.

Now back in ExpenseItem.js,

we need to do one important thing.

We need to make this overall build process

aware of that CSS file and tell it

that the CSS code in there should be considered

and should be injected in the finished application

because it's not by default browsing all your files

and automatically including everything,

you explicitly have to tell React, you could say,

or that build process that a certain file

should be considered.

For ExpenseItem.js, we did this

with this import and app JS.

For expenseItem.CSS, we need to do that

instead of ExpenseItem.js,

there we simply import ./ExpenseItem.CSS

just like that.

This simply tells the build process

that the CSS files should be considered.

Now instead that CSS file, I in the end,

just prepared a bunch of CSS classes

which can be added to elements to apply a certain look

and they are, for now, on this HTML code

in ExpenseItem in our component

we need to add these classes.

For example, on the wrapping div here.

Now there's one special thing here.

We don't type class here as we would do in regular HTML,

but instead className.

And this can be strange, but you have to keep in mind

that this here is not really HTML.

It looks like HTML, but it's this special

JSX syntex invented by the React team.

And in the end under the hood, it's still JavaScript code,

that's why most attributes are the same, but not all.

And here the class attribute was renamed to className

because class is a reserved word in JavaScript.

Technically it would still work

if you would use class here, but should use className.

Now here on this overall div, which wraps everything,

we then add the expense-item class here

On this div, which holds our title and our amount,

we add another of className,

which is expense-item__.

So here we got two underscores.

Description.

And then here on that div with the amount

we simply add className and then expense-item__price.

And if you now save everything,

it should look like this, which is definitely nicer.

Still not the final look you want,

but definitely nicer.

By the way, I'm super zoomed in here

to make this easier to read,

otherwise it would look something like this

and that's definitely also not great,

but again, it's not the final look.

Again, let me zoom in closer

so that we can better see that though.

Now that is how easy it is to add styling

to your React components though.

It's really not too fancy.

You have to be aware of the fact

that it's className instead of class,

but other than that, it's really just standard

CSS code, which then is added to your elements.

And in that CSS code, you can use

all the selectors you might know,

you're not limited to classes, but again,

I don't want to turn that into a CSS course,

so we'll keep that fairly simple.

This import might be the strangest thing in the end

because that is needed to make

this entire project aware of that CSS file.

And that's how we can style our components.