Original subtitles

Instructor: So React is all about components

and I hope I could make it clear

why it's all about components

and what exactly a component is.

So therefore the next question is,

how exactly is a component built?

Now we'll dive into the concrete code in just a second.

In general, it's just important to keep in mind

what I mentioned earlier.

In the end user interfaces are about HTML,

CSS and JavaScript.

And therefor all these components are about combining HTML,

CSS and JavaScript.

When we work with React and we build components,

we in the end do just that.

we in the end do just that.

We combine HTML, CSS and JavaScript in all these components

We combine HTML, CSS and JavaScript in all these components

and then we combine all of these components together

to build the entire user interface.

Though, I will say while CSS of course matters

and we're going to add CSS in this course,

it's the least important part here.

Mostly React components

are about combining HTML and JavaScript and then of course,

you also can add CSS but that's not the focus of React.

you also can add CSS but that's not the focus of React.

Nonetheless, I will teach you of course

how you can make sure that your components look beautiful.

So long story short,

React is all about components and about building

these components which we combined together.

React allows you to create these re-usable

and reactive components,

and you are going to see

what reactive means in detail later,

React allows you to build these re-usable

and reactive components consisting of HTML and JavaScript

and as I mentioned also a bit of CSS.

Now here's the important part though.

As you will learn throughout this course,

React uses something which is called a declarative approach

for building these components.

And you will see what exactly that is,

but it basically means that with React,

but it basically means that with React,

you will not tell React that a certain HTML element

should be created and inserted in a specific place

on the user interface as you would be doing it

on the user interface as you would be doing it

with Vanilla JavaScript,

so with just JavaScript, for example.

Instead with React and that's really important,

you will always define the desired end state,

the target state or possibly also different target states

depending on different conditions

depending on different conditions

and it's then React's job to figure out

which elements on the actual webpage might need to be added

or removed or updated.

or removed or updated.

And you don't write these concrete DOM

updating instructions on your own

as you would be doing it with just JavaScript,

as you would be doing it with just JavaScript,

instead with React and React components,

you just define these end states

you just define these end states

and under which conditions which state should be used

and then React will do all of the rest under the hood.

It's a bit like magic,

it's of course not actual magic

but it will make your life as a developer much easier.

So you could say that in the end

we just built our own custom HTML Elements

and we combined them together for building a user interface.

But that's enough of the theory for now.

Let's now finally dive into some code

and start building these components.