Original subtitles

Now, if you take a look at a React project

like this React demo I showed you

in the first course section

to which you again, find a link attached to this lecture,

if you take a look at such a project,

you'll note that in the annex html file that you find there,

you won't find any script tag.

There in this index html file in the head section,

I have some meta tags and I have link tags,

but I have no script tag there.

And in the body, I just have the no script tag

that shows a fallback message

if the user has disabled JavaScript in their browser,

but I got no script tag in there.

Absolutely no script text

and we also never add script text to that file.

Nonetheless, as you can of course tell

if I reload this here, this app works

and JavaScript code clearly is executing

because the React app is executing.

And React of course, in the end, is JavaScript code.

A special JavaScript code, but it is JavaScript code.

So why is this working?

Well, because as mentioned at the end of the last lecture,

React projects use a build process, which simply means,

the code you write is not the code that gets executed

like this, at least, in the browser.

Instead, the code you write is transformed behind the scenes

before it's handed off to the browser.

In this demo project on CodeSandbox,

but also in the local projects

I'll use throughout this course,

this is done with help of a tool

that's running in the background.

And you can actually see that tool

in the package.json file.

This file simply lists all the dependencies of this project,

all the libraries used by that project,

and therefore, of course, for example,

in there we find the React libraries, the two packages

that make up the React library to be precise.

But here in this example,

we also find the React Scripts library in addition.

And this is actually a library

that's not going to be executed in the browser

or that's used by React once it's running in the browser,

but instead this React Scripts package here

provides a bunch of tools that take your code

and transform it behind the scenes

before it's then injected into the browser.

Or to be precise, before it's then injected

with help of a script tag into the HTML file here.

If you take a look at this running website,

for example, by opening it in a new window,

and you then there inspect this page

so that the browser developer tools open up,

you'll see that now there are some script tags in there.

Actually multiple script tags.

And these script elements were generated and injected

into this HTML file automatically behind the scenes

by this built process that's running in the background.

This preview website, which we see here,

is being served by a development server

that's also running in the background on CodeSandbox.

In a local project on the upper hand,

you had to explicitly start that development server.

And it's this development server

which is watching your source code behind the scenes,

and which is then also kind of transforming that source code

behind the scenes and which is then adjusting the HTML file

to contain these script elements

that do then load that transformed source code.

So that the transformed source code is executed on the page.

And why do we use such a built process?

Why does the code need to be transformed?

Well, for two main reasons.

The first reason is that raw unprocessed React code

won't execute in the browser.

Mostly because React code uses this special JSX feature.

Now, you will learn more about writing React code

and about JSX later once we start diving into React.

JSX code simply is this HTML code

written in JavaScript files.

Out of the box, this would not work

because this is not a standard JavaScript feature.

If you would try to use this kind of code

in our default JavaScript project here,

for example in the AppJS file,

if you would try to add like a a div in there,

and you would open this website preview

and try to reload this page,

you would see that you would get an error.

An error that in the end points at this div here.

Because this indeed is not a standard JavaScript feature,

it does not work out of the box.

So for that reason, to enable this syntax

which is crucial in React apps as you will learn,

because React will be all about including

this HTML-like code in your JavaScript files,

to enable this feature, the code must be transformed

so that you can use it whilst writing the code

but it's transformed to something JavaScript knows

before the code gets executed in the browser.

That's one reason for using a build process.

Another reason is that the code you write

would not be optimized for production,

it would not be minified, for example.

Minification simply means that, for example,

names of variables or functions are shortened

to reduce the amount of JavaScript code

that's served to the user.

If you take a look at the code

that is served to the user here

by, for example, visiting one of these imported code files

that is served here in CodeSandbox,

you'll see that it looks something like this.

Pretty unreadable,

not the kind of code we would like to work on

as a developer, but valid JavaScript code in the end.

Though it is code that's highly optimized

to be as short and small as possible

to reduce the amount of code

that has to be downloaded by the website visitor.

So that's another reason why React projects

typically require a built process.

And the good news are that if you create a React project

on CodeSandbox

or with help of tools like Create React app or Vite,

so if you're using projects

as we're using them in this course,

those projects all come with such a built process.

So you don't have to go through any custom setup

or tweak anything on your own.

But that's also the reason why you also need

to install NodeJS on your system

in order to work on React projects.

Because NodeJS is not just used to install packages

with the NPM command or to create projects

with the NPX command as you already learned it,

but instead it's also used behind the scenes

by these tools that are used by that build process

that's running behind the scenes.

So NodeJS is also needed and used behind the scenes

to make sure that your React code gets transformed.

So that of course, was a lot of talking

about the build process, but it is important to understand

that such a build process is used behind the scenes

and why it's being used.

Back in our vanilla JavaScript project here

which we'll use for this refresher,

we should therefore get rid of this invalid JavaScript code

because this project here indeed does not come

with a build process that would convert this JSX code

to valid JavaScript code,

and therefore here we can't use JSX code.

But we also don't need it for this refresher.