WEBVTT 0 00:00.690 --> 00:07.260 So we've been using this keyword import and export for quite a few lessons now. 1 00:07.320 --> 00:16.580 And I wanted to take a moment to do a quick deep dive on this concept of modules which comes from ES6 2 00:16.710 --> 00:21.780 so that way we can better understand what it is that we're doing when we're importing React from the 3 00:21.780 --> 00:26.820 React module and how does it actually work behind the scenes. 4 00:26.820 --> 00:30.100 So here I've got a very simple starting Project. 5 00:30.150 --> 00:37.170 So go ahead and open it up and fork your own copy. And all it displays at the moment is just three bullet 6 00:37.170 --> 00:39.670 points 1, 2 and 3. 7 00:39.690 --> 00:48.180 Now we've seen in the last lesson that we were able to create custom files which created independent 8 00:48.510 --> 00:54.900 packaged bits of functionality which then, depending on what it is that we need from it, we can import 9 00:55.200 --> 00:58.020 the functionality into a different file. 10 00:58.380 --> 01:03.480 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 01:03.510 --> 01:04.460 .js. 12 01:04.530 --> 01:06.690 And we're not dealing with React components here. 13 01:06.690 --> 01:11.060 This is just gonna be a simple JavaScript file. In this file 14 01:11.070 --> 01:19.800 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 01:19.800 --> 01:23.570 1415962. 16 01:23.580 --> 01:28.620 Now let's say that we had this file called math.js and it would store the value of pi amongst 17 01:28.710 --> 01:29.770 other things. 18 01:29.790 --> 01:36.120 So what if in our index.js we wanted to get hold of the value of pi and display it in our list 19 01:36.120 --> 01:36.690 item here? 20 01:37.380 --> 01:42.030 Well we would have to somehow export this value from this file 21 01:42.030 --> 01:42.880 right? 22 01:42.930 --> 01:50.430 This math.js then becomes a new module and we can export whatever it is that we want to be used 23 01:50.550 --> 01:52.610 elsewhere from this file. 24 01:52.620 --> 01:56.170 So in this case there's only one thing that we could possibly export. 25 01:56.220 --> 01:59.180 So I'm going to export it as a default. 26 01:59.760 --> 02:05.980 And then I'm going to specify the thing that I want to export which is the value of this constant pi. 27 02:06.660 --> 02:13.270 And now when I go back to my index.js I can now import pi from that file math 28 02:13.320 --> 02:14.760 .js 29 02:14.880 --> 02:19.080 So I'll keep the extension there just to make it easier to see in this case. 30 02:19.290 --> 02:26.040 Now that we've imported pi, we can now use it inside our code and I'm going to replace the content of 31 02:26.040 --> 02:29.150 my first list item with the value of pi. 32 02:29.220 --> 02:31.260 So notice what's happened here. 33 02:31.350 --> 02:42.600 I'm now importing the constant pi from our math.js and our math.js specifies a single export 34 02:42.660 --> 02:48.090 which is the default thing to be exported which is the value of this constant. 35 02:48.180 --> 02:54.480 Now back over here, when I'm importing something that is the default, I can actually name it whatever 36 02:54.480 --> 02:56.820 I want. I could call it pi 37 02:56.910 --> 03:03.510 and as long as I updated my code to be consistent with the name I've given in the import then it works 38 03:03.540 --> 03:10.120 just as well. Now what if we had more than one thing in this file math.js? 39 03:10.490 --> 03:14.030 How would we export multiple things? 40 03:14.030 --> 03:23.000 Well, in addition to creating a default export which means that when another file writes import something 41 03:23.300 --> 03:29.600 from this file, that something is going to be equivalent to the default export. 42 03:29.720 --> 03:35.480 But if you wanted to import more than one thing then you can write another export statement with a set 43 03:35.480 --> 03:36.730 of curly braces 44 03:36.830 --> 03:41.780 and inside these curly braces you can define all of the non-default exports, 45 03:41.780 --> 03:44.600 so what else do you want to export from this file. 46 03:44.750 --> 03:53.200 So maybe let's add the doublePi and triplePi functions in addition to the default export. 47 03:53.300 --> 03:58.960 Now if we head back over here, I can still use my default pi 48 03:59.060 --> 03:59.660 right? 49 03:59.690 --> 04:05.480 And as I mentioned, we could call it capital PI or lowercase pi, 50 04:05.510 --> 04:09.620 it does not matter. When I write import pi from this file 51 04:09.620 --> 04:15.920 it's going to look for that default export and it's going to set whatever this value is, this constant 52 04:15.920 --> 04:24.080 pi to a new variable essentially that we can now access inside our index.js file. 53 04:24.110 --> 04:30.230 Now if I wanted to get hold of the other things that are being exported from this file. I can add a comma, 54 04:30.830 --> 04:39.310 add a set of curly braces and specify the names of the other things that are being exported inside here, 55 04:39.350 --> 04:41.900 so in our case it's doublePi and triplePi. 56 04:41.930 --> 04:46.700 So let's go ahead and add those functions doublePi and triplePi. 57 04:46.730 --> 04:50.650 Now in this case however, the names really do matter. 58 04:50.660 --> 04:52.910 We can't just name doublePi 59 04:52.910 --> 05:00.650 something else like double because it won't be able to recognize it from this list of exports. With the 60 05:00.650 --> 05:01.150 default 61 05:01.160 --> 05:05.540 there is only one and they can only be one default export per file. 62 05:05.630 --> 05:09.730 But with these other ones, we differentiate them by their names. 63 05:09.770 --> 05:17.060 So I have to make sure that I'm calling it the same as the export name. Once we've imported our double 64 05:17.060 --> 05:18.240 Pi and triplePi 65 05:18.260 --> 05:20.660 I can now use it in my list item. 66 05:20.660 --> 05:25.160 So for example maybe in this case I want to use the value of doublePi 67 05:25.160 --> 05:27.480 but remembering that double pi is a function. 68 05:27.500 --> 05:34.200 So in order to get the value or the return out of it, I have to add the parentheses to activate it. 69 05:34.200 --> 05:38.060 And now let's go ahead and do the same thing for triplePi as well. 70 05:38.120 --> 05:45.730 And now you can see in our website we've got the value of pi which is exported as the default from math. 71 05:45.760 --> 05:53.330 js. We've got the value of doublePi which is this function that's exported from math.js that 72 05:53.330 --> 05:59.420 basically just returns the value pi multiplied by 2 and then triplePi multiplies it by 3. 73 05:59.450 --> 06:07.490 And now we've got all 3 of these being rendered and all of these bits of functionality or constant 74 06:07.490 --> 06:15.970 values are coming from this single import statement from a completely different file. What import and 75 06:16.030 --> 06:23.830 export and the concept of modules allows us to do is to really be able to start splitting up our large 76 06:23.890 --> 06:28.710 Javascript files into individual more manageable components. 77 06:28.870 --> 06:35.710 And this is of course what the React components are leveraging from. And this capability is not new, 78 06:35.710 --> 06:42.340 it's not unique to ES6 because even previously when we weren't using Babel, we weren't using ES6, when we 79 06:42.360 --> 06:50.770 were just writing Node apps we were able to use the var react equals require react 80 06:50.770 --> 06:51.510 right? 81 06:51.580 --> 06:55.080 So this code does pretty much the same thing. 82 06:55.210 --> 07:01.030 But remember that this require function actually comes from Node itself not Javascript. 83 07:01.030 --> 07:06.790 So if you're interested in what exactly is the difference between the Node.js require and the ES6 84 07:06.850 --> 07:13.750 import/export, then a link to this Stack Overflow answer and question if you want to dive more into the 85 07:13.750 --> 07:20.980 specifics. But just note that when we're working with Node, when we're not really sure that we can always 86 07:20.980 --> 07:26.950 use ES6 because remember the browser penetration of ES6 is something like 80% at the moment, 87 07:26.980 --> 07:33.190 so that means out of 100 users 20 of them might not actually be have to render this code that you're 88 07:33.190 --> 07:34.270 using. 89 07:34.270 --> 07:41.980 And so we're only able to very safely use ES6 everywhere in our app because we know that we're relying 90 07:41.980 --> 07:46.860 on Babel to convert it into a format that can be rendered on any browser. 91 07:47.410 --> 07:54.130 But I prefer the syntax of import and export because it's really clear what's happening. I'm importing 92 07:54.130 --> 08:01.990 whatever is the default export from the React module and in this case I'm importing the default pi 93 08:02.230 --> 08:08.380 which is being exported by math.js in addition to these two other functions which I'm gonna use 94 08:08.500 --> 08:16.230 inside my index.js file. Now if you don't want to actually separate out the difference between 95 08:16.290 --> 08:22.800 the default and the exports, then in your import you can also just simply use the wildcard which is the 96 08:22.890 --> 08:23.670 asterisks sign. 97 08:24.090 --> 08:29.760 So this basically says import everything but you have to give it a name so that you can use it in your 98 08:29.760 --> 08:34.480 file so you'll write right import everything as we'll call it pi. 99 08:34.890 --> 08:42.120 And then if we go ahead and console log what exactly is the value of pi anyways, then you'll see that 100 08:42.120 --> 08:49.080 pi is actually an object and it has certain properties. It has something called doublePi which is a 101 08:49.080 --> 08:52.780 function, has something called triplePi which is also a function 102 08:52.920 --> 09:00.630 and it also has a default property which is set to the value of whatever is being exported as the default 103 09:00.750 --> 09:02.160 over here. 104 09:02.160 --> 09:06.180 That means that we can now adjust our code instead of using pi, 105 09:06.180 --> 09:14.920 we can write pi.default and then we can instead of doublePi, we can write pi.double pi and pi 106 09:14.950 --> 09:15.790 .triplePi. 107 09:16.660 --> 09:22.990 And now if we refresh you can see that we've basically got the same thing as before, but we're now saying 108 09:22.990 --> 09:26.040 we want everything from this entire module. 109 09:26.300 --> 09:33.610 Why? If you use a wild card then you'll lose the benefit of having a single default export. Using the 110 09:33.610 --> 09:39.940 single default export and incorporating specific functions makes your code more clear and it means that 111 09:39.940 --> 09:43.080 you're only importing the things that you need. 112 09:43.090 --> 09:48.070 This is why you'll see the wild card import discouraged in many style guides. 113 09:48.100 --> 09:52.910 So in this lesson we looked at the import and export keywords. 114 09:53.050 --> 10:01.150 We saw that in a single file, we can only have a single default export but that default export can be 115 10:01.150 --> 10:06.700 imported under any name you give it inside another file. 116 10:07.090 --> 10:13.120 But if you wanted to get a hold of the other things that are being exported then you can add a comma 117 10:13.270 --> 10:21.070 and a set of curly braces and then specify the exact names of the functions or constants or whatever 118 10:21.070 --> 10:25.150 it is that you want to export from the other file. 119 10:25.150 --> 10:31.270 And then once you've done that, you can then freely use these things that you've imported, either the 120 10:31.300 --> 10:37.370 constants or the functions, and treat them as if they existed in this current file. 121 10:37.570 --> 10:40.640 But it does mean that your files are split up. 122 10:40.670 --> 10:46.310 They're easier to understand and it's easier to spot problems if there are any. 123 10:46.330 --> 10:53.620 This way we can start building up more complex and more interesting apps that uses this kind of modularity. 124 10:54.460 --> 10:55.320 In the next lesson 125 10:55.330 --> 10:58.780 we're going to get some more practice using import and export 126 10:58.780 --> 11:01.370 and I've got a challenge for you to complete. 127 11:01.510 --> 11:05.830 If you're happy with all the concepts learned in this lesson and you think you can apply it yourself 128 11:06.100 --> 11:09.620 then head over to the next lesson and complete the challenge.