Additional Way to Install Dependencies in a React Application
That last video went on a bit long, and so we didn't have time to perform the second way of adding an item to the package json list, adding a dependency.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

So, what I want to do here is to have a much shorter video, where we're gonna walk through the other way that you can add a dependency to your application. Now, I first want to give you an instruction because we walked through how to remove a dependency in the last guide, I want you to remove the "moment" JS, this "moment" library from the application, just the same way we did it, so that you have some practice in that process.

So, I want you to pause the video right now, remove it in the exact same way that we already walked through, the same way we removed Bootstrap, and jQuery and those other dependencies, then when you come back I'll show you how I perform that same task, and then we're going to install moment, using the automated way of doing it.

Welcome back, hopefully you were able to do that, if not, you can follow along right now. The way you can remove a dependency, once again, is to delete the full line from the package json file, switch over to the terminal, run "npm install" and then that is going to remove that one single dependency.

Now, if you need some advice on how to add the dependency back in, then you can actually see that in the npm instruction file, or the documentation file.

large

You can see here where it says it removed that package, so that's good. Now, if you switch back here to the moment website, you have an idea of how to do this, you see where it says, "install npm i moment"?

large

Well, that's actually the command that we can run. So, if you switch back to the terminal and type in "npm i" and then "moment" hit return. What this is going to do is, it is going to go out to that npm registry, and it's going to pull down the moment library, and it's also going to install it directly in the application and add it into our package json file.

So if you come back to Visual Studio Code, you can see it now added moment directly into the package json file. And if you come back to the node modules, make sure you hit refresh, and then look through it. If we come all the way down to the M's, then we should be able to see moment here, and there it is.

large

So everything here is working, and that is the other way. And this is really the preferred way of adding any dependencies to the system, so throughout the rest of this course, and really in your day to day development, this is gonna be the standard way of doing it.

One, is because it'll automatically pull in the latest and most updated version, as you can see it automatically pulled in this 2.22.2 version, and did you notice how it also placed it in the right part of the applications list of dependency. So, notice how it automatically sorted it and placed it alphabetically in order, that is another thing that is quite helpful.

So, that's a second way of installing a dependency in a JavaScript application, and in the next guide, we are going to start moving down the line, and we're gonna look at this src directory.