This is going to take a few guides to go through because as you're going to see, there are actually a lot of pieces that make up a React application and we're going to go very slowly through them.

The reason for that is because I feel like a lot of React, especially if you're a new developer, can be very confusing and part of the reason why it can be confusing is because if you don't understand the foundational layers of React, so if you don't understand the file system or what all of these different configuration options are, then the rest of React is also very confusing because you don't understand the bottom layer.

It's kind of like building a house. If you have a weak foundation, the house is not going to be very sturdy. The same thing if you are learning development, if you have a weak foundational knowledge of a concept then anything you learn on top of that is also going to be confusing. So we're going to go slowly through this React project and we're going to see exactly what it entails and how the system works.

So we're gonna start off at the very top so you can see we have our node_modules directory, the goal of this guide is going to be to understand how that works, how to add to it, and how to remove items from it.

So we already walked through and we listed out a few of the libraries. So you should know now that node_modules directory is a list of all the libraries that get brought in to your JavaScript project and if they're here, it means you can access them in the rest of the project and we'll talk more about that later.

But let's first talk about how can we add any new libraries because we're going to have to be doing that throughout this entire course. So let's do that here, let's see how we can add to it. And I'm going to show you two ways of doing it. The first way is going to be manual and the reason why I want to show you the manual one first is so that once you start doing the automated way, you'll understand what's happening underneath the hood.

So let's open up our package.json file and I'll close this out and so you can add a node_module by simply adding to this list in the package.json file, and then from there running NPM install like we've already done.

So let me open up a web browser and I already had it open to this moment js page because this is going to be the library that we're going to install. And if you go to just this npmjs.com, if you want to search for it just type moment into the search bar and it'll come up. And I'll also include a direct link in the show notes for you.

So the way we can install this is you can see that we're at version 2.22.2, we can copy that. Come over here and you want to go into the list of dependencies, so if you come all the way up to the top and scroll down, you can see that we have this dependency list.

Now, do not just go and put this here, so don't say you know moment and put it at the very top. The reason for that is because as your project gets larger, it's going to become incredibly difficult to keep track of all of your dependencies if they're not in alphabetical order. So it is a best practice to find wherever you should place that based on where the first letter falls alphabetically.

So if you scroll down here you can see we have J and then N, and so we should put this moment call, right below the J. And so if I come here, I can type moment and then inside of double quotation marks, give the exact version followed by a comma.

And if I hit save, now this has not added it to our node_modules directory. Remember we have to run the command NPM install. So if you switch to the terminal, you can stop the server by hitting control + C and then if you want to get up to the top, and this is if you're on Mac or Linux, you can type control L and that will take you and it just clears off the output so it's a little bit easier to see. And now you can type, NPM install.

So what NPM is going to do right now is it's going to go back, and it's going to look at the package json File. It's going to compare the list of dependencies with the list in the node_modules directory, and if it finds any that are different, such as what it found with moment, it is going to install that and add it into the system. So right here you can see it says added one package and it found zero vulnerabilities. So that means that that worked.

And so we now have moment directly installed on the system and we have access to work with it. And let's test this out just to make sure that it is working. Oh, and before I leave the terminal, let's start the server up again. So type, npm run start, and we'll let that startup in the background and if you go to the moment documentation you can see a few examples of how it should work.

So let's click on momentjs.com here.

I'll zoom out so it's a little easier to see. And they have all kinds of install instructions and some things like that.

We don't really have to worry about that right now. What I want to do instead is to simply find a few of their examples and then we can call these directly from our application and then we'll be able to actually work with them.

So let's go into Visual Studio Code, go into the file editor, go to the source, components, app.js. And there are two things you need to do anytime you're going to bring in an outside dependency. So in addition to just calling it inside of the code, you also have to import it. So the way that you can import this in React is by saying import moment from moment.

And so what this is, and you can see it's very similar to the syntax on how React gets imported and we'll walk through all of this and what it means because I know right now the template already provided this for us, but we're going to go through and manually create this so that you understand exactly what's going on.

But essentially what you're doing is when you say from there are two options that you can have here. You can either provide a full path, so if you say from and then you provide a path to somewhere else in the application, that's what you do when you want to import, say, another component, or another code file that you personally created in the application.

If you don't provide any path and you just provide the name of a library, then what React is going to do is it's going to assume that this can be found inside of the node_modules directory.

So if you come back and let's take a look at that, let's verify that this is working. Make sure to hit refresh in Visual Studio Code because it does not update the listed node_modules automatically. So if you hit refresh, it should add it in there. Click on node_modules and scroll all the way down. It's sorted alphabetically, so sort until you get to the Ms and then keep coming down, and there you go, you can see we have moment.

So the way the import works in React, looks through the node_modules directory and it looks for a library specifically called moment, and then it allows us to work with the code in there. So with all that being said, let's actually come down into the application and I'm going to copy one of these examples.

So let's just copy this,

moment().format('MMMM Do YYYY, h:mm:ss a')

and we'll get into how to add code directly into React. But for right now, just to know that we want to put this in a Div just so we have some level of separation. And then inside of that Div I want to add curly brackets just like this hit paste.

And so you can see I'm calling moment, which is a function and then I'm saying I want you to format it like this, hit save and now if we open up our application and hit refresh, you can see and it's kind of hard to see because it's in a Div, I'll zoom in, you can see that we have our full date.

So the library is working properly. If you hit refresh, you can see it updates that date. So with just a few lines of code, we're able to take a third-party library, we're able to install it in the system and then we're able to call it from a React file.

So that's pretty cool, the process for doing that is relatively streamlined. That may have seemed like a lot, but don't worry, the more times you do it is going to feel very natural for you. So that is how you can install a node module. Let's see how we can remove one.

So I actually have a few libraries inside of the package json file that we're not going to need for this application, so it is better to not include them. We're not going to use jQuery so you can get rid of that entire line. We're not going to use bootstrap so we can get rid of that entire line.

We're going to be writing in all of our styles from scratch and then we're not going to use popper so we can delete those three lines, hit save. Now if you come back to the terminal, stop the server and then type npm install.

So the command is exactly the same whether you want to remove or if you want to add modules. And what this is going to do is it's once again going to look at the node_modules directory, then it's going to look at our package json file, and it's just going to see if they line up or not.

If they do not line up, it's going to correct it. It's going to either add or remove libraries from that node_modules directory, and as you can see here it says remove three packages.

So those are the three that we just personally removed, and so those are no longer in the node_modules directory. So that's how you can remove them.

Now I want to show you something that's pretty crazy if you've never seen it before. You may think that, oh, this node_modules directory is absolutely critical and how you would not ever want to delete it or anything like that. But actually the node_modules directory should be seen as a temporary resource, so whenever you deploy this up to production, so if you put this on a server or anything like that, node_modules directory is going to be regenerated every time.

So what we can do is you can select this, right-click and hit delete and it's actually to delete all of those files, which you may think is absolutely crazy. I know the very first time I saw the way that this process worked, I thought it was crazy because it seemed like I was deleting all the code that made the application work.

But all you have to do is delete that and then anytime you want just run npm install and then it's going to follow the exact same process. It's going to go to the package json file. It's going to see all the list of dependencies, then it's going to go to the npm library, and then it's gonna go and it's going to install all of those.

So that's a pretty cool process. You do not have to worry about if that gets deleted and in fact, you should feel perfectly fine whenever it does. That also leads to a very important concept to understand.

You should never ever make changes directly to any of the node_modules files. The reason for that is because imagine that you went and you added a new file or you made some kind of change directly in one of those library files.

What would happen is that it may work on your local system, but because the node_modules are treated as a temporary resource, whenever they get pushed up to the server, those changes you made to that set of files will not be sent up to the server and it's not gonna work and it's gonna be really confusing.

So you should be aware of what the node_modules directory does and know how to add and remove items using the package json file but you should never make any changes to it. So it looks like as you can see, everything worked. We got our node_modules back by running npm... and let me actually make it so you can see that a little bit better. npm run start and we should be back to everything working again.

And as you can see, the node_module directory is critical for our system to work, but those files should not be considered something you should change or anything that you can't access. Oh, and it looks like we have a little error, and this is a great one to bring up and this will be the last one, then we'll move on to the next video.

Do you see where it says that we got an error in the source bootstrap.js file? Because we removed bootstrap now it can't access that file, which kind of makes sense. So let's go and let's find exactly where that is listed. So I'm going to go into the SRC directory and let's see if it's in, yes, it is in the bootstrap.js file.

Now, one point to make about this, bootstrap.js does not stand for the bootstrap framework. This is a common name for the file you place at the root of a React application, not to be confused at all with, and let me pull this up, bootstrap framework.

So the bootstrap framework is a framework provided by Twitter and it just gives you the ability to kind of build the layouts and to have some components that have styles right out the box. I don't really use it much anymore just because tools like CSS Grid and FlexBox make it pretty easy to now build out front ends that work and so I don't like to bring in a dependency that I don't have to have.

So the way to fix this is let's go into Visual Studio Code in that source bootstrap file here and the bug is that we now have this import statement where we're importing this bootstrap file. I'm going to remove that and we'll see if there are any other spots that need to be fixed. It says compiled successfully and there we go.

Now it looks a little bit different because we're not using those base bootstrap files anymore, but that's fine. We're going to be adding, we have an entire section dedicated to adding styles, but as you can see we're back up to working. We have moment js working perfectly and I think we're good to go and we're going to move onto the next part of our system.

So we're going to start looking at the key part, which is our source directory.

Resources

• Moment JS
• NPM Moment Directory