Original subtitles

All right, once we're successfully done, we'll get the basics, but before we move on to more interesting

and advanced reac topics, I would like to cover import and export statements.

Now, let me tell you right away that imports and exports are not really specific.

In fact, they are six modules.

So think Joska.

And the reason why I would want to cover them now is because we will rely heavily on them throughout

the remainder of the course, as well as the project and essentially its six modules or ability to import

and export our code allows us to split up or up into small chunks.

Which, of course, makes it easier to manage it in general.

There are two flavors named and default exports, and even though there are few more variations for

both of them, for now, we'll just cover the most straightforward setup.

So as we're looking at our map, everything is beautiful.

But don't you think that our intelligence is getting quite big?

And we need to keep in mind that at the moment we literally have only three cards with some books.

Of course, normally you have way more functionality than that.

So it wouldn't make sense to start splitting up our functionality into separate files because that way,

of course, we can manage it way easier.

So here's what I'm talking about.

I'm going to open up the sidebar and let in a source.

I would like to create two new files.

So one is going to be called books.

Ejaz, this is where I would want to store my books and the other one is going to be book jazz.

And this is, of course, where I would want to store my component.

So my book component, let's create this false or new file and then I'm going for books.

Just this is where I'll store my data and then I'll have another one in file.

And then I'm looking for this book and then Ajaz.

Now, what I would want to do right now is head back to in next year and grab my books.

All right.

So let's keep on scrolling.

And just cut it out now.

Of course, we navigate to books, just copy and paste, not everything is beautiful, but of course

in the end, like jazz, where we have the booklist, of course, we are not any more accessing the

books.

So how we can fix that?

Well, in the books jazz, we would need to go for the named export.

Again, there are two flavors and you can use them.

How are you like meaning we could have set this up as default export as well.

But I'm going to show you the named export movie at the box and then with a book.

So with the component, I will show you the default export.

So we go here, we export.

So that is the key word.

And then of course, we go with our.

And then whatever we would want to export, so that's going to be most straightforward set up, like

I said, there are few flavors, so essentially there are few other ways how we can write the same thing

again.

The idea won't change.

We're still exporting this box.

All right.

But there are few more variations how we can do that.

But for now, we'll just stick with the most straightforward one where we go with export and whatever

we would want to export.

So now, of course, in the end is just what I would want is to import and some little like we imported,

the index says.

Now, of course, I'm looking for that particular right now.

It's going to be a little bit different where I'm going for the import statement.

Then, since it is a named import or named export, I would need to go with curly braces and learn the

name or a name like export needs to match.

Exactly.

So if this is Bugs Bunny, make sure that in the next year you're also targeting the same name.

So in my case, I need to go for books, so go for books.

And that is coming from and now we go with the relative path.

So now something interesting we're not importing from the package like we did would react, which of

course was coming for an old model.

And like I mentioned back then, since it is not coming from the node modules now, we need to set up

a path.

So in this case, since it was coming from node modules, we didn't care.

We just said, hey, get me this one from this package.

However, in this case, we need to have a relative path.

But since the box is in the same folder, I just go Dot.

Then fourth, and then I'm looking forward to file and I go here with books now, since it is a just

file, we don't need to have the extension previously.

Remember, when we work with scissors, we needed to have the scissors extension with Joska.

We don't have to do that.

So if it is a job to file, excellent.

We just keep on moving on.

So now we separate.

OK, beautiful.

And notice how our app still works.

So everything works as expected.

Now, of course, like I said, if file, for example, set this up as data and I'll say it now, it

will say, well, books is not defined.

So now of course, since I named this data also where I'm using it, of course I would need to rename

it as that.

However, it says import error data is not export it from books.

So if you're changing something around, like I said, this is a named export.

So, for example, you need to access exactly the same name.

So here I am accessing data, however, react, complain and listen.

You're not exporting data.

So that is the case.

Of course we can just change it.

So that is up to you.

This is just to showcase that, of course, names need to match.

Exactly.

So once we have this particular set up, everything is beautiful.

And now let's focus on the default one now before we set up our component.

Let me just show you the extension, like I mentioned previously, where we have the reaction.

So, for example, if we create this component and if I go with a snippet of R, A, F, C, E, I right

away have my component and this is going to be the case where it will always match the name of that

particular file.

So in this case, notice it is named book jazz.

So that's why right away my component is Bogota's.

And again, there are multiple flavors, but this is the most basic one where we import reac from react.

Of course we need to do that since we're setting up the component and that as far as default export,

we go with export.

But then we have this default and then whatever we would want to export as default, and I'll show you

the differences between the two in a second.

But just keep in mind that, of course, again, these names need to match.

So if you're setting up your function, your component name and book, if you want to export as default,

of course, you would need to use the same name.

And also keep in mind that you can have only one, only one default export per file, meaning you can

set up more named exports from this particular file from book, Jarius.

But as far as default, you can have only one.

Now, what I would want in this book, Jass Component, let's head back to next year.

And then, of course, this is my component.

Correct.

So what I could do.

Yeah, just keep on scrolling, keep on scrolling, cut it out, and we can just remove the empty function

that we currently have in the book component and then copy and paste.

And, of course, everything works awesome.

So everything is displayed exactly like we wanted.

And now in the index, again, we would need to import.

So the difference between named and default exports is the fact that now I can name it whatever I would

want to learn here.

If I go with import and if I call this book and learn from and again, we're looking for relative path,

we're looking for book jass, everything will work as expected.

So now once we serve notice, it is running like nothing happened.

OK, so once all that is running now, once everything is in place, then of course we can just take

a look.

What happens if, for example, I change its name.

So I have import book from the book.

But like I said, this is a default export.

So that means I don't need to look for a specific name.

So if I'll change this around and if I call this specific book, then of course the only thing I need

to do is change where I call it.

So in order here I have my book.

So if I'll just call this specific book, you'll notice that everything will still work.

So even though I renamed it and from the book Jass, I'm exporting the book.

Everything works as expected because it is a default export and then I can rename it however I would

want in here.

I rename it to a specific book that is coming from the book address file.

And then of course, the only thing I need to do is just remember what is the name I gave.

So if this was a specific book, of course I need to access the same name.

And then let me just show you the relative path from a different folder, because once in a while,

of course, we will use that throughout the course where I'm just going to create a new folder.

I'll say this thing here and then within this folder and let's just come up with a file of testing and

then Ajaz and let's export as default and also export export left and we'll call this hell a world.

So greeting, greeting.

And that is going to be her little world share in any of the files.

Now we can export our of course, relative path will change because now we need to go one level up into

testing and then look for this testing jass file again.

It's not going to do anything.

However, I just want to showcase in the next Jass where if I go with import, remember the name was

greeting and we're export it as a name import.

So we go here with a greeting and that is coming from.

So now we're looking into the testing testing folder and then we're looking for the testing file.

So testing drafts.

And now, of course, anywhere where I would want I can just, for example, control.

So I go with a log and then greeting and then, of course, once I open this up.

I will notice that in my counsel I should have the hello world, and of course, I notice the line 12

it is Hello World.

So everything works as expected.

Like I said, it is not a Riak thing.

It is six modules.

And if you have covered er six modules before, you are in good shape.

However, we will heavily rely on this functionality because it will just allow us to set up our applications

in a more manageable way within hours.

Now I have my next guest.

In the next year I only have the booklist, so that is my component and I'm getting the specific pieces

of data, whether that is on the books, whether that is a specific component or whether that is some

other functionality in this case, health world.

And as you can see, it is much more easier to manage app where we split up our data into multiple files.

So those are the basics, how we can use import and export statements and create react up.