All language subtitles for 10. Styling React Applications

So at this point, we know that React components can also contain CSS styles.

And so let's now learn about some simple ways of applying CSS to React applications.

So in React, we have many different ways of styling our components and React doesn't really care about

how we do that.

It doesn't have an opinion about styling.

And the reason for that is that just as we learned in the very beginning, React is actually more of

a library than a framework.

So it doesn't have a preferred way of how we should style or components and in the end, our applications.

Therefore, we can choose between many different options.

For example, we can use inline styling, we can use external CSS or even Sass files, we can use CSS

modules, styled components or even tailwind.

CSS is an option to style our components.

Now in this lecture, we will not go into all of these, of course, but we will talk about many of

them later.

For now I just want to use inline CSS and then also later include an external CSS file.

So as you might know in HTML, we can actually style elements using the style attribute.

So just.

Like this.

And then in HTML, we write those styles in a string like this.

However, in JS, that's not how it works.

So in JS we actually need to define inline styles using a JavaScript object.

So if we need to write a JavaScript object, we first need to enter a JavaScript mode.

So that's what the curly braces are for.

But then we need another set of curly braces.

And so that is again to now create an object.

And so here we can now define some properties.

So let's say we want to style this text, so this H1 text with a red color.

And so now as I give it a save.

There it is.

There it changed.

And so with this, you have the easiest way.

So the most straightforward way to style components in JSX.

So simply using the style attribute that is also available in HTML.

Now in HTML, we basically never, ever use this.

And that's because of the separation of concerns that we talked about in the previous lecture.

So where we always had the CSS in a separate file and never mixed together with the markup.

But here in React, as we just discovered, doing that is completely fine and natural.

Let's try another one.

So now font size which in CSS you would write like this.

Right.

So font size.

But in JavaScript that's not a valid property name and therefore all the CSS property names have been

converted basically in JS to this camelcase notation.

So you need to write font size like this.

Let's say 32 pixels.

And so since we're writing an object, then also this value always needs to be a string.

Now.

Well, that didn't change anything.

Maybe that's already the size.

Let's see what happens with 48.

Yeah.

So now it's a bigger.

And let's try another one.

Text transform.

And you see that as always vs code already shows you here the available options.

So make sure to always write these property values then basically here as strings, because again,

this is in the end just a JavaScript object and you could even extract this out here.

So just cutting this.

Let's create a variable here.

Concert style.

And it could be any variable name, of course.

Then let's place that here and it all still looks the same.

Great.

So this is the easiest way of adding some styling to individual components.

However, when the application gets just a little bit bigger, it can get out of hand and can be a lot

of work to write our styles like this.

So like creating an object for each of these components, it's perfectly doable, but you don't see

many people doing that in the real world.

Now, one thing that we can do is to actually include an external CSS files, just like we have been

doing all the time in our applications.

And so that is the easiest way, I would say, to style React applications, which is basically the

same as styling any other web page.

Now in that case, we're not really mixing concern with the JavaScript and HTML concerns in the way

that we learned in the last lecture.

But that's of course not a problem.

And also we will learn how to do that a little bit later, again using something called styled components.

But for now, let's take a look at the CSS file that we included here in the very beginning of this

lecture.

And so this is, well, a very pretty standard CSS file with some classes here.

And so now we need to add these class names to the JS elements so that these classes then get applied.

So let's go back and before we do any of that, so before we add the classes, we need to first import

this CSS file.

So right now, our application has no way of knowing that this CSS file exists in the project.

So what we need to do here is to simply import that file.

And so once again, it is actually Webpack that will take care of then taking the styles out of the

CSS file and injecting them into our application.

So index dot CSS.

All right.

And you see already things changed here.

So the background color is different.

The font family has changed.

Yeah, for now, I think that's all.

And we also get this nice yellow border at the bottom of the page.

So you see that immediately Webpack included these styles now in our application.

Okay, but now let's add the classes.

So you see that we have one container, We have a header.

We have menu and we probably have footer.

Yeah.

So just very straightforward.

So here, let's add the class of container and let me first do it in the wrong way.

So I will just write class as we would do in HTML.

But then react will actually warn us.

So you see here invalid Dom property class.

Did you mean classname?

And so this is one of the important rules of JSX.

So in JSX we cannot use class, but instead class name.

Okay, so this is a common beginner mistake.

But now you have been warned.

It still does work here somehow.

But we are really not supposed to use class in JSX and that's probably because class is already a reserved

keyword in JavaScript.

Okay, but let's keep going here.

So again, let's add Classname here.

Of header.

All right.

And now this didn't really change a lot.

That's because we still have this style here applied, so we probably don't want that.

And so just to keep this here, I will duplicate this one, comment it out, and then I will just make

this an empty object.

Well, and that didn't really change a lot now.

And I know why that is.

It is because here we are actually supposed to have a header element first.

All right.

And so that class should go there.

So this is a little bit just of semantic HTML right here.

Or let's say semantic markup where the header element is a bit better suited here than simply having

the H1.

And here we have some problem.

Let's maybe.

Change something here very quickly.

So here we have this 12 rim of width.

Let's change that to four.

So that's a bit better, even though it's not perfect yet because of course this page is very narrow.

But never mind.

We will fix that in a moment.

Next up here, let's add the class of menu.

And again.

That's class name.

And then just a simple string.

So menu.

And here, since we were talking about semantic markup, let's actually use the main tag.

So the main HTML element.

And then of course we need to close.

It correctly as well.

Are beautiful.

So you see that?

Now we get this nice styling here on the menu.

Okay.

Next up, we have this class name here, which will just be footer.

All right.

So let's see what we get.

Uh, here we have this weird styling applied to these titles, which is not supposed to be happening.

And so let's just make them H3, not H2.

Yep.

And so here we have the footer.

Nice.

So with this, we actually have some styling applied to our application right now.

And as I mentioned, we are getting these styles now from this external CSS style sheet which remember

we simply imported here using this import syntax which will make Webpack import the styles into our

application.

Then here, remember that we used class name and not class because class is a reserved keyword in JavaScript

already.

And by the way, there are a few more rules like this which we will talk about a little bit later in

this section.

For now, just notice that the styles that we included here are global styles, so they are not scoped

to each particular component and that's very easy to show.

For example, we could.

At the header class also here.

And while that looks kind of the same, let's try something else.

Let's add maybe the footer class also to the header.

Yeah.

And again, it doesn't change a lot.

But if we inspect the element here.

Is so.

Right here.

Then, of course, both of these classes here.

So all of these styles will be applied to this same element and in the end to the same component.

And so again, each component does not really contain its own styles, but simply uses the global styles

that are in index.css.

And this works fine for small apps, but we will also use something called styled components later in

another project.

And so then we will have CSS that really only belongs to one single component.