All language subtitles for 008 How React Works_en

Okay, so enough about JSX and all of that.

Let's now really get our hands dirty.

We have this HTML-ish code here in this App function.

And we have that code here because with React,

we ultimately built our own custom HTML elements

as you learned.

We built those components

and a component is basically just a custom HTML element.

And we do that with this declarative approach,

as I mentioned, which means with React

we defined the desired target state

and React is then responsible

for generating and running the actual DOM instructions

which update what's visible on the screen.

And we can see this here.

This here is our desired target state.

We want to render a div with an h2 tag

with this text inside of it on our screen.

Because in index.js, we rendered as App component,

this custom App HTML element, you could say,

and inside of this custom element,

which turns out just to be a function,

more on that in a second, inside of that,

we in the end just return this HTML code.

So therefore ultimately,

it's this HTML code which is rendered on the screen

and that's indeed what we're seeing here.

Now let's tweak this code a little bit.

And here in App.js, in this function, in this returned

HTML block here, let's add a paragraph,

where we maybe just say, "This is also visible".

If you add this and save this file

and you have this development server running,

which you should, it'll automatically pick up this change,

it'll notice when this file changes,

and it will automatically update what you see on the page.

And therefore, we now also see this text here,

this paragraph.

So that's how we can work with that.

And we can, just to find it,

we wanna have a paragraph here.

Now keep in mind, in regular JavaScript,

you would kind of select the element on the page.

For example, with document.getElementByID('root'),

as we we're doing it here, but then you would not be done.

If you then want to add a paragraph,

you either set the inner HTML content to something,

or you, first of all, create a new element

with document.createElement, creating a paragraph.

And then you got your paragraph here like this.

And you would set the textContent to "This is also visible".

And then you would reach out to some place in the DOM

and then simply call append or appendChild

and add this created paragraph.

That is how you would do it in regular JavaScript.

And this is called imperative.

This is following an imperative approach.

Because you are giving clear instructions,

clear step-by-step instructions,

what JavaScript and the browser should be doing.

Now, this works, but it can get cumbersome,

or complex user interfaces with dozens

or hundreds of elements, which also might be changing

and appearing and disappearing all the time,

having to write all these instructions is very cumbersome.

With React instead, we just define the desired end state,

that we want a div, an h2 tag, and a paragraph,

and React will then generate these instructions

behind the scenes to bring that onto the screen.

That's how this works behind the scenes.

Now I did mention, of course, that for all of that,

React embraces this concept of components.

And as I also already mentioned,

we do have our first component here, App.

So this function in the end as it seems, in App.js,

is a component which is used like a custom HTML element here

in index.js.

Let's now build up on that

and let's build our first custom component.

And since we ultimately want to build that expense tracker,

let's also build our first component

in the context of this expense tracker.