Original subtitles

Building web apps with React

is not just about composing components together

and making sure that the logic works correctly.

That arguably is the most important part,

where at least it's the biggest reason for using React.

But building React apps is also about styling those apps.

You wanna make sure that your applications look good

and styling is also an important part

of building components.

And there are different techniques

for setting styles dynamically

and for styling components such that other components

are not affected by a specific component's styles.

Therefore in this module,

we will dive into how you can set up styles

in a conditional or dynamic way.

So how you, for example, can switch certain styles

based on some conditions.

For example, if a user enters an invalid input

and you want to color the input field red,

something like that.

And then we'll dive into two popular approaches

for scoping styles to components,

so for setting up styles

such that they only affect the component

and are not added as global styles.

We'll have a look at styled components,

which is a third-party library, a very popular one,

which allows us to set up pre-styled components

with their own scoped styles.

And we'll have a look at a concept called CSS modules.

And you will learn what these different approaches

are all about, how you do work with them,

and how you could add them to your next project.

Now, to dive into styling, we need a demo project,

and to mix things up I got a brand new project here.

Now I already prepared this one for you.

It's a very simple project as you can tell.

You can basically add course goals,

like learn React, and that will be added to this list.

You can also delete items from there by clicking on them.

And that's basically it.

This project uses only things which I covered

over the last course sections.

And of course, you'll find that project attached.

You can simply download it.

You'll find the entire project folder there.

And then, once you downloaded it,

simply opened a terminal,

navigate into this project folder,

and to run NPM install.

This will install all the third-party packages

which are required since the attached folder

does not come with a node modules folder

because that would unnecessarily bloat the attachment.

NPM install simply installs all packages

and recreates the node modules folder.

And thereafter you have this project here,

which you can start with NPM start

to start the development server

and play around with the project.

Of course also feel free to dive into the source files

to see how this project is structured.

As I already said, this project only uses features

which you already know, like useState

and the functions which are bound to events.

And we're then, for example,

also outputting lists of data dynamically by calling map.

So that's all something you already saw

and there is nothing new there.

This however will be our starting project for this section

where we are now going to dive into styling.

So definitely explored the source code files.

So did you understand this project

and thereafter we're going to have a look

at the different styling options React gives us.