Installing Node.js and npm
In this page:
Why React Needs Node.js
React itself is just a JavaScript library, but building a real React project needs tools (bundlers, compilers) that run on your computer before the app ever reaches a browser. Node.js is the JavaScript runtime that runs those build tools outside the browser.
Note: Download the LTS (Long-Term Support) version of Node.js from nodejs.org for the most stable experience.
Warning: An old Node.js version can fail to run modern build tools -- check your version with node -v before starting a new project.
Example: Why React Needs Node.js
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function BuildStepDemo() {
const jsxSource = 'function Hi() { return <p>Hi</p>; }';
const compiled = Babel.transform(jsxSource, { presets: ['react'] }).code;
return (
<div>
<p>Your source: <code>{jsxSource}</code></p>
<p>What a build tool (via Node.js) turns it into:</p>
<pre>{compiled}</pre>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<BuildStepDemo />);
</script>
</body>
</html>Example: Installing Node.js
# Windows (winget)
winget install OpenJS.NodeJS.LTS
# Mac (Homebrew)
brew install node
# Linux (Debian/Ubuntu, apt)
sudo apt update
sudo apt install nodejs npm
# verify the install
node -v
npm -v⚠️ Run this command in your terminal.
What npm Installs
npm (Node Package Manager) ships with Node.js and downloads the packages your project depends on, like react and react-dom, into a local node_modules folder based on your package.json file.
Note: Run npm install once after cloning any existing project to download everything it depends on.
Warning: Committing the node_modules folder to git bloats the repository -- it should always be in .gitignore and regenerated with npm install.
Example: Running npm install
$ npm install
npm WARN deprecated ...
added 1420 packages in 12s
# reads package.json and downloads everything it depends on into node_modules/⚠️ Run this command in your terminal.
The package.json File
package.json lists your project's name, its dependencies (like react), and the scripts you can run (like npm start). It's the file npm reads to know what to install.
Note: Open package.json in any React project to see exactly which library versions it depends on.
Warning: Manually editing version numbers in package.json without reinstalling can leave node_modules out of sync with what's listed.
Example: The package.json File
$ cat package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"scripts": {
"start": "vite",
"build": "vite build",
"test": "vitest"
}
}⚠️ Run this command in your terminal.
- Installing a very old Node.js version that's incompatible with modern React tooling.
- Not verifying the installation with node -v and npm -v before starting a project.
- Confusing global npm installs with project-local dependencies.
- Node.js is the JavaScript runtime that powers React's build tools.
- npm (Node Package Manager) installs and manages project dependencies.
- Both are installed together from nodejs.org.
- Verify installation with
node -vandnpm -vin a terminal.
Not applicable -- Node.js and npm are development-time tools, not something that runs in a browser.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: