All language subtitles for 003 Adding JavaScript To A Page & How React Projects Differ_en

So let's start

by revisiting certain crucial core concepts

and things you should know about JavaScript,

for example, that JavaScript can be executed

in many different environments.

For example, of course, the browser,

that's where JavaScript originated.

In the end, that's what it was built for

back in the nineties.

But nowadays, thanks to NodeJS and Deno,

for example, you can also execute JavaScript code

outside of the browser.

This will not be the focus of this course

because this is a React course

and React is a client-side, front-end,

browser-based library in its core

that allows you to build user interfaces

with React and JavaScript.

But it is of course worth knowing

that JavaScript is not limited to the browser.

You can even build mobile apps with JavaScript,

thanks to extra technologies

like Capacitor or React Native,

which by the way,

would be a great next step

after finishing this course.

You can also use React

in conjunction with another tool

or another library you could say,

called React Native,

to build native mobile apps

for Android and iOS.

And I do have

a dedicated course on React Native

if you wanna learn more about that

after finishing this course.

So JavaScript is really versatile, really powerful.

But in this refresher section,

we are going to focus

on JavaScript in the browser,

though the general syntax

and rules of course,

are always the same,

no matter for which environment

you are writing your JavaScript code.

So since we focus on JavaScript in the browser,

let's explore how JavaScript code

can be added to a website.

And here you have two main options

and they both include the special script tag,

the special script element,

which you can add to your HTML code.

You can either put your JavaScript code

between such script tags,

or you can use those script tags

to import JavaScript files,

which then contain your JavaScript code.

Now typically,

we don't use that inline approach

on the left here,

where the code is between those script tags,

because this approach

can quickly lead to unmaintainable

and complex HTML files,

and is therefore typically

only used for very short scripts.

Instead, typically,

you have your JavaScript code

in dedicated JavaScript files

because such projects that use this approach

are way easier to maintain.

Therefore, here in this demo project

which I prepared,

we could start in this assets folder

by adding a new sub-folder

that could be called scripts,

though the name of course doesn't matter.

And in there,

we can create a JavaScript code file

that could be named app.js.

Though this name also is totally up to you,

it just should end with .js,

so instead of course tells the browser

and also the Code Editor

that this file will contain JavaScript code.

And the Code Editor can therefore,

for example, make sure that the code

is properly highlighted and formatted.

Well, and with such a file added here,

you can then import it in the HTML file

by going there

and adding your script tags,

opening and closing script tags.

And you always need both.

You can't use a self-closing script tag

or anything like this.

Instead, you need opening

and closing script tags.

That's a must have.

Now you can add them

anywhere you want in that file.

In the head section,

in the body section,

really, anywhere you want.

And then you would add the source attribute,

the src attribute

to point at the file.

In my case, in the assets folder.

And there in the scripts folder

that should be imported.

And now that file would be loaded

as part of this webpage

when the webpage is loaded.

Now it is worth noting that

you can then add extra attributes

to the script tag.

For example, the defer attribute,

to make sure that the script

that will be imported,

will only be executed

after the rest of the HTML document

has been read and parsed.

This ensures that,

if your script code,

for example, needs to work

with some HTML elements,

those HTML elements are available

when the JavaScript code starts executing.

Without defer,

it would start executing right away.

And if you then would try

to reach out to this unordered list,

for example, this unordered list

might not be available yet

if the script is loaded

before the list is output here.

That's why you might want to add defer.

Now in modern JavaScript projects,

it's also quite common

that you have another attribute

on your script tags

instead of having defer.

And that would be the type attribute,

which then is set to module like this.

Now, this type module attribute

here on the script tag makes sure

that this JavaScript file

is treated as a JavaScript module.

And if you are treating

your JavaScript files as modules,

this unlocks one very important new syntax.

The import syntax,

where you can import code

from script A into script B.

For example, here we could have

a second script file,

util.js,

which might contain some utility functionality.

And in that script file,

we could export something

with the export keyword,

and then import it

in the app.js file.

Now we'll explore this import export syntax

and this general module feature

in greater detail soon.

But before we get there,

there's one other super important thing

you should know about the script tag

here in the HTML file.

Because before we get there,

there is one other super important thing

you should know about these script tags

and about importing script files

in the context of building React apps.

Because when you're working

on a React project,

you will almost never add these script tags

to your HTML file on your own,

because React projects almost

always use a build process

which as part of that build process,

injects these script tags

into the HTML code for you.

And then the next lecture will explore

why we use such a build process

in React projects.