• Understand how to use npm to add functionality to JavaScript projects
• Use npm's online platform
• Configure your environment to use npm

When using React in our projects, we need to download the actual React code for our projects so that we can use it alongside our own JavaScript code. React itself is written in JavaScript, and it's an open source library. React itself also depends on some other open source JavaScript libraries. So how can we use all this excellent code ourselves?

JavaScript has been around for many years now, and continues to serve as a critical part of the modern, interactive web. There are web developers all over the world writing JavaScript code, each contributing their own bits of work. That's a lot of code! In fact, there is a lot of duplicate code. Multiple web developers, over the years, have solved the same problems over and over.

For these situations, we have JavaScript packages. A package is a file or set of files full of existing, reusable code. They are designed to be shared, allowing many web developers to use the same code in their own projects.

To help organize these packages in relation to our own work, we use npm, which is a package manager for Node. In this lesson, we will be discussing how npm works and why it is useful.

While it is important to learn the critical skills to solve problems with code, it is equally important that we learn how to identify existing code that suits our needs and incorporate it into our projects. We don't need to always be reinventing the wheel and writing code that may already exist.

In fact, with the amount of developers out in the world, it is likely someone else has not only already invented the same wheel, but tested, upgraded and innovated on it so that it is way better than anything we could write ourselves in a short period of time.

Remember, programming is all about providing a solution to a problem. When 'on the job', so to speak, no one gets bonus points for concocting a novel/clever solution to a problem for which good open source code already exists.

Before we continue, let's make sure your environment is all set to work with npm.

npm is automatically installed along with Node.js, which should already be installed on your system if you've worked through the JavaScript coursework. To confirm you have node installed, enter the following into your command line:

$ node -v

If a version appears, you have Node.js. If, by chance, you do not have Node.js installed, you can use the Node Version Manager to install Node.js and keep it up to date.

You can also double check npm by running the following:

$ npm -v

A version number should appear in your terminal. If you'd like, you can update npm by entering the following:

$ npm install --global npm

Or, for short: npm install -g npm

Okay, we've got it installed. But what is npm exactly?

As mentioned, npm is a package manager for JavaScript. This means that npm works with your JavaScript projects via the command line, allowing you to install packages of preexisting code.

What sort of code? All kinds! Some packages are quite small, like is-number, a package that has one function: to check if a value is a number. Some packages are much more complicated. Huge libraries and frameworks, including React and Express, are available as npm packages. These larger packages are often themselves built using a combination of other packages.

This modular design — the ability to build a package using other packages — allows for developers to continuously expand the JavaScript universe, creating new, more powerful tools and applications on top of existing, tried and tested code.

All JavaScript labs in this course rely on npm packages for their tests. Many use the Mocha or Jest npm packages, which are popular JavaScript testing frameworks.

The lessons themselves don't actually include all the code from these different packages directly in the source code. Instead, they contain a list of dependencies in a file called package.json.

The package.json file tells you (and npm) what packages are required for a specific JavaScript application, listing out each package name and version number.

When we run the command npm install in a directory where a package.json file is present, npm reads the names of each dependency from the package.json file and downloads the packages from npmjs.com, where they are hosted. It then begins installing those packages — BUT! those packages also have their own package.json with their own dependencies! npm must also get those packages, and if those packages have any dependencies, get them as well. And so on. This is what we refer to as a dependency tree.

If you are working in a local environment, running npm install creates a folder called node_modules, which contains all the downloaded packages.

Note: the learn gem may automatically run npm install when you first run learn test.

When building a project, you may realize you need to add some specific package. We can install packages by running npm install <package_name> while inside a project directory. Running this command will add the package as a dependency in the package.json file. This means that if you do not have a correctly structured package.json file, the install will not work! (Fortunately, npm has a built-in command, npm init, that we can use to create the package.json file. We'll learn more about it a bit later in this lesson.)

The package.json file is a key part of sharing JS code repositories on sites like GitHub. Instead of having to include all the dependencies' code with every project, we just include a small file, listing out what npm needs to get for the project.

The file also typically includes information about the project, such as the name, version, author and license.

The package.json file is written in JSON, so like an object in JavaScript, it is always wrapped in curly braces, and includes keys and values. A basic example:

{
  "name": "react-hooks-intro-to-npm-readme",
  "version": "1.0.0",
  "description": "An introduction to npm and package.json",
  "main": "index.js",
  "scripts": {
    "test": "echo 'hot dog'"
  },
  "dependencies": {
    "is-number": "^7.0.0"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/learn-co-curriculum/react-hooks-intro-to-npm-readme.git"
  },
  "author": "flatironschool",
  "license": "SEE LICENSE IN LICENSE.md",
  "bugs": {
    "url": "https://github.com/learn-co-curriculum/react-hooks-intro-to-npm-readme/issues"
  },
  "homepage": "https://github.com/learn-co-curriculum/react-hooks-intro-to-npm-readme#readme"
}

In your terminal, if you are in a directory with the above package.json file present, running npm test will return "hot dog."

This lesson actually does include this package.json file, so try it for yourself! You can access the code for this lesson by clicking the GitHub link at the top, or use this link.

This works because the command npm test is saying: "Hey npm, look in package.json and find the script with the name of 'test', then execute it in the terminal."

Having this file present also means it is possible to install additional packages. There is one dependency already included:

"dependencies": {
  "is-number": "^7.0.0"
}

Running npm install react will add a second dependency:

"dependencies": {
  "is-number": "^7.0.0",
  "react": "^17.0.2"
}

Try it now! Then take a look to see just how many dependencies (which React relies on) have been added to your node_modules directory.

Since npm relies on a package.json file, it has a built in command to build package.json files. When you're creating a new project from scratch, running npm init on the command line will begin a series of prompts, asking about specific content to include in the file. At the end, it will create a file or edit an existing package.json file.

For all React lessons, we rely on npm to set up a lot of things 'under the hood'. The applications we build are made possible by the contributions of thousands of other coders before us!

Remember! While endlessly fun, programming is a means to an end: we (or our employer) has a problem, and we give the computer instructions to crush the problem. If available, open, and secure code already exists do not hesitate to use it! Compared to physical goods, code snippets have less value attributed to novelty. (There is a reason you won't see "artisanal code" being sold on Etsy.)

• npm
• About npm