npm is the package manager for
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).
There are two common ways to install
node.jsdirectly, which includes
nvm, which helps manage multiple versions of
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
npm binary here. This is the easiest way to get up and running.
Option 2. Installation via
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.
nvm just manages versions, once you install
nvm, you'll still need to install any recent version of
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
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.
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.
We won't actually install any packages yet, but let's look at how to briefly now.
When you type:
npm automatically downloads all dependencies listed in the
package.json into a folder called
node_modules. This folder will live alongside your
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
To add a new dependency
foo-bar to your
npm install --save foo-bar
If you're on npm version 5 or later, you can leave off the
--save. Prior to v5,
--savewas necessary to add the dependency to the
package.json. Otherwise, the package would get installed, but not added as a dependency. In v5,
--saveis the default behavior.
If you're on npm version 5 or later, when you install dependencies, a
package-lock.jsonfile 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.
Now that we have a new project set up and know how to install packages, we can start setting up Webpack and React.