All language subtitles for 007 Introducing JSX_en

So we got this JSX code here

which is basically HTML code inside of JavaScript.

Indeed, JSX stands for JavaScript XML

because HTML in the end is XML, you could say.

So we got this HTML code in JavaScript.

And again, this is really important.

This only works because there are transformation steps

running behind the scenes because of this process

does NPM start process which we started,

which transformed as JavaScript code

to more browser friendly code

before everything is being served here.

And indeed you can see that transformed code

if you want to.

Simply open up the developer tools

and here I'm using Chrome,

which is the browser I do recommend for development.

Simply open up the developer tools in Chrome

by going to view developer developer tools,

or by using that shortcut.

And in these developer tools here go to the sources tab.

And this shows all the sources,

all the script files for example,

which were downloaded as part of this page.

Now in here, you'll see a couple of folders

but you should see some static /JS folder or something

like that, which should hold a couple of JavaScript files.

Now the exact number and names of these files might differ.

But ultimately, if you click through these files

you should see some code which looks fairly cryptic.

And which is definitely not the code we wrote here.

Or we have here in these two simple JavaScript files.

Well, it turns out that this is this transformed code

and it's quite a complex code, as you can tell

because React supports many features.

And this code does not just contain our source code

but the whole react library source code

and the whole react Dom library source code.

So the code in these files is not just our code

but the entire React package code.

That's something to keep in mind.

Now in these files and the main chunk JS file here

for example,

you see a function named app, somewhere in there.

You might need to search for it

with control F but somewhere in there in these files

you should find your app function.

But of course, this function looks quite different

to the app function we have here.

That's a very lean function.

This function is not so lean.

Well in the end debts is transformed code.

You could say that is that code, which runs in the browser

which is not the code we wrote

but that's what this code is transformed to.

And if you have

a look at this transformed code and even look might change

over time, but it will definitely not look like this.

If you have a look at this transformed code that probably

is not code we would like to write.

And that's why we have these transformation steps

because we can use this special JSX Syntex,

which is not normally supported in the browser

whilst we're writing our code

and still it'll automatically be transformed to code

which does run in the browser so that we have the best

of both worlds code, which works in the browser

which obviously is important and code, which is easy to

write for us as a developer.

And I'm just putting so much emphasis on this

because that can be super confusing.

If you're new to React,

you do know some basic JavaScript at least you should.

And all of a sudden you see code like this

which is not regular JavaScript.

Well, this is just developer friendly code

which we can write, which is transformed behind the scenes.