All language subtitles for 009 How React Works & Understanding Components_en

Now with the project cleaned up, let's explore React

and let's write our own React code.

Currently, we got two Java script files here,

index JS and app JS.

The index JS file will be the starting point

of our React application.

The code written in here

will be the first code

that will be executed in the browser

when we load our project in the browser.

So what we see here in the browser is the result

of this code line here, executing in the end.

Now we don't fully understand this code line yet

but what we do in this file

is we're importing a couple of things.

That is how in modern JavaScript

support that by that build setup we have here

supported by the NPM start script

and what it does behind the scenes

how we combine multiple files and how we import features

like objects or functions from file A into file B.

And here we are, for example

importing the React Dom object from the React Dom library.

So that's not object we created.

That is an object created by the React team

exposed in that React Dom library,

which is part of our project

because it's part of our dependencies here.

Now on that object

we call a render method

and queued at render method.

we pass this strange HTML code.

Now this HTML in Java script syntax here

only works because of that build step,

as mentioned before

and it's actually called JSX.

This kind of code is called a J S X code.

This HTML in Java script code.

JSX is a special syntax

which is not understood by the browser

and which the offer is converted behind the scenes.

But which is more convenient for us as a developer to write

because working with React

will be about building custom HTML elements,

these components

and combining them together.

And that is way easier.

If we can just write HTML code

kind of in our JavaScript files

to describe the desired output.

So here we kind of create

or we use our own HTML element, the app element

which is actually imported from that app file.

The file extension is missing here

because for JavaScript files, it can be omitted.

And the second argument to the render method

in the end just tells React where this element

should be rendered into real Dom.

Now, here we are selecting an element by ID

with an ID route

and we can find this

on the single page that is part of this project.

We find it in the public folder.

There we got a couple of images, but also one HTML file.

That is the single HTML file

that makes up this React application.

Because I mentioned before

you typically build

these single page applications with React

where only one HTML file is fetched from a server

and then React takes over and controls the Dom

and what's visible on the screen.

Now in this index HTML file in the body section

we got a div with an ID route.

And that ID route should be look familiar.

That is the div,

which we in the end

select with this document,

get element by ID code snippet here.

And therefore, in the end

what we tell React with that line

is that we want to render our app HTML element

our custom HTML element,

which is defined

in this app JS file into this place

into the place of this element with this route ID.

So into the place of that div here in the end.

That's what we're telling React.

That's why if we visit our page and we inspect it.

So we don't view the page source

but we inspected with the Dev tools here.

When we have a look at the rendered Dom here

we see embodied that there is this div

with an ID of a root.

And in there we see our div with hello

which is the content we defined an app JS,

and that should make sense

because it is the app thing,

which we import from the app JS file,

which we rendered here.

Now let's take a closer look at this app thing.

Then that is a function,

a function which we export

to make it available outside of this file.

But in the end, just a standard function

a standard JavaScript function.

The only special thing

about that function is that it returns such JSX code.

So there's HTML in JavaScript code.

That's the only special thing.

Other than that it's a regular JavaScript function.

And that is super important.

What we have here is a so-called React component.

We can use it like an HTML element

as we're doing it here in, in index JS

but it's of course not an HTML element.

the browser would know,

but one defined by us

the developers of this project.

Now this component, as it's called in Reacts world

this custom HTML element,

is in the end just a function.

A function

which is to defined and exported

and specifically a function that returns JSX.

That's important.

A component.

so a function that should act

as a component and be usable as a component by React

must return something

that can be rendered in the browser.

That could be text.

It could be a couple of other things,

but it can and most typically will be HTML code as well.

So this JSX code.

And what's interesting

is that in the browser,

if we have a look at the Dom again

we don't see our app element anywhere here.

We don't see an HTML tag called app.

Instead, we just see the content of our component here

this div with hello as a text,

because these custom elements,

these are not known by the browser.

We just write this code in our React application.

And then when it runs in the browser,

React will not render these custom elements,

which wouldn't tell the browser anything,

but instead it will render the content

returned by these custom elements.

And that's how these React components work

in a nutshell.

That is already one very important

first piece of knowledge here

that we have these React components

which are functions returning JSX,

which we can use to well tell, React,

and therefore in the browser

what should appear here on the screen.

But of course, we typically don't do that

with just one simple component

that just returns a div of hello.

Instead I mentioned before

that I want to rebuild this basic first example

with this delete button.

And then there after

dive into a little bit of a more complex project

in a second step

and therefore let's now work towards that first example

with that delete button

and that modal overlay.