Complete Intro to React, v6 npm

[00:00:00]
>> First thing we're gonna talk about is npm. Again, I work at Microsoft, I'm a little biased, I quite like npm. npm does not stand for node package manager despite the fact that it definitely stands for node package manager. I don't know what else it would stand for.

[00:00:15] It is, however, the package manager for Node.js. And by kinda extension, the JavaScript frontend ecosystem as a whole. So, I imagine most of you, this is probably not your first exposure to it. But if it is, what we're gonna do here in a second is via the command line, we're gonna say npm install react.

[00:00:34] Don't do that quite yet, but we're about to do that. And this is going to grab React, instead of loading it off the CDN like we did with the script tag, it's going to download it onto your computer and then we're going to bundle that in with our source code so that the user's is only downloading one file instead of ten files.

[00:00:52]
>> Hey, Brian, is this safe to do, will it mess with my current setup if I'm a React engineer already, should I avoid this step?
>> You're gonna have to do it. So, the question is, if you've already installed React before, or you have a different setup in a different project, am I gonna have to do this again?

[00:01:11] And the answer is yes, you are gonna have to do it because the packages are installed per project.
>> Okay, thank you.
>> Yep. Cool, so let's go ahead and get started with that. So, go to your project here, I'm gonna open my terminal here. I promise this is not a terminal heavy class, but you have to do a little bit of terminal stuff.

[00:01:33] If you follow along with me, you should be okay, even if you're not super familiar with it. There's a great course on Frontend Masters on how to use the command line from a very handsome gentleman that I think wore this exact same t-shirt. It's me, I taught a course on the Linux and the command line.

[00:01:48] So, if that's something that you would like to learn about, please hop into that. All right, so, I'm gonna open the terminal. That's Ctrl tilde, if you wanna know the shortcut. Okay, I am in my desktop adopt-me, okay? So, you wanna be in the root of your project, so not in the source directory, right?

[00:02:10] So, I'm not inside of the source directory. I'm inside of the adopt-me folder, and I'm gonna type npm init. Now, if you do it this way, it'll ask you a bunch of questions. I don't wanna answer any questions, I just want it to work. So, you can put a -y, it says just do whatever, I don't care what you do, just do something, okay?

[00:02:32] And then, now, if I look inside of my project, I have this package.json here. This package.json, again, don't really care about anything that's in it. But it's like a manifest for your project, right? It's basically saying whenever you're installing this project anew, here's everything that you need to bring with it to make this project work, right?

[00:02:54] So, at this moment, you can see it doesn't have any dependencies. It doesn't have any dev dependencies or normal dependencies. That's because we haven't installed any yet. But pretty soon, when we say npm install react, it'll keep track of what version of React we're using. If that's a normal dependency, or a dev dependency, or a test dependency, or a peer dependency, there's a bunch of other stuff like that.

[00:03:15] But it's basically like a manifest for your project. Lots of great Node content on Frontend Masters, as well, they definitely dive more into package.json. But if you're gonna be writing any amount of Frontend or Node code, you need to get comfortable with it, cuz it's gonna be involved in every single project that you do.