All language subtitles for 018 A Closer Look At JSX_en

Let's have a closer look at the JSX.

Now I mentioned before, earlier in this module,

you can open up your developer tools

and there you'll find the JavaScript code

which is responsible for what you're seeing on the page.

And in there, you will also find

all your component functions,

like this app function here.

Now it will look totally different in the end,

because there you have no JSX code,

because JSX code isn't supported by the browser.

This, in the end, is just syntactic sugar, which works here

thanks to the behind-the-scenes transformations.

Now we can see that the code

to which it is transformed in the end

looks like this here, right?

This here is the code to which it is transformed.

Now this is a code which still is fairly cryptic,

because this actually is the final step

of the transformation.

We could also write code instead of this JSX code

which is a bit more readable to us humans than this,

but not as readable as the JSX code.

I still want to show it to you

because this shows you what this JSX code

actually represents behind-the-scenes.

So here we go.

Maybe

you already wondered about one other thing.

In package.json, we've got a bunch of dependencies,

and most of them are just dealing with

the behind-the-scenes transformations.

But we've got two dependencies which are related to React.

React and React-dom.

Now we are using React-dom in the index.js file,

but we are never using React anywhere.

We're never importing React anywhere.

And this actually just works in this kind of project setup

and in all modern React project setups

which are created by create-react-app.

In a lot of other React projects,

which you'll find out there in the wild,

you will actually see React imports,

even though we don't have them here.

Because in the past, in older React projects,

you actually needed to

import React from React in all your React component files.

To be precise, in all files where you used JSX.

You needed to always import React from React in the past.

And you'll still see a lot of React projects out there

which have these imports therefore.

That we can emit this import now,

is really just some magic being done

by modern React project setups.

We needed this import in the past

because this JSX code, as I mentioned,

is just syntactic sugar.

And under the hood, it has actually transformed

two methods called on this React object,

which is why we needed to import React in the past.

Now, let me show you what this code would look like

if we wouldn't use this JSX syntax.

And therefore I'll comment this out

and return it as alternative.

Because on this imported React object,

there is a createElement method, which we can call.

And when you use JSX, it's near this method which is called.

CreateElement takes three arguments.

The first argument is the element which should be created.

For example, a div.

And if it's a built-in HTML element,

you just pass in a string

with the name of that element, like div.

The second argument is an object

that configures this element.

Specifically, an object which sets all the attributes

of this element.

This div has no attributes,

so here we can pass in an empty object.

The third argument now is the content

between the opening and closing div tags.

And actually it's not just a third argument.

You can now have an infinitely long list of arguments,

which are the different content pieces

between the opening and closing tags.

So here we have two elements, so we would have

two extra arguments.

The third argument would be our H2 element.

So the first child in that div.

And therefore here, again, we would call React

createElement

and create an H2 element here.

And that H2 element, again, has no attributes,

so the second argument of this second createElement call

would be an empty object.

And the third argument of this createElement call

would be the content in this H2 tag,

so this string, in this case.

So we would pass this string here,

and escape this single quote.

And if we now format it, it would look like this.

Now next to this second createElement call,

We could have a third createElement call,

which is the neighbor element to this H2 element,

so this expenses component.

Again, we create an element here,

but now we're working with a custom component

instead of a built-in one.

In such cases, you don't use a string here,

but you just point at your imported function,

which it in the end is,

because your components are just functions, right?

So here we set Expenses.

We point at Expenses as an element here.

The second argument is an object of properties

that should be set, of attributes that should be set,

and here we have the items prop, the items attribute,

so we would add an items key here.

Keep in mind, this is just a JavaScript object,

so we have the property name, and then a colon,

and then the value, which here would be expenses.

And then as a third argument,

we have to content between the opening and closing tags.

And in this case, there is no such contents,

so we omit it.

And this here

would be the alternative to this JSX code

using this React object.

And therefore, if I saved that,

we go back to the screen,

we see exactly the same as before.

Now, you could write your entire React app like this.

It just turns out that this is a bit harder to read

and a bit more cumbersome than using this JSX code.

But that's why you needed to import React from React

in all your component files in the past,

because this is the under-the-hood code

which kind of gets created automatically when you use JSX.

Now in more modern project setups,

you can omit this React import because

the project setup is able to make that transformation

without the import being added.

But if you see component functions

where this import is there,

it is there because, in the past,

you always did need to add it.

And therefore, because of that reason,

I will now also import it and add it

to all components where I use some JSX code.

Like here, index.js,

Expenses.js,

ExpenseItem.js,

ExpenseDate.js,

and Card.js.

Again, you technically don't need to do that,

but I'm doing it to really emphasize

that React is still being used under the hood here

when you use JSX code, because that code

under the hood is transformed to something like this

before it's then transformed even more

to what we saw in the browser earlier.

That's important.

And if you have a look at this code,

it should also be clear why you need some wrapping element

as a root JSX element.

Why you can't have just these two side-by-side elements

being returned.

Because how will you write this in the React

createElement world?

You, in the end, would be trying to return this,

and that doesn't work.

You can't return more than one thing.

You could return an array, sure,

but this is not an array of elements.

This is two separate elements side by side.

That's why you always need such a wrapper,

because in createElement world,

you always create one element

which then may have more child elements.

So that's why we have this one wrapper root JSX element

which we always need.

This is why we need that.

That's the under-the-hood, behind-the-scenes stuff

that is going on.

Now, I will comment this out

and go back to the JSX solution,

because, of course, we're going to write JSX code

in the course.

After all, this is way more convenient.

But it is important to understand what is happening

under the hood and how React works.