So we've been using this keyword import and export for quite a few lessons now. 1
And I wanted to take a moment to do a quick deep dive on this concept of modules which comes from ES6 2
so that way we can better understand what it is that we're doing when we're importing React from the 3
React module and how does it actually work behind the scenes. 4
So here I've got a very simple starting Project. 5
So go ahead and open it up and fork your own copy. And all it displays at the moment is just three bullet 6
points 1, 2 and 3. 7
Now we've seen in the last lesson that we were able to create custom files which created independent 8
packaged bits of functionality which then, depending on what it is that we need from it, we can import 9
the functionality into a different file. 10
In my case in my source folder I'm just gonna go ahead and create a new file which I'll call a math 11
.js. 12
And we're not dealing with React components here. 13
This is just gonna be a simple JavaScript file. In this file 14
I'm going to create a new constant which is gonna be pi and I'm going to save the value of pi as 3. 15
1415962. 16
Now let's say that we had this file called math.js and it would store the value of pi amongst 17
other things. 18
So what if in our index.js we wanted to get hold of the value of pi and display it in our list 19
item here? 20
Well we would have to somehow export this value from this file 21
right? 22
This math.js then becomes a new module and we can export whatever it is that we want to be used 23
elsewhere from this file. 24
So in this case there's only one thing that we could possibly export. 25
So I'm going to export it as a default. 26
And then I'm going to specify the thing that I want to export which is the value of this constant pi. 27
And now when I go back to my index.js I can now import pi from that file math 28
.js 29
So I'll keep the extension there just to make it easier to see in this case. 30
Now that we've imported pi, we can now use it inside our code and I'm going to replace the content of 31
my first list item with the value of pi. 32
So notice what's happened here. 33
I'm now importing the constant pi from our math.js and our math.js specifies a single export 34
which is the default thing to be exported which is the value of this constant. 35
Now back over here, when I'm importing something that is the default, I can actually name it whatever 36
I want. I could call it pi 37
and as long as I updated my code to be consistent with the name I've given in the import then it works 38
just as well. Now what if we had more than one thing in this file math.js? 39
How would we export multiple things? 40
Well, in addition to creating a default export which means that when another file writes import something 41
from this file, that something is going to be equivalent to the default export. 42
But if you wanted to import more than one thing then you can write another export statement with a set 43
of curly braces 44
and inside these curly braces you can define all of the non-default exports, 45
so what else do you want to export from this file. 46
So maybe let's add the doublePi and triplePi functions in addition to the default export. 47
Now if we head back over here, I can still use my default pi 48
right? 49
And as I mentioned, we could call it capital PI or lowercase pi, 50
it does not matter. When I write import pi from this file 51
it's going to look for that default export and it's going to set whatever this value is, this constant 52
pi to a new variable essentially that we can now access inside our index.js file. 53
Now if I wanted to get hold of the other things that are being exported from this file. I can add a comma, 54
add a set of curly braces and specify the names of the other things that are being exported inside here, 55
so in our case it's doublePi and triplePi. 56
So let's go ahead and add those functions doublePi and triplePi. 57
Now in this case however, the names really do matter. 58
We can't just name doublePi 59
something else like double because it won't be able to recognize it from this list of exports. With the 60
default 61
there is only one and they can only be one default export per file. 62
But with these other ones, we differentiate them by their names. 63
So I have to make sure that I'm calling it the same as the export name. Once we've imported our double 64
Pi and triplePi 65
I can now use it in my list item. 66
So for example maybe in this case I want to use the value of doublePi 67
but remembering that double pi is a function. 68
So in order to get the value or the return out of it, I have to add the parentheses to activate it. 69
And now let's go ahead and do the same thing for triplePi as well. 70
And now you can see in our website we've got the value of pi which is exported as the default from math. 71
js. We've got the value of doublePi which is this function that's exported from math.js that 72
basically just returns the value pi multiplied by 2 and then triplePi multiplies it by 3. 73
And now we've got all 3 of these being rendered and all of these bits of functionality or constant 74
values are coming from this single import statement from a completely different file. What import and 75
export and the concept of modules allows us to do is to really be able to start splitting up our large 76
Javascript files into individual more manageable components. 77
And this is of course what the React components are leveraging from. And this capability is not new, 78
it's not unique to ES6 because even previously when we weren't using Babel, we weren't using ES6, when we 79
were just writing Node apps we were able to use the var react equals require react 80
right? 81
So this code does pretty much the same thing. 82
But remember that this require function actually comes from Node itself not Javascript. 83
So if you're interested in what exactly is the difference between the Node.js require and the ES6 84
import/export, then a link to this Stack Overflow answer and question if you want to dive more into the 85
specifics. But just note that when we're working with Node, when we're not really sure that we can always 86
use ES6 because remember the browser penetration of ES6 is something like 80% at the moment, 87
so that means out of 100 users 20 of them might not actually be have to render this code that you're 88
using. 89
And so we're only able to very safely use ES6 everywhere in our app because we know that we're relying 90
on Babel to convert it into a format that can be rendered on any browser. 91
But I prefer the syntax of import and export because it's really clear what's happening. I'm importing 92
whatever is the default export from the React module and in this case I'm importing the default pi 93
which is being exported by math.js in addition to these two other functions which I'm gonna use 94
inside my index.js file. Now if you don't want to actually separate out the difference between 95
the default and the exports, then in your import you can also just simply use the wildcard which is the 96
asterisks sign. 97
So this basically says import everything but you have to give it a name so that you can use it in your 98
file so you'll write right import everything as we'll call it pi. 99
And then if we go ahead and console log what exactly is the value of pi anyways, then you'll see that 100
pi is actually an object and it has certain properties. It has something called doublePi which is a 101
function, has something called triplePi which is also a function 102
and it also has a default property which is set to the value of whatever is being exported as the default 103
over here. 104
That means that we can now adjust our code instead of using pi, 105
we can write pi.default and then we can instead of doublePi, we can write pi.double pi and pi 106
.triplePi. 107
And now if we refresh you can see that we've basically got the same thing as before, but we're now saying 108
we want everything from this entire module. 109
Why? If you use a wild card then you'll lose the benefit of having a single default export. Using the 110
single default export and incorporating specific functions makes your code more clear and it means that 111
you're only importing the things that you need. 112
This is why you'll see the wild card import discouraged in many style guides. 113
So in this lesson we looked at the import and export keywords. 114
We saw that in a single file, we can only have a single default export but that default export can be 115
imported under any name you give it inside another file. 116
But if you wanted to get a hold of the other things that are being exported then you can add a comma 117
and a set of curly braces and then specify the exact names of the functions or constants or whatever 118
it is that you want to export from the other file. 119
And then once you've done that, you can then freely use these things that you've imported, either the 120
constants or the functions, and treat them as if they existed in this current file. 121
But it does mean that your files are split up. 122
They're easier to understand and it's easier to spot problems if there are any. 123
This way we can start building up more complex and more interesting apps that uses this kind of modularity. 124
In the next lesson 125
we're going to get some more practice using import and export 126
and I've got a challenge for you to complete. 127
If you're happy with all the concepts learned in this lesson and you think you can apply it yourself 128
then head over to the next lesson and complete the challenge.