Original subtitles

So let's now dive

into all these important basics and fundamentals.

And for that keep in mind what you learned

in the first course section.

React is a JavaScript library for building user interfaces.

And we also learned that of course in general,

HTML, CSS and JavaScript

are about building user interfaces as well.

But I also mentioned in the first course section

that we use libraries like React

because that simplifies building those user interfaces.

We don't need it,

you can build any website without React

but if you are having more complex user interfaces

like the one we have in his expense tracker.

If you use something like React

it all of a sudden becomes much easier

to build something like this.

You won't have to focus on all the nitty-gritty details

and it will be less error prone

if you use something like React

because you will be able to focus

on your core business logic

that makes up your application

instead of having to focus on the actual steps

of updating the page when something happens somewhere.

That's why we use libraries like React.

And to make that job simpler for us,

to make that work simpler for us,

React embraces a concept called components.

React is

all about components.

But of course that brings up one important question.

What exactly is a component?

Well, let me come back to this question in a second.

Instead let me come back to this first sentence here

even though we don't fully know yet

what components are.

Why could React be about one

concept in its core?

Because all user interfaces in the end

are made up of components.

So what could be a component then

if it is something which is crucial

in all user interfaces you see?

Well, let's have a look at this finished application

which we're going to build through out this

and the next course sections.

If you have a look at this user interface

at this web application,

you might be able to identify a couple of building blocks

that make up this interface.

For example, have a look as the expense items down there.

This in the end is the same item being repeated twice here.

It's the same item, just with different data.

The same would be true by the way here for this chart,

the individual bars and that chart.

That's the same item,

just repeated with a different label

and a different amount of filling.

And that is exactly what components are,

reusable building blocks in your user interface.

Components are in the end just a combination of HTML code,

CSS code for styling

and possibly JavaScript code for some logic.

And you don't have to reuse a component

to make it a component.

It's just one of its traits that it is reusable.

But on this user interface

which you see here there would be more components

than just these expense items and these chart bars.

The item here at the top would be a component,

if we expanded this would then be

more elements inside of that component.

That filter here would be a component,

the overall chart would be a component,

the overall list of items would be a component.

But inside of the items

we could say this

date

item here would be a separate component,

the amount here would be a component.

We can really split it up

in a very granular way if we want to.

We got all these individual building blocks

which we combine together to build a user interface.

And in the end of course

all user interfaces can be split up

into components like this.

Into containers and buttons and input elements

and product items, which are being output.

Something like that.

All user interfaces on all kinds of web applications

can be split up into components like this.

And React is all about these components.

You build these individual components

and then you tell React how to compose them together

into a final user interface.

And React embraces this concept of components

because of that reusability aspect

and because it allows us to separate our concerns.

Both concepts are important concepts

in programming in general.

Having reusable building blocks helps us avoid repetition,

and in programming in general it is good

if we don't repeat ourselves.

Having a separation of concerns helps us

with keeping our code base small and manageable

instead of having one large file

which holds all the HTML code

and all the JavaScript logic.

For the entire user interface

we have small separated units,

these components where every component

has one clear

concern, one focus,

one specific task it focuses us on.

And if we split that code across multiple files then

as we are going to do it though out this course

then we'll have small pieces of code

which are easy to manage and maintain.

And these of course are not concepts

or ideas React invented.

Instead if we take a step back from React

and we think about programming in general,

then of course in any programming language

and no matter what you are building

you tend to work with functions

and you split your code into multiple small functions

which then may call each other

to outsource logic into a function,

to separate concerns

and to be able to execute

the same code multiple times if you need to.

And React just picks up that concept of functions

and of separating code across functions

and translates it to the

front end web application world

where we built an entire user interface

by splitting our code into multiple components

which we then can mix and match as we need to.