React Installation Guide — Node.js, npm, Vite & CRA

1. Introduction: What You Need Before React

Before you can install or use React, you need two things on your computer:

Requirement	Why?
Node.js	Provides the JavaScript runtime to run React build tools outside the browser.
npm (or yarn/pnpm)	Package manager to download React and thousands of other JavaScript libraries.
A Code Editor	VS Code (recommended), Sublime Text, or WebStorm.

No Node.js? You cannot run React. React code needs to be compiled/transformed before it runs in a browser.

2. What is Node.js and Why Do You Need It?

Node.js is a JavaScript runtime built on Chrome's V8 engine that allows you to run JavaScript on your server/computer (outside a web browser).

Why does React need Node.js?

Use Case	Explanation
Running build tools	React uses tools like Webpack (via CRA) or Vite to bundle, transpile (JSX → JS), and optimize code. These tools run on Node.js.
Managing dependencies	npm (which comes with Node) downloads and installs React and other libraries.
Running development server	When you run `npm start` or `npm run dev`, a Node.js server powers your localhost.

Check if Node.js is already installed

Open your terminal (Command Prompt, PowerShell, or Terminal) and type:

Bashnode -v

If you see a version number like v20.10.0 → Node is installed.
If you see 'node' is not recognized → You need to install it.

3. How to Install Node.js on Windows, Mac, and Linux

For Windows & Mac (Easiest Method)

Go to the official Node.js website: https://nodejs.org
You'll see two versions:
- LTS (Long Term Support) – Recommended for most users. Stable and reliable.
- Current – Latest features, but may have bugs.
Click the LTS button to download the installer (.msi for Windows, .pkg for Mac).
Run the downloaded file and follow the installation wizard.
- Accept the license agreement.
- Keep the default installation path.
- Important: Make sure the option to install npm is checked (it is by default).
After installation, restart your terminal.

Verify installation:

Bashnode -v    # Shows Node version
npm -v     # Shows npm version

For Linux (Ubuntu/Debian)

Bash# Update package list
sudo apt update

# Install Node.js and npm from default repository
sudo apt install nodejs npm

# Verify installation
node -v
npm -v

Alternative: Using Node Version Manager (nvm) – Advanced

nvm lets you install and switch between multiple Node versions easily.

Bash# Install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# Install latest LTS version
nvm install --lts

# Use it
nvm use --lts

4. What is npm? Understanding the Node Package Manager

npm (Node Package Manager) comes automatically with Node.js. It is:

The world's largest software registry (over 2 million packages).
A command-line tool to install, update, and manage JavaScript libraries.

Key Concepts

Term	Meaning
Package	A reusable piece of code (library) like React, Express, or Lodash.
Dependency	A package your project needs to work.
package.json	A manifest file that lists all your project's dependencies and scripts.
node_modules	A folder where npm downloads all the packages. (Never share this folder; it's huge.)
package-lock.json	Locks exact versions of every dependency for consistent installs.

5. Essential npm Commands Every React Developer Must Know

Command	What it does
`npm init`	Creates a new package.json file (interactive).
`npm init -y`	Creates package.json with default values (faster).
`npm install <package-name>`	Installs a package and adds it to dependencies.
`npm install <package-name> --save-dev`	Installs as a dev dependency (needed only during development).
`npm install`	Installs ALL dependencies listed in package.json.
`npm uninstall <package-name>`	Removes a package.
`npm update`	Updates all packages to latest versions within version rules.
`npm run <script-name>`	Runs a custom script defined in package.json.
`npm list`	Shows all installed packages.
`npm outdated`	Shows packages that have newer versions available.

Global vs Local Installation

Local (default): Installs inside your project's node_modules. Use for React.
Global (use -g flag): Installs system-wide. Example: npm install -g vite

6. What is Create React App (CRA)?

Create React App (CRA) is an officially supported toolchain from Meta (Facebook) to set up a React project with zero configuration.

Released: 2016
Status: Deprecated as of 2023 (no longer recommended for new projects)
Why it existed: Made React accessible to beginners by hiding complex Webpack/Babel configs.

6.1 How to Create a React App with CRA

Prerequisite: Node.js version 14 or higher.

Bash# Method 1: Using npx (recommended)
npx create-react-app my-first-app

# Method 2: Using npm
npm init react-app my-first-app

# Method 3: Using yarn
yarn create react-app my-first-app

Replace my-first-app with your project name (lowercase, no spaces, use hyphens).

What happens?

A new folder my-first-app is created.
package.json is generated with React as a dependency.
All necessary files (Webpack, Babel, ESLint) are configured automatically.
~250MB of node_modules are downloaded.

6.2 Folder Structure of CRA

Folder Structuremy-first-app/
├── node_modules/          # All dependencies (do not touch)
├── public/                # Static files (index.html, favicon, manifest)
│   ├── index.html         # The single HTML file (SPA root)
│   └── favicon.ico
├── src/                   # Your React code goes here
│   ├── index.js           # Entry point - renders App to DOM
│   ├── App.js             # Main App component
│   ├── App.css            # Styling for App component
│   └── index.css          # Global styles
├── .gitignore             # Files to exclude from Git
├── package.json           # Dependencies and scripts
├── package-lock.json      # Exact version lock
└── README.md              # Project documentation

6.3 Running Your First React App

Bashcd my-first-app
npm start

Your app opens at http://localhost:3000
The page auto-reloads when you save changes (Hot Reload).

To build for production:

Bashnpm run build

Creates an optimized build/ folder ready to deploy.

6.4 Disadvantages of CRA (Why It's Being Deprecated)

Problem	Explanation
Very slow	Development server takes 10–30 seconds to start for medium/large apps.
Bloated	Installs 200–300MB of dependencies even for a "Hello World" app.
Outdated dependencies	Uses older Webpack versions; upgrading is painful.
No built-in TypeScript (without extra config)	Requires `--template typescript` flag.
Limited customization	To change Webpack config, you must "eject" (irreversible).
Officially deprecated	Meta no longer recommends CRA. The React docs now suggest frameworks like Next.js or Vite.

Bottom line: If you are starting a new React project today, do not use Create React App. Use Vite instead.

7. What is Vite? The Modern Alternative

Vite (French for "fast") is a next-generation build tool created by Evan You (creator of Vue.js). It is now the recommended way to start a React project by the official React documentation.

Why Vite is better than CRA

Feature	Vite
Speed	Instant server start (less than 1 second).
Hot Module Replacement (HMR)	Blazing fast, preserves state on updates.
Bundle size	Smaller, optimized production builds.
Config	Minimal config, but easily extensible.
TypeScript support	Built-in, zero config.
Modern defaults	Uses native ES modules, supports CSS modules, etc.

7.1 How to Create a React App with Vite

Prerequisite: Node.js version 18 or higher.

Bash# Method 1: Using npm (recommended)
npm create vite@latest my-vite-app -- --template react

# Method 2: Using yarn
yarn create vite my-vite-app --template react

# Method 3: Using pnpm
pnpm create vite my-vite-app --template react

Other templates available: react, react-ts, react-swc

Step-by-step walkthrough:

Bash# Step 1: Create the project
npm create vite@latest my-react-app

# Step 2: Choose framework (use arrow keys) → React

# Step 3: Choose variant → JavaScript or TypeScript

# Step 4: Navigate into project
cd my-react-app

# Step 5: Install dependencies
npm install

# Step 6: Start development server
npm run dev

Your app runs at http://localhost:5173 (Vite uses port 5173 by default).

7.2 Folder Structure of Vite React App

Folder Structuremy-vite-app/
├── node_modules/
├── public/                  # Static assets (served as-is)
│   └── vite.svg
├── src/
│   ├── assets/              # Images, fonts, etc. (processed by Vite)
│   │   └── react.svg
│   ├── App.jsx              # Main App component (JSX extension)
│   ├── App.css
│   ├── main.jsx             # Entry point (mounts React to DOM)
│   └── index.css
├── .gitignore
├── index.html               # Root HTML file (at root level, not inside public!)
├── package.json
├── vite.config.js           # Vite configuration file
└── README.md

Key difference from CRA: index.html is at the root level, not inside public/. This gives you more control.

7.3 Running Your Vite React App

Command	Purpose
`npm run dev`	Starts development server with hot reload
`npm run build`	Creates production build in `dist/` folder
`npm run preview`	Locally preview the production build

Bash# Preview production build locally
npm run build
npm run preview
# Opens at http://localhost:4173

8. CRA vs Vite: A Detailed Comparison Table

Feature	Create React App (CRA)	Vite
Official Status	Deprecated (no longer recommended)	✅ Actively maintained & recommended
Server Start Time	10–30 seconds	< 1 second
HMR Speed	Slow (rebundles on changes)	Instant (native ES modules)
Production Build Time	30–60 seconds	5–10 seconds
Bundle Size	Larger (~150KB gzipped for empty app)	Smaller (~120KB gzipped for empty app)
Configuration	Hidden (eject needed for changes)	Simple vite.config.js
TypeScript Support	Requires --template typescript	Built-in, zero config
CSS Modules	Yes	Yes (better performance)
Environment Variables	REACT_APP_ prefix required	VITE_ prefix required
Default Port	3000	5173
Learning Curve	Low	Low (very similar)
Recommended for New Projects	❌ No	✅ Yes

When would you still use CRA?

Maintaining an existing legacy project that already uses CRA.
A tutorial or course that hasn't updated to Vite yet (but you should adapt it).

9. Common Installation Errors and Fixes

Error Message	Cause	Solution
'node' is not recognized	Node.js not installed or not in PATH	Install Node.js and restart terminal.
npm: command not found	npm not installed (rare if Node is installed)	Reinstall Node.js.
create-react-app is not recognized	Using outdated global install	Use `npx create-react-app` instead of `create-react-app`.
ERESOLVE unable to resolve dependency tree	npm version 7+ stricter dependency resolution	Run `npm install --legacy-peer-deps` or use `--force`
Port 3000 already in use	Another app is using the default port	Kill the process, or use a different port: `PORT=3001 npm start` (Linux/Mac) or `set PORT=3001 && npm start` (Windows)
npm ERR! network	Internet connection or proxy issues	Check internet. If behind proxy: `npm config set proxy http://proxy.company.com:8080`
Error: EPERM: operation not permitted	Permission issues (Windows common)	Run terminal as Administrator, or clear npm cache: `npm cache clean --force`

10. Summary Cheat Sheet

Bash# ============================================
# CHECK INSTALLATION
# ============================================
node -v          # Should show v18+ or v20+
npm -v           # Should show v9+ or v10+

# ============================================
# CREATE A NEW REACT APP (2026 - RECOMMENDED)
# ============================================
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

# Visit http://localhost:5173

# ============================================
# CREATE A NEW REACT APP (OLD - NOT RECOMMENDED)
# ============================================
npx create-react-app my-app
cd my-app
npm start

# Visit http://localhost:3000

# ============================================
# USEFUL COMMANDS (BOTH CRA & VITE)
# ============================================
npm install <package>     # Add a new library
npm uninstall <package>   # Remove a library
npm run build            # Create production build
npm run preview          # Preview production build (Vite only)

# ============================================
# KEY FILES TO KNOW
# ============================================
package.json        # Project dependencies and scripts
vite.config.js      # Vite configuration (if using Vite)
index.html          # Entry HTML file (Vite: at root; CRA: inside public/)
src/main.jsx        # React entry point (Vite) or src/index.js (CRA)
src/App.jsx         # Main component

Quick Decision Guide

Question: You want to start a new React project today?

Your situation	Recommendation
New to React	✅ Use Vite (faster, simpler, modern)
Following an old tutorial	🔄 Adapt the tutorial to Vite (same code, different setup commands)
Working on a team with existing CRA project	❌ Stick with CRA for that project
Building a production app	✅ Use Vite + React
Need server-side rendering (SSR)	➡️ Use Next.js (not covered here)

React Installation MCQ Practice

10 Basic MCQs 10 Advanced MCQs

10 Basic React Installation MCQs

1

Why is Node.js required before installing React?

AIt compiles JSX in the browser only

BIt runs build tools and npm outside the browser

CIt replaces React DOM

DIt is only for backend APIs

Explanation: React projects use Node.js to run bundlers like Vite and the npm package manager.

2

Which command prints your installed Node.js version?

Anode --version

Bnpm --version

Creact --version

Dvite --version

Explanation: Run node --version (or node -v) to verify Node.js.

3

What does npm stand for?

ANode Package Manager

BNew Project Module

CNative Program Manager

DNetwork Proxy Module

Explanation: npm is the default package manager bundled with Node.js.

4

Which command installs project dependencies from package.json?

Anpm install

Bnpm create

Cnpm build

Dnpm init only

Explanation: npm install downloads dependencies listed in package.json.

5

To scaffold a new React app with Vite you typically run:

Anpm create vite@latest

Bnpx create-react-app only

Creact new app

Dnode install vite-react

Explanation: npm create vite@latest is the modern recommended scaffold command.

6

Create React App (CRA) is started with:

Anpx create-react-app my-app

Bnpm create vite my-app

Creact init app

Dnode create react

Explanation: CRA uses npx create-react-app, though Vite is now preferred for new projects.

7

In a Vite React project, the browser entry file is usually:

Asrc/main.jsx

Bpublic/index.js only

Cserver.js

Dwebpack.config.js

Explanation: Vite mounts React from src/main.jsx (or .tsx).

8

Which file lists your React project dependencies?

Apackage.json

Bindex.html only

C.env.production only

Dvite.config only

Explanation: package.json declares dependencies like react and react-dom.

9

After cloning a React repo, the first command you usually run is:

Anpm install

Bnpm publish

Cnpm uninstall react

Dnode delete_modules

Explanation: Install dependencies before npm run dev or npm start.

10

Which port does Vite's dev server use by default?

A5173

B3000 always

C8080 only

D443

Explanation: Vite defaults to port 5173; CRA commonly used 3000.

10 Advanced React Installation MCQs

1

Why is CRA often discouraged for new projects in 2024+?

ACRA is faster than Vite

BCRA tooling is heavier and slower than modern alternatives like Vite

CCRA cannot use JSX

DCRA does not support npm

Explanation: Vite offers faster cold starts and HMR compared to webpack-based CRA.

2

What does `npm run dev` do in a Vite React project?

AStarts the development server with hot reload

BDeploys to production CDN

CRuns unit tests only

DDeletes node_modules

Explanation: The dev script launches Vite's development server.

3

npx vs npm install — npx is best for:

ARunning a package binary without global install

BDeleting lock files

CPublishing to npm registry only

DReplacing package.json

Explanation: npx create-react-app runs the tool once without a global install.

4

package-lock.json primarily ensures:

AReproducible dependency versions across machines

BFaster JSX compilation in browser

CAutomatic React upgrades

DCSS minification only

Explanation: Lock files pin exact dependency trees for consistent installs.

5

Setting `"type": "module"` in package.json means:

ANode treats .js files as ES modules by default

BReact cannot use hooks

Cnpm is disabled

DOnly CommonJS is allowed

Explanation: Vite projects commonly use native ES modules.

6

Which environment variable file is loaded by many React tools for local secrets?

A.env.local

Bpackage-lock.json

Cindex.css

DREADME.md

Explanation: .env.local holds local overrides (never commit secrets).

7

If `npm install` fails with EACCES on Linux/Mac, a common fix is:

AFix npm permissions or use a node version manager

BDelete React from package.json

CDisable JSX

DUse Internet Explorer

Explanation: Permission errors are often resolved with nvm or corrected npm prefix.

8

Vite's `import.meta.env.VITE_*` variables are:

AExposed to client code at build time with VITE_ prefix

BServer-only secrets without prefix

CRuntime DOM attributes

DCSS variables only

Explanation: Only variables prefixed with VITE_ are embedded in the client bundle.

9

Compared to CRA, Vite dev server speed comes mainly from:

ANative ES modules and esbuild pre-bundling

BDisabling React entirely

CUsing jQuery

DServing uncompiled JSX directly in production

Explanation: Vite serves source on demand and pre-bundles dependencies with esbuild.

10

To add React to an existing Vite vanilla project you install:

Areact and react-dom

Bcreate-react-app globally only

Cjquery

Dangular

Explanation: Core packages are react and react-dom.

15 React Installation Interview Questions & Answers

Easy Medium Hard

1What do you need installed before starting React development?easy

Answer: Node.js and a package manager (npm, yarn, or pnpm), plus a code editor like VS Code.

2What is the difference between Node.js and React?easy

Answer: Node.js runs JavaScript on your machine for tooling; React is a UI library that runs in the browser (via react-dom).

3What is npm used for in a React project?easy

Answer: npm installs and manages JavaScript packages such as react, react-dom, and build tools.

4How do you create a new React app with Vite?medium

Answer: Run npm create vite@latest, choose React template, then npm install and npm run dev.

5What is Create React App (CRA)?medium

Answer: An official zero-config scaffold that sets up webpack, Babel, and a dev server; largely superseded by Vite for new apps.

6Why is Vite preferred over CRA today?medium

Answer: Faster dev server startup, instant HMR, smaller config surface, and modern ESM-based tooling.

7Explain the role of package.json.medium

Answer: It defines project metadata, scripts (dev/build), and dependency versions for npm to install.

8What is node_modules and should you commit it?easy

Answer: Folder where npm installs packages; do not commit it—use package.json and lock file instead.

9How do you fix 'react-scripts not found' in CRA?medium

Answer: Run npm install in project root; ensure react-scripts is listed in package.json dependencies.

10What does npm run build produce?medium

Answer: An optimized production build (usually in dist/ for Vite or build/ for CRA).

11How do you verify Node and npm versions?easy

Answer: node -v and npm -v in terminal.

12What is the purpose of vite.config.js?hard

Answer: Configures Vite plugins, aliases, dev server port, and build options.

13Can you use React without any build tool?hard

Answer: Technically with CDN + Babel standalone for learning, but real projects use Vite or similar bundlers.

14What is npx?medium

Answer: Executes npm package binaries without installing them globally—useful for one-off scaffolds.

15CRA vs Vite folder structure difference?hard

Answer: Vite keeps index.html at project root and uses src/main.jsx; CRA used public/index.html and src/index.js.

React Installation

Table of Contents