Complete Intro to React, v5 npm & Generating a package.json File

[00:00:00]
>> Brian Holt: So far we've been talking about JustReact, and you'll never see anyone using JustReact, right? Like we've been doing so far, that's just not a very common pattern for writing React, there's always tools involve, right? And that again, my methodology, and I come from front end infrastructure as well.

[00:00:15] So I'm going to subject to my madness, is that you need to understand your tools in addition to just understanding the framework. So, I'm gonna keep as light as possible, but I'm going to still help you understand some of the better ways to write React in my opinion.

[00:00:33] So, here we're gonna introduce you to like, three or four tools, and then we'll get back to writing React. So the first one I wanna introduce you to, you may already be familiar with is NPM. Which does not stand for node package manager, but sort of stands for node package manager.

[00:00:52]
>> Brian Holt: This is going to allow us to, rather than just loading node off of the CDN, we're gonna actually install it off of the registry and build our project. So that it's actually included with the package, and we don't have to rely on unpackage to be up, right?

[00:01:05] Unpackage is really good for just like testing things out. But do not rely on it for production traffic, cuz then you're at their mercy, okay?
>> Brian Holt: So, what I want you to do, is I want you to open your terminal. This is built-in the VS code, if you are using that.

[00:01:23] You can open up with command, or sorry, control, back tick, slash tilde, the one that's next to the one on your keyboard.
>> Brian Holt: There's plenty of buttons somewhere for as well but that's how I was open itself, okay? And then the first thing, you're gonna have to make sure that you have node installed.

[00:01:41] So I do, I have 10, 15, as long as you're over like, let's say eight, cuz six just got deprecated. Or end of life, rather, is the correct term. So as long as you're above eight, you should be fine. I'm on 10.15, which should be pretty close to the LTS right now.

[00:01:59] Which is the one that you wanna use. You should use the LTS which stands for long-term support, I think. Or I'm making that up and you can believe me. Okay, so with node comes mpm, if you don't have these tools installed right now. Just go to nodejs.org, and you can just install it right after there as well.

[00:02:27]
>> Brian Holt: So notice that I'm in Desktop/adopt-me, so I'm inside of my project directory. And the first thing that I wanna do is I'm gonna say npm init, which is going to create a new project for me. Now, I'm super lazy and I don't wanna answer any of the questions.

[00:02:43] So pro tip, if you put -y, it won't ask you any questions and it just generates a file for you. Otherwise you get this interactive prompt. Like what's the name of your project? Who are you, blah blah blah, and I just can't be bothered. So, now if you look at my project, you can see here that I have a package.json.

[00:03:04] Now, this is common with JavaScript projects. Again, this may not be the first time you've been exposed to this. Inside of here, close this. It's just a JSON file full of what the license is, what the name of the project is, what version it is, so on and so forth.

[00:03:21] We don't actually really care what's going on here. You can mess with it if you want to. I'm not going to. But there's a couple of things that we're gonna be concerned with here. First one, we're gonna have dependencies and those dependencies are gonna be track in here, right?

[00:03:33] So then, whenever I say npm install, it's going to grab the same dependencies, right? So if me and Start working on a project together, I can show this with her. And we could work together on that project, right? Something like that.