All language subtitles for 018 A First Summary_en

Maximilian: Remember, this section was about components.

It was about understanding the most important concept

of React that you build user interfaces

by building and combining components.

And for that, we had a look

at the React Core Syntax and JSX.

at the React Core Syntax and JSX.

We, of course, had a very detailed look

at building and using and working with components and props.

And that already leads to the last part, data.

And that already leads to the last part, data.

We learned how to share data across components

through that props concept.

Now, maybe you already noticed one important thing,

with all these components, which we are building,

in the end we're just splitting up our code

across multiple files and building blocks

across multiple files and building blocks

so that if we want to have more than one expense item,

we can just use our custom ExpenseItem component

multiple times instead of repeating all

multiple times instead of repeating all

that code multiple times, that's the idea behind components.

that code multiple times, that's the idea behind components.

In the end, what ends up on the screen

are just default HTML elements, though.

are just default HTML elements, though.

If you inspect your page with the developer tools, here,

in the Chrome developer tools with the Elements tab,

you will notice that you don't see

your custom components here, there is no card

or ExpenseItem component, you just see divs

and H2 elements, and so on.

And that is how the web works and how React works.

These custom components are not really HTML elements,

which end up on the screen, you just use them in your code

in your React code, in your JSX code.

in your React code, in your JSX code.

What ends up on the screen are just the HTML elements

because, ultimately, every custom component you build

either uses these built in HTML elements

or it uses another of component which, at some point,

if you drill into your components deeply enough

will end up using these built in elements.

And that's an important takeaway,

and something important to keep in mind.

Now, the application we built thus far is great

because we had the chance of learning

about components and props with it.

about components and props with it.

And these are two of the most important concepts

you got to know when working with React.

I'm not sure if I mentioned it already.

But, of course, this application as we built

it thus far also has a downside.

In the end, it's still static.

In the end, it's still static.

Yes, we have reusable components, which can be configured

with props but, ultimately, we have this expenses array

in the App.js file and the this array never changes.

in the App.js file and the this array never changes.

The data here is set in stone.

It's still a static application in the end.

Nothing is changing here, as a user,

we have no chance of interacting with this application.

And that's therefore what we're going

to change in the next course section

when we're going to bring this to life.

And when we're going to learn

about another concept called state.

Now, before we go there though, I just got three

other things, which I want to cover here.

other things, which I want to cover here.

The first thing, the first concept is JSX.

The first thing, the first concept is JSX.

I mentioned that we'll take a closer look at that

and we're going to do that in the next lecture.

and we're going to do that in the next lecture.

You could skip that lecture but, at some point,

you should have a look at it so that you understand

what JSX really is under the hood and how it works.

So I recommend that you don't skip it,

even though you could do that, if you're in a hurry.

Now, the other two things I want to have a look at

is how we organize our files,

and how we write our functions here.

And, therefore, let's dive into these concepts

before we finish this module,

and move on to the next course section.