1 00:00:01,070 --> 00:00:02,000 All right. 2 00:00:02,000 --> 00:00:06,550 So, let's now finally use NPM for the first time. 3 00:00:06,550 --> 00:00:11,230 And remember, NPM stands for Node Package Manager, 4 00:00:11,230 --> 00:00:14,580 and it's both a software on our computer 5 00:00:14,580 --> 00:00:16,563 and a package repository. 6 00:00:17,960 --> 00:00:21,880 Now, before we jump straight into NPM, let's start 7 00:00:21,880 --> 00:00:26,880 by understanding why we actually need something like NPM. 8 00:00:26,880 --> 00:00:30,950 So, why do we actually need a way of managing packages 9 00:00:30,950 --> 00:00:33,860 or dependencies in our project? 10 00:00:33,860 --> 00:00:37,180 Well, back in the day before we had NPM, 11 00:00:37,180 --> 00:00:41,700 we used to include external libraries right into our HTML. 12 00:00:41,700 --> 00:00:44,590 So, basically using the script tag. 13 00:00:44,590 --> 00:00:47,240 And this would then expose a global variable 14 00:00:47,240 --> 00:00:50,960 that we could use, and actually that's exactly 15 00:00:50,960 --> 00:00:54,520 what we did earlier in our Mapty project. 16 00:00:54,520 --> 00:00:58,610 So, let's actually use or open that here. 17 00:00:58,610 --> 00:01:02,293 So, Mapty and just the index.html file. 18 00:01:03,710 --> 00:01:07,720 And so here it is, and you see that indeed, 19 00:01:07,720 --> 00:01:12,720 we simply included the leaflet.js file basically using 20 00:01:14,150 --> 00:01:18,570 a script tag and did that before or own script 21 00:01:18,570 --> 00:01:22,320 so that our own script could then use the global variable 22 00:01:22,320 --> 00:01:27,020 that was exposed by this library here, right? 23 00:01:27,020 --> 00:01:28,540 Remember that? 24 00:01:28,540 --> 00:01:31,800 Now, this actually creates a couple of problems, 25 00:01:31,800 --> 00:01:34,654 at least in a big project so maybe not 26 00:01:34,654 --> 00:01:38,560 in this particular project that is really small, 27 00:01:38,560 --> 00:01:41,200 but in a huge project and a huge team, 28 00:01:41,200 --> 00:01:43,810 this is just not manageable. 29 00:01:43,810 --> 00:01:47,720 First, it doesn't make much sense having the HTML loading 30 00:01:47,720 --> 00:01:51,510 all of JavaScript, that is just really messy. 31 00:01:51,510 --> 00:01:55,330 Also many times we would actually download a library file 32 00:01:55,330 --> 00:01:58,050 to our computer directly, for example, 33 00:01:58,050 --> 00:02:00,820 a jQuery JavaScript file. 34 00:02:00,820 --> 00:02:03,600 But then whenever a new version would come out, 35 00:02:03,600 --> 00:02:06,030 we would have to manually go to the site, 36 00:02:06,030 --> 00:02:07,550 download the new version, 37 00:02:07,550 --> 00:02:10,750 change the file in our file system manually, 38 00:02:10,750 --> 00:02:14,370 and then include it here again, maybe with some other name, 39 00:02:14,370 --> 00:02:16,470 with some other version number. 40 00:02:16,470 --> 00:02:20,320 And that was just a huge pain, believe me. 41 00:02:20,320 --> 00:02:24,680 And a third reason is that before NPM, there simply wasn't 42 00:02:24,680 --> 00:02:28,080 a single repository that contained all the packages 43 00:02:28,080 --> 00:02:29,600 that we might need. 44 00:02:29,600 --> 00:02:32,520 And so this made it even worse and more difficult 45 00:02:32,520 --> 00:02:35,330 to manually download libraries and manage them 46 00:02:35,330 --> 00:02:37,230 on our computers. 47 00:02:37,230 --> 00:02:40,581 So in summary, this all used to be a huge pain 48 00:02:40,581 --> 00:02:42,590 and a huge mess. 49 00:02:42,590 --> 00:02:45,410 And maybe you even remember this yourself, 50 00:02:45,410 --> 00:02:50,330 like the old days of jQuery and dozens of jQuery plugins 51 00:02:50,330 --> 00:02:52,960 that you would have to keep updated. 52 00:02:52,960 --> 00:02:57,060 But anyway, all of this is just to say that we really need 53 00:02:57,060 --> 00:03:00,430 a way to manage our dependencies in a better 54 00:03:00,430 --> 00:03:02,220 and more modern way. 55 00:03:02,220 --> 00:03:06,050 And NPM is exactly how we do that. 56 00:03:06,050 --> 00:03:09,850 And so, let's start by using the NPM software now. 57 00:03:09,850 --> 00:03:14,630 Now right, so actually we will need to this terminal now, 58 00:03:14,630 --> 00:03:16,660 so let me clear it. 59 00:03:16,660 --> 00:03:21,170 And we start by checking if we actually have NPM installed. 60 00:03:21,170 --> 00:03:25,570 So to do that, just type NPM dash V. 61 00:03:25,570 --> 00:03:28,120 So, this will check for diversion 62 00:03:28,120 --> 00:03:31,070 and if you get any number here and it doesn't matter 63 00:03:31,070 --> 00:03:32,873 which one, then you're good. 64 00:03:33,750 --> 00:03:38,750 Well, in fact it should actually be greater than six, okay? 65 00:03:38,800 --> 00:03:43,020 So, anything that you have greater than six is good, 66 00:03:43,020 --> 00:03:44,660 but if you did get an error 67 00:03:44,660 --> 00:03:47,190 because you didn't install Node.js in one of 68 00:03:47,190 --> 00:03:51,073 the previous sections, then please go to this website now. 69 00:03:51,073 --> 00:03:55,370 So, Nodejs.org and then download and install the version 70 00:03:55,370 --> 00:03:57,380 for your computer. 71 00:03:57,380 --> 00:04:00,500 So, you can just use this LTS version, 72 00:04:00,500 --> 00:04:02,990 you don't have to go with the current one. 73 00:04:02,990 --> 00:04:05,370 And by the time you're watching this, 74 00:04:05,370 --> 00:04:10,370 LTS is probably already at 14 or 16 or 18, who knows, 75 00:04:11,410 --> 00:04:13,310 but that doesn't matter. 76 00:04:13,310 --> 00:04:16,140 So, all that matters is that you install Node.js 77 00:04:16,140 --> 00:04:17,920 and then as you run this command, 78 00:04:17,920 --> 00:04:19,890 you just need to get some number here, 79 00:04:19,890 --> 00:04:22,150 and then you're good to go. 80 00:04:22,150 --> 00:04:25,860 Now in each project in which we want to use NPM, 81 00:04:25,860 --> 00:04:28,770 we need to start by initializing it. 82 00:04:28,770 --> 00:04:32,580 And so for that, we write NPM in it, 83 00:04:32,580 --> 00:04:35,030 and this will then ask us a couple of question 84 00:04:35,030 --> 00:04:38,013 in order to create a package.json file. 85 00:04:39,450 --> 00:04:41,940 So, the questions are down here. 86 00:04:41,940 --> 00:04:45,208 So, first the package name, and if we just had enter, 87 00:04:45,208 --> 00:04:48,337 then whatever is here in these parenthesis will be 88 00:04:48,337 --> 00:04:49,700 the default. 89 00:04:49,700 --> 00:04:54,120 And so for now, we are just good with all of these defaults. 90 00:04:54,120 --> 00:04:57,000 So, just keep pressing enter. 91 00:04:57,000 --> 00:04:59,780 And of course you could define things like the author, 92 00:04:59,780 --> 00:05:02,170 keywords or whatever, 93 00:05:02,170 --> 00:05:04,670 but that doesn't really matter for now. 94 00:05:04,670 --> 00:05:06,160 So, is this okay? 95 00:05:06,160 --> 00:05:07,965 Yes, it is. 96 00:05:07,965 --> 00:05:12,340 And then we end up with a special file called package.json, 97 00:05:12,340 --> 00:05:13,313 which is this one. 98 00:05:14,810 --> 00:05:17,650 So, this is the file that NPM just created 99 00:05:17,650 --> 00:05:19,123 for our project here. 100 00:05:20,360 --> 00:05:23,270 Now, this file here is basically what stores 101 00:05:23,270 --> 00:05:26,490 the entire configuration of our project. 102 00:05:26,490 --> 00:05:29,930 So, as you see it's stuff like the project name itself, 103 00:05:29,930 --> 00:05:33,512 the version that we can keep on updating and yeah, 104 00:05:33,512 --> 00:05:36,013 the author and all kinds of stuff. 105 00:05:37,150 --> 00:05:39,910 So for now, that's not really interesting, 106 00:05:39,910 --> 00:05:42,293 but it will be in a second, okay? 107 00:05:43,830 --> 00:05:46,380 Let's just close these files we don't need. 108 00:05:46,380 --> 00:05:50,301 This can become smaller and let's also clear it. 109 00:05:50,301 --> 00:05:51,470 Okay. 110 00:05:51,470 --> 00:05:54,710 And now let's actually install the leaflet library 111 00:05:54,710 --> 00:05:58,203 that we used before, but this time using NPM. 112 00:06:01,030 --> 00:06:06,030 So, let's just search for the documentation page again. 113 00:06:06,420 --> 00:06:09,390 And so here, I already showed it to you before, 114 00:06:09,390 --> 00:06:12,070 but let's take a look at it again. 115 00:06:12,070 --> 00:06:15,010 So here, using a JavaScript package manager, 116 00:06:15,010 --> 00:06:18,703 all we have to do is indeed NPM install leaflet. 117 00:06:19,700 --> 00:06:22,530 And so this is how it will always work. 118 00:06:22,530 --> 00:06:27,530 So, you write NPM to run the NPM program, then install, 119 00:06:28,220 --> 00:06:29,870 and then the name of the package. 120 00:06:30,840 --> 00:06:35,394 So, leaflet like this, and then it will start downloading 121 00:06:35,394 --> 00:06:36,763 and that's it. 122 00:06:37,870 --> 00:06:39,920 Now, that way of installing it, 123 00:06:39,920 --> 00:06:42,470 so this one here was the long version, 124 00:06:42,470 --> 00:06:45,500 but we can also write just NPM I, 125 00:06:45,500 --> 00:06:49,440 and then leaflet like this. 126 00:06:49,440 --> 00:06:51,820 So, that's gonna be the same thing. 127 00:06:51,820 --> 00:06:54,370 And now you'll see that two things happened. 128 00:06:54,370 --> 00:06:57,400 So first of all, in our package.json file, 129 00:06:57,400 --> 00:07:01,300 a new field here was created for the dependencies. 130 00:07:01,300 --> 00:07:04,560 And the dependency that we have here now is leaflet 131 00:07:04,560 --> 00:07:09,560 that we just installed at version 1.6.0, okay? 132 00:07:10,790 --> 00:07:13,260 And more about why this is important 133 00:07:13,260 --> 00:07:17,100 a little bit later again, but for now let's take a look at 134 00:07:17,100 --> 00:07:18,980 the second thing that happened, 135 00:07:18,980 --> 00:07:23,830 which is that we now have this folder called node modules. 136 00:07:23,830 --> 00:07:27,610 And this folder itself contains the leaflet folder, 137 00:07:27,610 --> 00:07:30,460 as you see here, alright? 138 00:07:30,460 --> 00:07:32,410 And so this is the code of this library 139 00:07:33,670 --> 00:07:35,910 and here is some more code, 140 00:07:35,910 --> 00:07:38,893 but that is not really important. 141 00:07:39,890 --> 00:07:42,220 So, you can take a look at it and you will see 142 00:07:42,220 --> 00:07:47,220 that it is like, well 15,000 lines of code or something. 143 00:07:48,800 --> 00:07:53,083 And so, this is not a small library by any means, okay? 144 00:07:55,400 --> 00:07:58,500 And so yeah, this folder contains everything 145 00:07:58,500 --> 00:08:02,690 about this library that we need to include in our page. 146 00:08:02,690 --> 00:08:06,440 And so yeah, this folder simply contains everything 147 00:08:06,440 --> 00:08:08,030 about this package. 148 00:08:08,030 --> 00:08:10,510 And of course the more packages we install, 149 00:08:10,510 --> 00:08:13,493 they will all get stored into the node modules folder. 150 00:08:15,010 --> 00:08:19,850 Okay, so we installed our leaflet library now, 151 00:08:19,850 --> 00:08:22,030 but if we wanted to use it, 152 00:08:22,030 --> 00:08:25,460 that wouldn't be easy without a module bundler. 153 00:08:25,460 --> 00:08:27,890 And that's because this library actually uses 154 00:08:27,890 --> 00:08:30,350 the common JS module system. 155 00:08:30,350 --> 00:08:33,290 So for the reasons that I explained to you before, 156 00:08:33,290 --> 00:08:37,670 and so therefore we cannot directly import it into our code. 157 00:08:37,670 --> 00:08:41,200 We could only do that if later we used a module bundler, 158 00:08:41,200 --> 00:08:43,410 but for now we are not doing that. 159 00:08:43,410 --> 00:08:46,900 And so, let's just not use leaflet for now. 160 00:08:46,900 --> 00:08:50,100 So, this was just to show you how to install it. 161 00:08:50,100 --> 00:08:53,090 So instead, let me show you how we can install 162 00:08:53,090 --> 00:08:57,080 and import one of the most popular JavaScript libraries, 163 00:08:57,080 --> 00:08:58,373 which is Lodash. 164 00:09:00,965 --> 00:09:05,147 So Lodash, like this and Lodash is essentially 165 00:09:06,110 --> 00:09:10,430 a collection of a ton of useful functions for erase, 166 00:09:10,430 --> 00:09:14,130 objects, functions, dates, and more. 167 00:09:14,130 --> 00:09:17,820 So, it's a lot of like functions that could 168 00:09:17,820 --> 00:09:21,600 or should be included in JavaScript, but are not. 169 00:09:21,600 --> 00:09:24,610 And so people simply implemented them in Lodash, 170 00:09:24,610 --> 00:09:26,283 and so now we can use them. 171 00:09:27,130 --> 00:09:29,090 So, down here we have to installation 172 00:09:29,950 --> 00:09:33,450 and here you see again, the old way of doing it 173 00:09:33,450 --> 00:09:34,853 as I explained it before. 174 00:09:35,800 --> 00:09:38,020 So, that would be downloading it 175 00:09:38,020 --> 00:09:40,050 and then including it manually. 176 00:09:40,050 --> 00:09:45,050 Then here we have the NPM way, but there also should be 177 00:09:47,312 --> 00:09:49,613 something else here I'm looking for, 178 00:09:51,460 --> 00:09:55,350 but here is how we actually install it using NPM. 179 00:09:55,350 --> 00:09:58,743 So as always, NPM install and then Lodash. 180 00:09:59,860 --> 00:10:04,150 However, I'm not looking for just the normal Lodash version, 181 00:10:04,150 --> 00:10:08,280 because once again, that one actually uses common JS. 182 00:10:08,280 --> 00:10:11,320 And so we can't use common JS modules without 183 00:10:11,320 --> 00:10:12,800 a module bundler. 184 00:10:12,800 --> 00:10:15,140 And so I'm looking for a special version 185 00:10:19,980 --> 00:10:23,090 and that one is called Lodash ES. 186 00:10:23,090 --> 00:10:27,363 And so, ES is because of ES modules, all right? 187 00:10:28,220 --> 00:10:33,220 So, here we say NPM I for install and then Lodash dash ES, 188 00:10:37,530 --> 00:10:41,463 then wait for it, and here it is in our dependencies. 189 00:10:42,570 --> 00:10:45,183 Let's take a look at it here as well. 190 00:10:47,220 --> 00:10:48,383 So, here is Lodash. 191 00:10:49,360 --> 00:10:52,910 And so here, we now basically have one file for each of 192 00:10:52,910 --> 00:10:56,073 the methods that are available in Lodash, 193 00:10:56,990 --> 00:11:01,943 and you see it is a lot of them, okay? 194 00:11:03,190 --> 00:11:06,700 And the one that I want to include now is the one 195 00:11:06,700 --> 00:11:08,960 for cloning objects. 196 00:11:08,960 --> 00:11:12,503 So, that's called cloneDeep.js. 197 00:11:13,670 --> 00:11:17,910 And so, let's simply import it exactly like we used to do it 198 00:11:19,060 --> 00:11:22,723 so import and well, let's check it out again, 199 00:11:24,270 --> 00:11:27,920 just to show you what the file looks like 200 00:11:27,920 --> 00:11:30,070 and how we can import it. 201 00:11:30,070 --> 00:11:31,303 So, cloneDeep. 202 00:11:33,930 --> 00:11:35,440 So, what matters here is 203 00:11:35,440 --> 00:11:40,170 that it uses export default cloneDeep, okay? 204 00:11:40,170 --> 00:11:43,800 So, it's a default export and so we could give it any name 205 00:11:43,800 --> 00:11:48,193 that we want, but I will still just call it cloneDeep. 206 00:11:49,648 --> 00:11:53,640 And then of course, from and then the path. 207 00:11:55,220 --> 00:12:00,220 So, node modules, Lodash ES and thankfully 208 00:12:01,840 --> 00:12:06,840 a vs code is very helpful by showing us the path. 209 00:12:08,520 --> 00:12:10,690 Okay, let's see. 210 00:12:10,690 --> 00:12:15,690 And we get no errors here, which is already a good sign. 211 00:12:16,300 --> 00:12:19,460 Now, why did I actually include cloneDeep 212 00:12:19,460 --> 00:12:20,933 and not something else? 213 00:12:21,840 --> 00:12:25,180 Well, it's because I actually already mentioned Lodash 214 00:12:25,180 --> 00:12:29,090 before when we talked about copying objects. 215 00:12:29,090 --> 00:12:32,803 So, remember that it's very hard to copy a nested object. 216 00:12:34,129 --> 00:12:38,240 So, let's quickly create one here because I think 217 00:12:38,240 --> 00:12:39,840 that this is pretty interesting. 218 00:12:40,820 --> 00:12:45,390 So, let's say we have some cards in here and this itself is 219 00:12:45,390 --> 00:12:49,600 an array, which itself contains some objects. 220 00:12:49,600 --> 00:12:54,600 So, product bread, and then quantity, let's say five. 221 00:12:58,690 --> 00:13:02,423 And then pizza, let's say five again. 222 00:13:03,628 --> 00:13:08,110 And then we have a user which also has some object, 223 00:13:08,110 --> 00:13:11,083 let's say logged in true. 224 00:13:12,270 --> 00:13:16,650 So, this is a deeply nested object, right? 225 00:13:16,650 --> 00:13:18,010 And so, let's see what happens 226 00:13:18,010 --> 00:13:21,240 when we copy it using JavaScript. 227 00:13:21,240 --> 00:13:26,240 So, state clone, and remember we use object.assign to create 228 00:13:28,080 --> 00:13:30,230 a copy of an object. 229 00:13:30,230 --> 00:13:34,160 And so we create an empty object and then we basically merge 230 00:13:34,160 --> 00:13:36,073 that with the state. 231 00:13:38,110 --> 00:13:40,440 So, let's take a look at the stateClone. 232 00:13:41,880 --> 00:13:46,880 And so indeed it looks exactly the same as the state, right? 233 00:13:48,070 --> 00:13:51,030 However, what happens when we change one of 234 00:13:51,030 --> 00:13:53,490 the nested objects in there? 235 00:13:53,490 --> 00:13:58,490 So, when we now say state dot user dot logged in 236 00:14:01,070 --> 00:14:06,070 and set it to false, then see what happens to the logged in, 237 00:14:06,290 --> 00:14:11,290 in the copy, so you see that it is also false. 238 00:14:11,880 --> 00:14:13,600 And so, that's for all the reasons 239 00:14:13,600 --> 00:14:16,110 that we already learned before. 240 00:14:16,110 --> 00:14:18,610 And so remember that back then I said 241 00:14:18,610 --> 00:14:22,010 that using Lodash would probably be a good idea, 242 00:14:22,010 --> 00:14:24,930 instead of using object dot assign, 243 00:14:24,930 --> 00:14:28,660 because if we wanted to manually create a deep copy 244 00:14:28,660 --> 00:14:32,800 or a deep clone, well, that would be a lot of work. 245 00:14:32,800 --> 00:14:35,520 And so instead we, can simply use this function 246 00:14:35,520 --> 00:14:38,150 that Lodash gives us so that 247 00:14:38,150 --> 00:14:40,280 some people already implement it for us 248 00:14:43,090 --> 00:14:45,973 and which is also battle tested already. 249 00:14:48,600 --> 00:14:51,163 So, cloneDeep state. 250 00:14:53,690 --> 00:14:57,373 And so watch what happens with this one. 251 00:14:58,900 --> 00:15:02,330 So again, this one here is the stateClone, 252 00:15:02,330 --> 00:15:05,223 which of course now changed the logged in to false, 253 00:15:06,710 --> 00:15:09,900 but this one it's also false. 254 00:15:09,900 --> 00:15:12,910 But the reason for that is that we copied the object 255 00:15:12,910 --> 00:15:14,463 after we changed it. 256 00:15:15,610 --> 00:15:20,563 So, that's just wrong, but now it should work. 257 00:15:21,590 --> 00:15:23,880 So again, this one changed to false, 258 00:15:23,880 --> 00:15:27,310 but this one now is still true, even though we changed it 259 00:15:27,310 --> 00:15:30,470 in the original object, okay? 260 00:15:30,470 --> 00:15:34,480 And so this is a good solution for a deep clone 261 00:15:34,480 --> 00:15:37,010 that we just got from NPM. 262 00:15:37,010 --> 00:15:39,580 And that's great, right? 263 00:15:39,580 --> 00:15:43,570 So, we just used a piece of open source software to solve 264 00:15:43,570 --> 00:15:46,283 a problem that we have sometimes in JavaScript. 265 00:15:47,400 --> 00:15:50,550 Great, that's just awesome. 266 00:15:50,550 --> 00:15:54,630 So again, you're now one step closer to working like 267 00:15:54,630 --> 00:15:56,283 a real JavaScript developer, 268 00:15:57,140 --> 00:16:00,393 because this is just what everyone does all the time. 269 00:16:01,490 --> 00:16:03,910 So, this is the function that does the work, 270 00:16:03,910 --> 00:16:06,640 but actually it is this one here, 271 00:16:06,640 --> 00:16:10,030 but well, that's not inspected, 272 00:16:10,030 --> 00:16:12,900 but of course you can have some fun and take a look at 273 00:16:12,900 --> 00:16:15,960 how they implemented this, okay? 274 00:16:15,960 --> 00:16:20,450 But I actually want to go back to this package.json file 275 00:16:20,450 --> 00:16:22,950 because it is actually very important. 276 00:16:22,950 --> 00:16:25,920 So, let's say that you want to move your project 277 00:16:25,920 --> 00:16:30,430 to another computer, or also share it with another developer 278 00:16:30,430 --> 00:16:34,600 or even check it into version control like Git. 279 00:16:34,600 --> 00:16:38,780 Now in all of these scenarios, you should never ever include 280 00:16:38,780 --> 00:16:40,940 the node modules folder. 281 00:16:40,940 --> 00:16:44,930 So again, when you copy your project to somewhere else, 282 00:16:44,930 --> 00:16:49,678 there is no reason to include this huge node modules folder, 283 00:16:49,678 --> 00:16:51,680 because in a real project, 284 00:16:51,680 --> 00:16:55,050 it will actually be really, really huge. 285 00:16:55,050 --> 00:16:58,530 So, I have had a folders here with tens of thousands 286 00:16:58,530 --> 00:17:02,020 of files, and so that will just slow you down. 287 00:17:02,020 --> 00:17:04,160 And it doesn't make much sense either 288 00:17:04,160 --> 00:17:08,070 because all of these files, they are already at NPM. 289 00:17:08,070 --> 00:17:11,210 And so, you can always get them back from there. 290 00:17:11,210 --> 00:17:15,078 But now you might ask, well, if I copy my project without 291 00:17:15,078 --> 00:17:18,890 the node modules folder, so without the dependencies, 292 00:17:18,890 --> 00:17:22,160 will I have to install all of them, one by one? 293 00:17:22,160 --> 00:17:26,000 What if I have 20 or 200 dependencies? 294 00:17:26,000 --> 00:17:27,460 Well, that's again 295 00:17:27,460 --> 00:17:31,393 where this important package.json file comes into play. 296 00:17:32,370 --> 00:17:35,633 So, let's actually simulate that by deleting this folder. 297 00:17:37,100 --> 00:17:38,900 So, move to trash. 298 00:17:38,900 --> 00:17:41,823 And so now of course this does not work anymore, 299 00:17:43,020 --> 00:17:47,190 but there is fortunately a very easy way to get it back. 300 00:17:47,190 --> 00:17:51,625 All we have to do is NPM and then install or I, 301 00:17:51,625 --> 00:17:54,720 but just without any package name. 302 00:17:54,720 --> 00:17:59,110 And so then, NPM will reach into your package.json file, 303 00:17:59,110 --> 00:18:02,583 look at all the dependencies and install them back. 304 00:18:03,450 --> 00:18:07,710 And so, you see that or folder, well, it should be back. 305 00:18:07,710 --> 00:18:10,703 And yeah, so here it is just like before. 306 00:18:11,640 --> 00:18:12,580 Okay. 307 00:18:12,580 --> 00:18:15,300 And so with this, you now have a basic, 308 00:18:15,300 --> 00:18:18,370 but I think good understanding of how to work 309 00:18:18,370 --> 00:18:22,130 with NPM downloading packages and also include them 310 00:18:22,130 --> 00:18:23,620 in your code. 311 00:18:23,620 --> 00:18:28,280 However, importing packages like we did here, for example, 312 00:18:28,280 --> 00:18:33,120 by specifying this entire path is not practical at all. 313 00:18:33,120 --> 00:18:34,830 And so in the next video, 314 00:18:34,830 --> 00:18:37,833 it's time to finally use Parcel to fix this.