Node.js and npm for React Projects

Full-project lesson · needs Node.js, npm and real project files, so it does not run in the in-page playground.

React itself runs in the browser, but the tools that create, run and build a React project run on Node.js. This lesson gets Node.js and npm working on your computer.

What Node.js and npm are

Node.js runs JavaScript outside the browser, on your computer. Tools such as Vite, test runners and linters are written in JavaScript and run on Node.
npm (Node Package Manager) comes with Node.js. It downloads packages, which are libraries and tools published by other developers, into your project. React is a package. So is Vite.

Install Node.js

Go to nodejs.org and download the LTS (Long-Term Support) version. LTS releases are the stable ones meant for real projects.
Run the installer and accept the defaults.
Open a new terminal window (an old one will not see the new install) and check:

terminal

BASH

1
2

node --version
npm --version

You should see two version numbers, for example v24.19.0 and 11.17.0. Yours will differ.

Which version do I need?

Node tools list the versions they support. These were the requirements of the tools used in this course when it was written:

Tool	Needs Node.js
Vite 8 (creates and builds the project)	20.19 or newer, or 22.12 or newer
Vitest 5 (tests, used later)	22.12 or newer
React Router 8 (routing, used later)	22.22 or newer

Installing the current LTS release satisfies all of them. If a tool prints an “unsupported engine” or “requires Node” message, update Node.js.

The npm commands you will use

You will type these constantly. Run them inside a project folder.

Command	What it does
`npm install`	Downloads every package listed in `package.json` into a `node_modules` folder
`npm install react-router`	Adds a new package to the project
`npm run dev`	Runs the script named `dev` from `package.json` (the development server)
`npm run build`	Builds the app for production
`npx something`	Runs a package’s command without installing it permanently
`npm create vite@latest`	Runs the latest project creator for Vite

info

Other package managers

pnpm, yarn and bun do the same job and also work with React projects. This course uses npm because it comes with Node.js, so every command is the same for everyone.

A common Windows problem

On Windows PowerShell you may see an error such as “running scripts is disabled on this system” when you run npm. That is a PowerShell security setting. Either use Command Prompt or Git Bash, or allow signed local scripts for your user:

terminal

BASH

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Key points

Node.js runs the tools; npm installs packages.
Install the current LTS release and check it with node --version.
npm install, npm run dev and npm run build are the commands you will use daily.