This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "npm" Lesson
[00:00:00]
>> Brian Holt: So at this point we're going to talk about some of the tooling around react. [COUGH] Which if you are working in a project, you'll have a back end and a build process authority that's been built for you and you don't have to worry about tooling. You can go ahead and kinda lightly skim over the NPM easily in prettier and parcel parts of this particular course, that's gonna teach you the tools of how to build your own React project.
[00:00:27] Throughout the rest of the day, we'll still be talking about various things that you'll need to add to these configurations, which you might have to do in order to keep up with the course. But these are not necessarily things that you need to know, if you're not building your own new project with your own tools.
[00:00:45] So you can just go ahead and probably skip to the JSX section. I want to take a break from React just for a second to kind of focus on our tools a little bit. Right now, we're building everything and by compiling or kind of ourselves by the browser and bringing all the script tags together and all that kind of stuff.
[00:01:04] And that doesn't really work super well, especially over time, right? If I had to include all of the right components in the right order inside of my index.html, that's gonna get real tedious really fast, right? So what I wanna do is I wanna bring in some tools that are gonna help keep our code quality high, help us be more productive, and let us organize our code a little bit better right?
[00:01:26] Right now, we have two components in one file, let me say, that will almost never happen. Every component should typically have its own file. Even if the file is only five lines long, that's okay, you should probably still do that. You should always do that, I never put two components in one file.
[00:01:49] So let's go and start with that.
>> Brian Holt: The first thing is that we're gonna install or that you've probably hopefully have already installed is something called npm. It comes along with Node, so if you have not installed NodeJS at this point, please go to NodeJS.org and install Node.
[00:02:09] It should work on any platform that you're following along with.
>> Brian Holt: Along when you install Node, you'll also get the latest version on npm. I think, I'm using 10, let me just make sure what version of Node, I'm using nine. I probably should be using ten but in all honesty, we're not gonna be using Node that much.
[00:02:30] That it's gonna matter as long as you're above probably six. If you're above six you should be fine, but I would recommend you be on eight or ten.
>> Brian Holt: Okay, so npm does not stand for node package manager. They won't tell you what it stands for but it's also the node package manager, so I just kinda say it's the node package manager.
[00:02:48] [LAUGH] But, It also includes everything for the frontend, as well. So React, for example, is also an npm. So it's also kind of, the build system and package registry for the frontend, as well. So what we're gonna do is, we're gonna come to our command line again. And we're gonna go to our root directory of wherever your project is.
[00:03:14] Mine's here in fem. So I'm gonna say here npm init, like that. And I don't really wanna ask you a bunch of questions if you Don't say -y, -y means, just say yes to all the questions, I don't care. So now, it generates this package.json. So if you look here, I have a package.json file as well.
[00:03:42] This is kind of the manifest for your project. So inside the manifest here, I can define all my dependencies, I can define tasks that need to happen. It's a really useful thing for having for front end projects, okay.
>> Brian Holt: Some of this is not right, it doesn't have an author.
[00:04:03] It says, if I run npm run test, it's gonna say, hey, you haven't defined what tests are, right. Error, no test specified. But in any case, we'll fix all that kind of as we go along here.
>> Brian Holt: Okay, so now, if we go over here, I'll get rid of that,
[00:04:27]
>> Brian Holt: And now, if we can open our package.json, you can see here there's just not a ton in it.
>> Brian Holt: Okay, and now as we start installing dependencies in our projects. It's gonna start saving these dependencies so that later, if you wanna give this project to your friend, your friend can also bring in this project, install its dependencies and build your project, right?
[00:04:48] So it's making your code more shareable and reproducible which is really important. Any questions about npm? Question that I often get here is, what about Yarn? Which previous versions of this course do use yarn. I'm fine with both of them. Both install things from the npn registry. They're just two different clients for installing the things from the registry and they're both great.
[00:05:13] So whatever one you choose to use is fine with me. I'm gonna be using npn for the rest of this course but you are welcome to use yarn. Just yeah, you gonna have to translate all the things in your head. But they both work great.