All right.
Fresh off the project hopefully everything was successful.
We're all going to be going back to a tutorial and I would encourage you to do the same thing that I'm
going to be doing.
We're all going to be creating a new create react application.
And the reason for that is very simple because in this case we're not going to be deleting as brutally
as we were in the beginning.
And I think it's just gonna make a little bit more sense.
Technically you could work in the same old folder but I think it's just gonna be easier if you're going
to follow along and do things exactly like I am doing.
And first things first I would like to navigate to less now then once I'm gonna be in up.
I'm gonna I'm gonna create a new folder I'm gonna say create react have and I don't know what can call
this maybe tutorial tutorial I don't know second or something like this.
And in this case we're gonna be creating a new folder.
Again this might take a while so I'm gonna resume the video once all the dependencies are been installed.
Nice.
We have our application so why don't I open up my text later and then I'm just gonna drag and drop it
here as well as I would like to right away have my browser windows.
I'm going to send you a window and this is gonna be way too big for me right now.
So let me make this one bigger more big and then I'm gonna open up my integrated terminal here I'm gonna
around 9 p.m. start.
So that's gonna bootstrap our application.
Now I can make this a little bit more and now I'm just gonna be starting there so that's not what I
wanted.
So let's say I would want them side by side.
That wouldn't be my first action.
Now once I have them side by side I will gonna leave this open on a little bit the sidebar just so I
can explain a little bit better of what we're doing.
And then we're gonna head over and I'm just gonna close the terminal because I'm not gonna use it right
now.
Like I said in this case we're not gonna be as brutal.
We're already at least are a little bit familiar what's happening.
And in this case we're not gonna be doing anything within next year.
I will gonna swing back at the end of the video and I'm going to kind of go over why the app is being
rendered right now.
But at the moment I would just like to cover what already imports and exports as well as how we can
use these nice extensions or at least one of them.
And that's gonna be this guy which is gonna be very very useful as you're gonna be working.
So these are gonna be the same.
But let's start with an imports and for now let me close the next James I will gonna open up the files
again and we'll gonna head over back to the app.
J.S. and this is we're all gonna be still brutal.
So we're gonna still select everything that is in the app J.S. and it is gonna delete it because at
the moment we don't know what is a cloud based component which by the way is the app J.S. currently
or at least was.
And now let's create our state stateless Functional Component again and as always we know that we need
to use the imports and this is the good news after this video we should understand what is happening
with the new imports going to be looking for react from.
And then the dependency is going to be tracked then let's create our component let's say concert I will
gonna name this map and then I'm going to say that app is gonna be equal to and then in this case we're
not going to be passing anything we're just gonna have some I don't know S..
So let me make the parentheses.
Let's right section and that's not what I wanted.
So let me maybe have the angle bracket and then let's write section and then within the section we're
gonna have PARAGRAPH OF.
THIS IS MY CONTENT.
Let's do very simple example how I do want to do one thing which again we haven't covered yet but in
order for our example to work least currently let's do export default and then let's just write up again
these names are gonna have to match.
So this is gonna be important.
Let me save it.
And now everything is gonna be work.
So why don't we finally take a stab of imports and exports and how they're working and what would be
the major benefit of them already.
Currently we so as we're working with our first project that if we're placing let's say one component
here then that would be probably the list or something like that.
Then we had a list item.
Your files are getting more and more clogged and eventually as you're passing in more data and all kinds
of other information.
This is not going to be very useful.
The fact that you just have one massive file is going to be hard for debugging.
It's gonna be hard for your structure and overall this is gonna be really annoying.
So there is something called the imports and exports we're working with modules and you can think of
modules as a way of basically having a separate file of having some kind of separate information.
So first of all let me make some comments on the top which by the way I think you're going to find useful
and we have two types of import.
There's going to be named imports as well as we're going to have the default import or you can also
write with exports is gonna be the same thing name and default import forward slash and export.
Okay.
So that would be the major thing that there's gonna be two types and then also gonna have the fact that
only one default export per module per module.
And again you can think of modules as a separate files where you're going to have all kinds of information
that you just want to share some of it.
Let's say you have your module now there's gonna be some functions some data some components whatever
and you'll gonna pick what are you going to be sharing.
So let me write this thing off module as a file as a file or something like this.
Now how we're gonna start working with this.
Well we have the source folder correct.
Within the service folder we have the APS assess.
Then we have the jazz.
So why don't we create a new file and see how the imports and exports support.
I'm just gonna go with simple file I'm gonna call this data yes.
And please understand that we're not going to be covering everything that has to do with imports and
exports.
There are some few other things like aliases and stuff like that.
And for me I think that it's more important that you understand the general basics and everything that
we're going to be using in the course.
And if you're interested or if you see let's say some other syntax or something like that you can always
swing back and you can do a little bit more research.
So let's say I have my data J.S. file in this data J File I'm just gonna start creating some variables
and then second name is gonna be equal to let's say John.
Then the the age of John is gonna be let's say twenty seven.
So let's say concert and then age is gonna be let's say twenty seven then whereas here while we can
also create maybe some kind of persons I mean it's a concert Khan's person and then within the person
object I'm gonna have insert the name as a key value pair so name is gonna be Peter.
And then we're gonna be looking obviously for the comma because this would be a proper syntax for name
of Peter we're going to have twenty five so far so good.
Y also we don't create some kind of local variable that's gonna serve a purpose of showing you what
happens if you don't want to share some kind of information.
So let's say a local secret or you know what.
Let's not do local let's do Secret value let's just call it secret.
So what I would need to do right now if I would want to use this information in my app let's say I can
use it anywhere I want.
Please understand that just because we're gonna be using the app J.S. as our example doesn't mean that
we can only use it with app J.
This isn't gonna work all throughout our application.
So let's say I'm interested in name age and person but I don't want to use this secret ballot.
So what we can do is something called named import and export.
So in this case what would happen is I would need to add export keyword here right in front of whatever
my data structure that I have my case.
This is just gonna be simple variable but in this case I'm going to say export and then I'm going to
copy and paste it as well right here as well right here.
But secrets value I'm going to leave it off here and then you're going to obviously see that we're not
gonna be able to access it.
So let's imagine this would be some kind of secret value that we're just using in the data.
Yes.
In order to use this we the name the imports that we have right now named the import export.
And by the way if I just say one import named or something like that please understand that that means
both of them was our name imports or exports or just names import it will work exactly the same.
So let's say right after the importing from react I'm gonna write import and then I'm gonna be looking
for my values since these values are right now named meaning I would specifically need to choose them.
This index would be like this where I have the curly braces.
Then I need to go for exactly the same names.
And this is important with a default value.
This is going to be a little bit different but with a named export you need to make sure that they actually
in that match.
In this case I'm going to say name age and person and now I'm gonna be looking where from.
And in this case we are using something called the relative path where if this is gonna be in a same
folder then I just say dot and then forwards.
And now this gives me right away suggestion do you want this from the app test data and index or service
worker of course.
And in our case obviously we're looking for the data.
And like I said the difference would be between the CFS files that you would need extensions as well
as the same is gonna work with images you're going to need to have the file extension.
However with a JavaScript files you don't need it.
So you're just gonna have data on that.
So now in this case we can just say at the moment nothing is happening.
But these are the variables that we can use.
So why don't we test now.
Why don't we set it.
There's going to be more paragraph and then in each of the paragraphs on the right name.
And then let me cut and paste it and let's type age.
So first of all we're going to see as everything's working I have John and you have twenty seven.
Now let me show you what happens if you're going to be trying to render the object which will gonna
happen actually in some cases at least as you're working with the react.
I think especially in the beginning where you might see this example or meaning error that is going
to spit you back.
So let's see what happens with an object.
And for this I would like to open the console you can also open up the integrated terminal is going
to do the same thing and let's say I'm not going to be looking for elements I'm going to be looking
for the console and at the moment it just says OK so person is not used and the secret value is assigned.
But again we're not using and that's fine.
We can live already with these warnings because we understand that this is not going to break our application.
However something that will gonna break our application he is going to be something like this.
So we already know that.
OK we have named imports and exports and I can just access these values all over my application.
However with an object please be careful won't I'm going to say I've noticed what happened.
So I have a big fat error and the reason for that because we cannot do this because we cannot render
objects like that.
Obviously if you want to render keys from the object we are allowed to do that.
So let's say in this case I'm going to have two options.
Age Your name is this is what is in my hand.
So in this case once I'm gonna render everything's gonna be fine and I'm going to be looking for the
Peter.
Also understand that I'm just using right now the variables and the object we can use the arrays which
by the way we're going to do throughout our tutorials and projects as well as we can use functions we
can use utilities we can set up C assess and I can go on and on and on and on.
The main purpose of this video is for you to understand and you can share the information throughout
your application using the export and import.
And this gives you a structure where you can separate your concerns let's say in one file or folder
you're going to keep some kind of information then in the other one you're going to keep some other
type of information.
So let's say you need debugging.
This is gonna help you where you're like OK you know what I need to run back to the data I don't have
to run to the app J.S. where the whole information is right here.
So good luck finding it.
So this really saves you a lot of time and a lot of energy especially if you put your mind to it as
you're structuring your application.
However notice since this is not shared the sacred value we are not accessing here even though type
here secret value secret value nothing.
I can try to use it but I'm gonna get undefined.
So let me copy and paste it.
I'm not going to be looking for a person let's say secret value.
Hopefully you can see that the name is exactly the same.
However it's saying Well the secret value is not exported.
Buddy what are you looking for.
Well that is important.
You only are accessing whatever you are exporting not everything that is in the file.
However we also have another option how we can do this.
So let me first come on this out.
So let's say something like this and let me show you right away some other ways how we can do this.
And by the way let me get rid of the secret value.
Maybe this is just gonna throw you off a little bit.
So that would be one way.
And in order to work with our next example what I'm gonna do is I'm just gonna copy and paste it and
I'm going to comment this out.
Again this is just gonna be for your future reference so you understand that.
Let's say if you're doing it this way.
This is how you accessing the values but I'm gonna show you another way how you can import.
And that would be using import.
And then we have this wild character of Asterix as this would mean everything that's being exported.
And here we can give it an alias.
So in this case if I could just say data and again I can name this orange it doesn't really matter.
You're probably already sick of me saying that but anyway this is how it's going to work.
So we are exporting everything that is being exported or I'm sorry importing everything that's being
exported as data and then we'll again looking from where.
So here I'm going to say from when we have dot org slash.
And then again the thing is going to be data.
However the difference here is going to be very simple.
If I'm gonna say notice I have age person and all of them are not defined.
Now the reason for that is first of all it's going to be two reasons because I copy and paste in actually
two times.
That's not what I want.
My apologies.
So let me first deleted but the same result is gonna be here.
And the reason for that result is that we are importing here everything has data.
So in order to access it this is gonna be exactly the same how we work with an object where we have
data dot then we have data that age and we have also data the heart and you obviously hopefully understand
what's happening that everything we can access here with this variable that we had.
So if you did name this orange then obviously you're going to be axis head here as well as being an
orange.
So that would be something that I would want to show.
I also want to show you one more thing.
So let me again comment this out just so you can see that this would be an option.
And again I'm leaving this purposely for your reference so you understand how this will work.
And I know there's kind of a bunch of comments but I find it a little bit useful than me just deleting
it because I think that way at least you can go back and you'll be like OK so this is how it works with
as we're importing everything.
And this would work as we were having just selective imports.
And in this case let me again come on this out.
So I'm going to say it like this and knowledge change something in the data.
So we're not limited to having this kind of syntax.
So in this case again let me copy and paste it.
So I'm going to say all these four values are gonna be exactly the same.
How are we gonna change around a little bit as well as I'm gonna still comment out for your future reference.
And now let me delete all these exports.
Let's say something like this.
So there's gonna be cases where you're going to see something like this which by the way again does
exactly the same thing.
That is the reason why I come in this house just so you see that it would works in a similar fashion
where I can just say export then the syntax would be curly braces.
And then we can just name whatever we're exporting.
Name age person.
And sure enough nothing breaks because everything works exactly the same way.
So you can either do it this way where you're exporting one by one or you can do something like this.
That would be named the imports.
Again there's a little bit more to it.
You can do some aliases right here and all that but I really don't want to clog your head because in
most cases we again we're gonna be using either a simple name next ports as well as simple default export.
So for me you probably wouldn't worry about it too much.
As long as you understand that everything that we're gonna be naming obviously is gonna be imported
and exported.
So in this case we could have add the secret value if we wanted.
We wouldn't be limited in that power here of course this wouldn't work in general because we explicitly
need to use the export that does just would be a side note.
Okay.
What else we have.
Why don't we have a look at a default export.
How it would work as well as why don't I throw you a little mine grenade and we set up a new folder
so within the source I'm going to say there's going to be new folder and I'm gonna call this components
components and within the components let me create another folder.
I didn't have to technically do it but let's just do it anyway.
We're going to have another folder.
Well we're gonna have I don't know header header and in this case within the header let's create another
file in this case but this is gonna be a component and a common practice would be naming or components
with capital letter so in this case I'm going to say banner J is what I would want in a batter.
Well I could create our typical component that we have been creating the functional state component
by again typing everything out.
Import react yada yada yada.
However now I'd like to show you the neat and awesome extension which would be this guy.
This would be the react snippet.
And at this point as you're looking at the documentation you should already start understanding what's
happening because of course we haven't covered everything but we already have covered enough things
so you can start being like okay I kind of understand at least the general idea here and the idea is
very simple.
The idea is that I can let's say if I want components at the moment don't look at this class component
we all gonna cover it very shortly.
Core as you're looking at a r FC which by the way let me just scroll down a little bit.
This is gonna be a bunch of them but as you're looking at this guy what do you see.
So there is an import from react not caring so far so good.
And then we have this export default which we're gonna talk about literally in a second and then you
have your function.
So what's happening is instead of every time running back to your keyboard an import from react and
do all of this and that what we can do is we can just type our FC and we're good to go and that's it.
That's all we have to do.
Let me show you how this is gonna work.
And by the way this is again going to work the same with class based components which we're going to
cover again in the following videos but the only thing I need to do is do this.
Our FC that's it.
I have my function.
The name is gonna match by the way right away the file name.
I have my imports I have this setup as a default.
So in this second we're exactly gonna talk about it and let's write something here and let's say hello.
Or you know what.
Let's do having one this is gonna stand out.
Love from Dan or my friends.
I'm gonna save it.
So far so good.
Everything is working fine.
I can just close this.
I don't need that and then I'm gonna swing back again to the app and I would like to import this.
However with default there's two things.
First of all there can be only one default export from the module or from the file as well as with the
default one.
I can rename this whatever I want in the sense that if I'm gonna head over back to imports and I'm just
gonna like to do it here in the app yes and if I'm gonna say import if I'm gonna write or change and
then I'm going to be looking for the file I just need to use this variable.
Common sense obviously would be naming this exactly what you were exporting.
So if you're exporting as a banner even though you're exporting this as a default.
Now let me show you what happens in the next year as you see that in the app we're also doing the same
thing we're saying export default and then we're saying what we are exporting we're not naming it here.
We're just saying okay I would like to export this app.
However in the index J.S. This is where we importing.
And by the way as you're looking at it you can see that a lot of things that we did in the previous
video are exactly the same.
There's few more additions like in next year says there's the service worker and that we don't care
about but we have react react Damn.
Then we are rendering what we rendering is there.
Now we are getting the app from the default export.
And in this case we are importing this and we're naming this app.
However like I said I could have named this orange and also named this guy orange.
Now this is important they do need to match but the moment I say with nothing happened.
So my application doesn't break.
And the reason is very simple because this is default export.
However again the common practice would be naming at least similar to what you are exporting.
So unless you are again a true rebel I would suggest at least staying with like a common practice.
So let me finish here with an app.
Yes.
So like I said I could name this orange but why don't we stick to everything and I need to say banner
and the difference you see or hear.
So with the named export import I needed to name them.
In this case I'm picking and choosing my value right now.
So here I'm gonna be looking again for the banner.
However the difference is again the banner is gonna be kind of nested right.
Because we had the component the header.
So why don't we start looking for it.
And again the way we look for it is very similar.
So we have here that then we're gonna be having the forward slash.
Then I'm going to be looking for the component then I'm going to be looking for the header because obviously
that is my folder structure.
And then within the header we all gonna have our banner.
So all this long line.
And now finally we have the matter.
So why don't we head over to our section that is being rendered and we'll just banner.
And in this case what we're having is right away the Boehner and what else I would like to show you.
I think that in the banner.
Why don't we try it out to get again the data.
Remember we could access also the data from the banner.
It's not much just have J.S. Hauer in this case again the importing the past there's gonna be a little
bit different because now we're looking from this file and we're looking all the way to the data which
is technically right next to the object.
So how we're gonna do that.
Well first of all we I think are doing the not default but we are doing the name export.
So in this case why don't we do import then in this case.
I'm just going to be looking for a name.
Is gonna work exactly the same with the rest of them.
But the main purpose here is to show you the path so the path would work like this.
So we have from then we have what.
Well now in this case this is not going to be the same folder.
So now we have to use to that.
So this was the reasoning where I'm showing you how we would do this from this folder.
So now we're looking in the header but obviously we already know that this is not going to mean header.
So we can delete this and we need to say no you need to go one folder.
So in this case where this is gonna be all that is gonna be already in the components now within the
components.
Then we have the data.
So basically what happens is that I am not going to be looking in the same folder.
This is not gonna be in header as well as this is not going to be in the component.
This is gonna be in fact in source so that way you're doing this.
Dot dot then you're leaving the folder again dot dot then you're leaving the folder.
And then finally you reach the point eventually obviously where you're getting to the data.
So in this case let me just test it out.
I'm gonna say that I'm going to be looking for the name.
So hello from banner.
And then I have a John.
So I know that everything is working out.
So again in short named and default export then there's gonna be only one default export in most cases
this is what's gonna happen you're just gonna create a component and the R FC.
So let me give you this suggestion.
So our FC is gonna be functional based component class based component is gonna be our C in which we
will going to cover a little bit later and then the right away syntax is gonna be something like this
but we can also rewrite this of course and the syntax wouldn't be for long.
Let me again do the same thing like we did before.
Let's come on this.
So that would be one option.
Not gonna be default one that the snippet is gonna give you.
However we could have written this also like this or we have the function of course and then we're looking
for a name let's say banner and we could have copy and pasted but a little bit of typing is not going
to hurt us.
And then in this case we're gonna do the same thing like it is in an app where we have default and then
we're looking for the banner.
So what I'm saying is I'm gonna be exporting this as a default.
And the name of my export is gonna be banner.
So let me copy and paste it here.
I'm going to come in this out and that should do exactly the same thing where I don't have these errors.
So in short this would be exports and imports as well as our snippets extension in our ReACT application.