Original subtitles

Now I wanna start

refreshing your JavaScript knowledge

by first exploring this import export syntax

I mentioned before

because in this course we're going to import

and export a lot of things.

Because in React apps,

like in most more advanced JavaScript projects,

it is considered a best practice to split your code

across multiple files

to keep it maintainable and manageable.

And that's exactly what you do

with help of the import and export keywords.

Now for that, let's say that in the util JS file

we have a certain value that should be usable

in other files as well.

For example, in the app JS file.

Here we could have an API key variable.

and variables in JavaScript

are created with the special let keyword.

But I'll get back to variables and constants

and some key things you should know

about them a little bit later in this section.

And in there we could store a string created

with single or double quotes, doesn't matter.

And that string could then contain some cryptic API key

that maybe is required

in order to send HTDP requests to a backend.

This is just a dummy example here

but this overall section will just show you

some dummy examples because in the end it is just

about refreshing your JavaScript knowledge.

So if that API key, that value here,

this string here,

should also be available in other files,

we need to export it

by adding the export keyword in front of it.

This makes this thing, this variable here,

in this case,

available outside of this file as well.

We can then import it in the file where it should be used.

So in this app JS file, for example

by using the import keyword.

And then here we need opening and closing curly braces.

And between those braces, we then refer to the name

of the thing that's exported.

So in this case, the name of the variable.

If we would be exporting a function,

it would be the name of the function instead.

But here it's the name of the variable.

So API key written like this.

And of course the casing matters

because JavaScript is a case sensitive language.

And then thereafter,

we need the from keyword to let JavaScript know

from which file we're importing

this thing named apiKey.

This path to the file then goes between quotes,

single or double quotes.

Again, doesn't matter.

And here we then typically have a relative path starting

with dot slash if it's in the same folder,

starting with dot dot slash

if you want to go up one folder,

but here it is in the same folder.

So I will use dot slash,

and then the name of the file with the extension added

at least if you're using just JavaScript.

Now when working in React projects,

you will actually see that the extension,

the dot JS typically,

is omitted there.

That's the case again,

because of that build process

that's running behind the scenes,

which will add the extension behind the scenes.

If you are writing just JavaScript code

without such a build process,

you do need to add it on your own.

But throughout this course where we do

use React projects that come

with such a build process that adds the extension for us,

we will actually not add it on our own.

But here we need to do it.

And with that, this API key variable

and the value it contains will be available

in this app JS file,

even though it's defined in another file.

And here we could then, for example

console log apiKey to output it in the console.

Now, very important for these import

and export keywords to work

you must be using this type module import here.

That's really crucial.

Though, you will see that for the React projects,

if you explore the automatically injected script text there

you don't find this type module attribute on them.

The reason for that simply is

that this build process

will actually take all your imports and exports

and basically merge all these separate files that you have

during development into one big file

or a bunch of big files, which are then imported

with the old school syntax in the right order.

This is done to also make this code execute in browsers

that don't natively support this import export syntax,

and also so that the browser doesn't have to download dozens

of small JavaScript files,

but instead just a couple of bigger files,

which typically is more efficient.

And I'm just letting you know about this here

so that you don't wonder

why this type module is missing

on your React projects script tax.

But if you have a vanilla JavaScript app

without such a build process,

you do need to add this type

module attribute here.

And with that here in this project,

if you save that and reload the app,

and you then open this console,

you should see your apiKey being output there.

And that's of course coming from the app JS file

where we are importing it from the util JS file.

Now, that's not the only variation

of this export import syntax, though.

This is one way of exporting and importing things.

But in this course, you'll also see another way.

Besides exporting with help of the export keyword

in front of a variable or function,

you can also create a so-called default export

by adding the default keyword.

Now in that case, you must not create a variable thereafter

like this, and you also don't assign a name.

Instead you just export the value like this.

So now I'm just exporting a value without a name.

And when adding the default keyword here

I'm saying that this here, this value here,

should be the default thing that's exported by this file.

And what's very important is

that you must only have one default export per file.

If I try to add a second one, I'm getting an error.

On the other hand, with the syntax we had before,

without default, you can export as many things as you want.

Exporting another variable like this wouldn't

have been any problem.

With the default keyword,

you directly export a value

and you must only have one default export profile.

So I'll also add the old code here simply

so that you see the difference like this.

And then app JS, the import syntax now also changes

if you have a default export.

Instead of importing like this,

you now import without curly braces.

Instead, you just assign any name

of your choice.

Since the thing that's exported

as a default doesn't have a name here,

you can use any name you want in the file

where you want to import it,

but you do need to assign a name.

And then you still define the path

to the file from which you want to import like this.

With that, if you save this, and again you reload this file,

you will see that this again gets locked to the console.

Now with help of such a default export

and the respective import syntax.

And this is also a common way

of exporting something and importing something,

which is especially useful if you only have one thing,

one function, or one value in the file

where you want to export it.

This is something you will see later in the course

once we explore the concept of React components.

Because there it's quite common that we only

have one component, one JavaScript function

as you will learn per file.

And therefore it's quite common to export this one component

function as a default since there are no other things

that would be exported in that file,

but it is totally up to you

which approach you prefer.

It's just important to keep in mind

that the import syntax

also changes if you use the default export syntax here.

Now, one last thing you should know

about the export and import syntax

is that if you have named exports

as this syntax here is called, like this,

and let's say you have multiple named exports,

for example you also have another

special import syntax you can use.

Of course you can import those named things

like this, import apiKey, for example.

I'm just going to comment out this import

so that we don't have a name clash.

And you could then import all the named things

by separating them with a comma here.

That's how you would import multiple things

from the same file

if those things are exported as named exports.

So without the default keyword.

And as you see here

you can also mix the default keyword with named exports.

You just must not have more than one default export.

But having a default export

in addition to some named exports is absolutely fine.

But what you could now do here is that instead

of listing all the things you want to import like this

as a comma separated list between the curly braces,

you can also import them

by grouping them together into a JavaScript object.

And that would be done by then using a star,

then the ask keyword,

and then any name of your choice

for example, utils or util.

Whatever you want.

And then again, the path to the file

from which you want to import, like this.

With that, all the things provided by util JS

would be grouped into this object,

and therefore, you could use it

with the default JavaScript object notation

using its name

and then the dot notation

to access the thing that was named abc

or the thing that was named apiKey or the default export,

which is available under a key named default.

So that's how you could then output the apiKey.

And therefore here, if I reload,

I again see that apiKey here in the console.

Now by grouping multiple exported things to gather

into one object.

As a last side note, this

as keyword can also be used to assign aliases.

So for example, here

if I go back to this named export import thing,

and I'm not happy with the name abc here,

I could assign an alias by using the as keyword word

after the thing that I want to rename in this file here

and I could rename it to content or whatever I want.

And now if it would console lock content here

I would be logging the value

that is stored in that abc variable

in the util JS file.

But I'm renaming it here in the file

where I'm importing it

with help of that special as keyword

which allows us to assign an alias

to the thing that's being imported.

So as you can see, there are a couple

of things you can do with this import export concept.

In the end, it is pretty straightforward

but you should know about these keywords

and how to use them

because we are going to use them a lot

throughout this course.