NPM

npm is the package manager for node.js, the server-side JavaScript execution environment. Most React apps load the React library and 3rd party libraries/extensions through npm packages.

If you're new to JavaScript development, or if you've been using older libraries (e.g. jQuery, Backbone), you may not have used npm for client-side app development. While npm was originally intended for usage exclusively in node.js server-side code, it's now used for most client-side code too (Webpack makes this possible, but more on that later).

Installation

There are two common ways to install npm:

• Install node.js directly, which includes npm
• Install nvm, which helps manage multiple versions of node and npm

If you're just dabbling in React, it's easiest to install node.js directly from the official website. If you plan on using React for serious/large projects, it's best to use nvm, since at some point you'll want to upgrade versions.

Option 1. Installation from the node.js site

You can install the node.js/npm binary here. This is the easiest way to get up and running.

Option 2. Installation via nvm

You can find the instructions for installing nvm here. It looks a bit intimidating, but it's worth it if you'll be doing a lot of React development. Double check in the instructions that your platform and shell are supported.

Since nvm just manages versions, once you install nvm, you'll still need to install any recent version of node:

nvm install node

And then specify that you want to use that version with

nvm use node

These and many more instructions exist in the docs linked above.

Option 3. Installation via package manager (Homebrew, etc)

You can generally install either node or nvm through your package manager. If you're already using a package manager, you may want to give this a shot first. If all else fails, try the node.js binary from the node.js site - that's the safest approach for a working installation.

Project setup

npm uses a file named package.json to record which packages your app depends on. This package.json file should live in the top level directory of your React project.

Let's set up a new react-app directory with a package.json now. Run:

mkdir react-app
cd react-app
npm init

This will walk you through a command line prompt to add some basic details about your app. The details are optional, so feel free to just hit enter repeatedly until the prompt finishes.

Installing packages

We won't actually install any packages yet, but let's look at how to briefly now.

When you type:

npm install

npm automatically downloads all dependencies listed in the package.json into a folder called node_modules. This folder will live alongside your package.json.

Make sure you commit the package.json to git so that others will use the same packages (and versions) as you when working on the project. It's uncommon to check in node_modules, since these tend to be large and can be downloaded based on the dependencies listed in the package.json.

To add a new dependency foo-bar to your package.json, run:

npm install --save foo-bar

If you're on npm version 5 or later, you can leave off the --save. Prior to v5, --save was necessary to add the dependency to the package.json. Otherwise, the package would get installed, but not added as a dependency. In v5, --save is the default behavior.

If you're on npm version 5 or later, when you install dependencies, a package-lock.json file will be automatically generated. This file helps ensure reproducible builds by locking down the exact version of dependencies. This file should also be committed into git.

Up next

Now that we have a new project set up and know how to install packages, we can start setting up Webpack and React.