How to Install React.js on Your Machine

React powers some of the biggest web applications on the planet. Netflix, Instagram, Airbnb. All built with this JavaScript library.

Learning how to install React.js is the first step toward building fast, component-based user interfaces.

The setup process involves Node.js, npm, and a few terminal commands. Not complicated, but easy to get wrong if you skip steps.

This guide walks through every installation method: Create React App, Vite, and manual configuration.

You will learn how to set up your development environment on Windows, macOS, and Linux. Plus how to fix the most common errors that trip up beginners.

By the end, you will have a working React project ready for building single-page applications.

How to Install React.js: Quick Workflow

React installation isn’t complicated. Three main approaches exist, each suits different needs.

Using Create React App

This method handles all configuration automatically. Dead simple for beginners.

What you need:

• Node.js (version 14 or higher)
• npm or yarn package manager
• A code editor

Open your terminal and run:

npx create-react-app my-app
cd my-app
npm start

Your browser opens to localhost:3000 automatically. Takes about 2-3 minutes depending on your connection.

Downsides? Creates a heavy project structure. You get tons of files you might not need.

Using Vite (Faster Alternative)

Vite starts up way quicker than Create React App. I’ve noticed the difference is huge on older machines.

npm create vite@latest my-react-app
cd my-react-app
npm install
npm run dev

Pick React when prompted, then choose JavaScript or TypeScript.

Server starts almost instantly. Hot module replacement feels snappier too.

Adding React to Existing Project

Sometimes you just need React in one part of your site. Makes sense for gradual migrations.

Install the packages:

npm install react react-dom

Create a simple component file:

import React from 'react';
import ReactDOM from 'react-dom/client';

function App() {
  return <h1>Hello React</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Link it in your HTML. Done.

Verify Installation

Check your React version:

npm list react

Or look inside package.json. Should show something like "react": "^18.2.0".

If you see errors about missing dependencies, delete node_modules and package-lock.json, then run npm install again. Works 90% of the time.

What Comes Next

Your dev server runs locally. Changes appear instantly (well, almost).

The src folder holds your components. public folder contains static files.

Start editing App.js and watch the magic happen. That’s really all there is to it.

How to Install Node.js

Node.js is the JavaScript runtime that executes your code outside the browser. React’s build tools and development server depend on it.

Stack Overflow’s 2024 Developer Survey shows that 40.8% of developers use Node.js, making it the most commonly used web framework worldwide. Over 30 million websites currently run on Node.js according to Node.js.Org data.

What is Node.js

Node.js runs JavaScript on your computer, not just in browsers.

It includes npm, the package manager that downloads React and its dependencies. The npm registry contains over 2 million packages and serves 17 million developers worldwide, according to npm.

What Version of Node.js is Required for React.js

React requires Node.js version 14.0.0 or higher.

The LTS (Long Term Support) version is recommended for stability, following semantic versioning practices. Syncfusion documentation confirms this minimum version requirement ensures compatibility with React’s build tools and dependencies.

Action step: Before installing, decide between the Current version (latest features) or LTS version (stability). For production projects, choose LTS.

How to Check if Node.js is Installed

Open your terminal and run:

node --version

If installed, you see a version number like v18.17.0.

If you get an error or no response, Node.js isn’t installed on your system.

How to Download Node.js

Visit nodejs.org and download the LTS version for your operating system.

Download breakdown by platform (2025 data):

• Linux: 78%
• Windows: 17%
• macOS: 5%

Windows and macOS users get an installer. Linux users can use their package manager or nvm (Node Version Manager).

For Windows users:

1. Download the .msi installer
2. Run the installer
3. Follow prompts (accept defaults)
4. Restart terminal after installation

For macOS users:

1. Download the .pkg installer
2. Run the installer
3. Follow prompts
4. Restart terminal

For Linux users (Ubuntu/Debian):

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

How to Verify Node.js Installation

After installation, run these commands:

node --version
npm --version

Both should return version numbers without errors.

Expected output example:

v20.11.0
10.2.4

If you see version numbers, you’re ready to start building React applications. Companies using Node.js report development cost reductions up to 58% and loading time improvements of 50-60%, according to W3Techs research.

Next steps:

• Create your first React app with npx create-react-app my-app
• Verify npm works by running npm -v
• Check available Node.js commands with node --help

How to Install npm

npm comes bundled with Node.js, so you get it automatically. It manages all your project dependencies and development dependencies.

The npm registry now contains over 2 million packages and serves 17 million developers worldwide according to npm’s official data.

What is npm

npm (Node Package Manager) is a package manager that downloads, installs, and manages JavaScript libraries.

The npm registry hosts over 2 million packages including React and react-dom. Wikipedia reports that npm handles billions of downloads weekly, making it the largest software registry in the world.

Security context: Research from CyberDesserts shows that 40,009 vulnerabilities were disclosed in npm packages during 2024, a 38% increase over 2023. Regular updates and security audits are critical.

How Does npm Work with React.js

npm reads your package.json file to know which packages your project needs.

It downloads everything into a node_modules folder and tracks versions for consistent builds. Data from DEV Community indicates the average npm project pulls in 79 transitive dependencies.

Why this matters: A single React Native project can add close to 1,500 dependencies to package.json according to RedMonk research. This makes proper version management critical.

How to Check npm Version

Run this in your terminal:

npm --version

You should see something like 9.6.7 or higher.

Minimum requirement: React projects need npm that comes with Node.js 14.0.0 or higher.

How to Update npm to the Latest Version

Update npm globally with:

npm install -g npm@latest

On macOS or Linux, you may need sudo before the command.

Best practices according to BrowserStack:

• Check for outdated packages regularly using npm outdated
• Use semantic versioning (^1.2.3, ~1.2.3) to prevent breaking changes
• Always test updates before deploying to production
• Back up package-lock.json before major updates

Security step: After updating, run npm audit fix to address security vulnerabilities automatically. CoreUI documentation recommends running this command regularly to maintain secure dependencies.

Alternative update methods:

For macOS users:

brew upgrade node

For Windows users:

npm install -g npm-windows-upgrade
npm-windows-upgrade

Version verification after update:

npm -v
node -v

Both commands should return current version numbers.

Common update scenarios:

Update to specific version:

npm install -g npm@10.2.4

Check what needs updating:

npm outdated

Update all packages in current project:

npm update

Security monitoring: Xygeni data shows that from January to July 2025, Early Malware Detection systems blocked 1,945 malicious packages from npm. Always verify package sources before installing.

How to Create a React.js Application

The fastest way to start is using Create React App or Vite. Both generate a complete project structure with build tools preconfigured.

React powers over 11 million websites worldwide according to CitrusBug statistics, with 39.5% of developers using it according to Stack Overflow’s 2024 survey.

What is Create React App

Create React App is an official React starter template maintained by Meta. It handles Webpack, Babel, and other configuration so you can focus on writing React components.

Over 2 million projects have been created using Create React App according to market data from P2P Clouds.

Important update: React’s official documentation announced in February 2025 that Create React App is being sunset. The React team now recommends frameworks like Vite or Next.js for new projects.

How to Use npx to Create a React Application

npx runs packages without installing them globally. It downloads the latest Create React App version, runs it once, then cleans up.

Why npx matters: Using npx ensures you always get the latest version without maintaining global installations.

What is the Create React App Command

Run this in your terminal:

npx create-react-app my-app
cd my-app
npm start

Replace “my-app” with your project name. The development server starts at localhost:3000.

Build time reality: Create React App can take 20-30 seconds to start the development server according to DEV Community research, with some projects experiencing startup times exceeding 30 seconds.

What Files Does Create React App Generate

Your new project directory contains:

• package.json (lists dependencies and scripts)
• src/ (your React source code: App.js, index.js)
• public/ (static files like index.html)
• node_modules/ (installed packages)

The src/App.js file is where you start building your application.

Using source control like Git from the beginning helps track changes to your project files.

Dependencies reality: A typical React project can pull in 1,500+ dependencies according to RedMonk data. This makes version control and dependency management critical.

How to Install React.js with Vite

Vite is a faster alternative to Create React App with quicker build times and hot module replacement.

Many developers now prefer it for new projects, and the Vue CLI vs Vite debate has pushed Vite into the spotlight for React too.

Adoption data: Vite has over 15 million weekly downloads on npm according to Tweag research. The State of JS 2024 survey ranks Vite as the Most Loved Library Overall with 98% retention rate and the No.1 Most Adopted tool with 30%+ adoption growth.

What is Vite

Vite is a module bundler and development server created by Evan You (Vue.js creator). It uses native ES modules for instant server start and lightning-fast updates.

Performance difference: Vite starts in milliseconds compared to Create React App’s 20-30 seconds according to multiple benchmarks from TatvaSoft and DEV Community.

What is the Vite Command to Create a React Project

Run this command:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

The development server starts at localhost:5173.

Step-by-step breakdown:

1. First command creates project structure (takes seconds)
2. Navigate into your new project directory
3. Install dependencies (similar time to CRA)
4. Start dev server (near-instant)

How Does Vite Compare to Create React App

Vite starts in milliseconds while Create React App takes 30+ seconds.

Vite produces smaller production builds and offers better React performance optimization out of the box.

Real numbers according to Tweag benchmarks:

• Vite dev server: Milliseconds startup
• CRA dev server: 20-30+ seconds startup
• Vite HMR: Near-instant updates
• CRA HMR: Several seconds per change

Production build comparison:

• Vite uses Rollup for optimized bundling
• CRA uses Webpack (slower, larger bundles)
• Vite supports automatic code splitting
• Vite produces 15-20% smaller bundle sizes

Developer preference: Hyperlink InfoSystem research shows 67% of React developers have moved to modern tools like Vite for new projects in 2025.

What Files Does Vite Generate for React

• vite.config.js (Vite configuration)
• index.html (in root directory, not public/)
• src/main.jsx (entry point)
• src/App.jsx (main component)

Key difference: Vite places index.html in the project root, making it part of the module graph for better optimization.

Which Tool Should You Choose

Use Create React App when:

• Working on legacy projects (maintenance only)
• Required by company standards
• Learning React basics as a beginner

Use Vite when:

• Starting any new React project in 2025
• Performance and speed matter
• Building production applications
• Working with TypeScript (Vite has native support)

Industry recommendation: React’s official documentation and major React educators now recommend Vite or Next.js for all new projects. GeeksforGeeks notes that Create React App is deprecated and should only be used for legacy projects.

Action checklist for new projects:

• [ ] Install Node.js 14.0.0 or higher
• [ ] Verify npm installation with npm -v
• [ ] Choose Vite for new projects (recommended)
• [ ] Run npm create vite@latest with React template
• [ ] Install dependencies with npm install
• [ ] Start development with npm run dev
• [ ] Set up Git repository immediately
• [ ] Configure ESLint and Prettier (if needed)

Migration tip: If migrating from CRA to Vite, remove react-scripts from package.json and update your scripts section. The transition is straightforward and modernizes your development environment according to Oreate AI research.

How to Install React.js Manually

Manual installation gives you complete control over your configuration management. Good for learning how React works under the hood.

Reality check: Manual setup requires understanding webpack, Babel, and build configurations. Most developers (67%) now use tools like Vite for new projects according to 2025 data, but manual setup remains valuable for learning and custom requirements.

What npm Packages Are Needed for Manual React Installation

Core packages: react and react-dom.

Build tools: webpack, webpack-cli, webpack-dev-server, babel-loader, @babel/core, @babel/preset-react.

Package statistics: React core has over 20 million weekly downloads on npm according to Hypersense Software data. React-dom has similar numbers at 19 million weekly downloads.

How to Install React and React-DOM

npm init -y
npm install react react-dom

These two packages handle the virtual DOM and browser rendering.

Dependency reality: Even this minimal setup pulls in multiple transitive dependencies. The average npm project includes 79 transitive dependencies according to DEV Community research.

How to Configure Babel for React

Install Babel packages:

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

Create a .babelrc file with presets for modern JavaScript and JSX syntax transformation.

Configuration example:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Why Babel matters: Babel transforms JSX and modern JavaScript into browser-compatible code. Without it, browsers can’t understand React’s JSX syntax.

How to Configure Webpack for React

Create webpack.config.js with entry point, output, and module rules for .js and .jsx files.

The build automation tool compiles your source code into browser-ready bundles.

Webpack market position: According to State of JS 2024 data, webpack maintains a stable user base in enterprise applications despite newer alternatives. However, webpack builds can take multiple seconds compared to esbuild’s sub-second compile times (300ms for small libraries, 700ms for larger ones) according to Strapi research.

Basic webpack.config.js:

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  devServer: {
    hot: true,
    port: 3000
  }
};

Performance comparison from 2025 benchmarks:

• esbuild: 10-100x faster than webpack (Codecademy data)
• Vite (uses Rollup): Milliseconds for production builds
• Webpack: Multi-second builds, slower HMR

When to choose webpack: Complex enterprise projects with extensive custom configurations, legacy codebases, or when you need webpack’s mature plugin ecosystem.

How to Start a React.js Development Server

The development server compiles code, serves files, and refreshes the browser automatically.

What is a React Development Server

A local development server that watches for file changes and updates your app instantly. It runs on localhost with hot module replacement enabled.

HMR benefit: According to DATAFOREST research, Hot Module Replacement preserves application state and eliminates full page reloads. As the number of updates increases, time savings become more significant compared to traditional reload cycles.

What is the npm start Command

For Create React App:

npm start

For Vite:

npm run dev

Both commands are defined in the package.json scripts section.

Start time comparison:

• Vite: Instant (milliseconds)
• Webpack-based CRA: 20-30+ seconds according to multiple sources

How to Access a React Application in the Browser

Open http://localhost:3000 (Create React App) or http://localhost:5173 (Vite).

The page auto-refreshes when you save changes to any component file.

HMR performance: According to Sanity documentation, HMR updates modules without full page reload, saving development time and preserving application state. Modern tools like Vite provide near-instant hot module replacement compared to webpack’s slower updates.

What Port Does React Development Server Use

Default ports: 3000 for Create React App, 5173 for Vite.

Change ports by setting the PORT environment variable or editing vite.config.js.

Port configuration examples:

For Create React App (macOS/Linux):

PORT=3001 npm start

For Create React App (Windows):

set PORT=3001 && npm start

For Vite (vite.config.js):

export default {
  server: {
    port: 3001
  }
}

Development workflow checklist:

• [ ] Install Node.js 14.0.0 or higher
• [ ] Initialize npm project with npm init -y
• [ ] Install React and React-DOM
• [ ] Set up Babel for JSX transformation
• [ ] Configure build tool (webpack or use Vite)
• [ ] Enable HMR for instant updates
• [ ] Configure development server port if needed
• [ ] Test hot module replacement works
• [ ] Set up production build script

Modern alternative recommendation: Unless you need specific webpack configurations for legacy projects, consider using Vite instead. According to Landskill data, most new projects in 2025 adopt Vite or esbuild as defaults, with Vite showing a sharp upward trajectory in download volume that briefly surpassed all other bundlers in early 2024.

Build tool selection guide:

Choose manual webpack setup when:

• Learning build tools fundamentals
• Maintaining legacy projects
• Requiring specific webpack plugins unavailable elsewhere
• Working with complex enterprise configurations

Choose Vite instead when:

• Starting new projects (recommended for 2025)
• Prioritizing development speed
• Building modern SPAs or component libraries
• Wanting minimal configuration overhead

Performance impact: According to Strapi benchmarks, esbuild (which Vite uses during development) produces 10-100x faster builds than webpack. For a typical project, this translates from minutes of waiting to seconds, dramatically improving developer productivity.

How to Verify React.js Installation

Check that everything works before writing code.

How to Check if React is Installed Correctly

Your terminal should show “Compiled successfully” with no errors. The browser displays the default React welcome page with a spinning logo.

Verification benchmark: Successful compilation typically takes 20-30 seconds with Create React App, or milliseconds with Vite according to performance data from TatvaSoft.

Success indicators:

• Terminal shows no red error messages
• Development server starts without crashes
• Browser displays React app at localhost:3000 or localhost:5173
• Hot module replacement works when you edit files

What Files Confirm a Successful React Installation

Check for node_modules/react and node_modules/react-dom folders.

The package.json should list react and react-dom under dependencies.

Dependency count reality: According to RedMonk data, even a minimal React project can pull in close to 1,500 dependencies. The node_modules folder typically contains hundreds of packages due to transitive dependencies.

File checklist:

• ✓ node_modules/ directory exists
• ✓ package.json contains React dependencies
• ✓ package-lock.json is present
• ✓ src/ directory with React components
• ✓ public/ or index.html in project root

How to Check React Version in a Project

npm list react

Or check package.json directly for the version number (e.g., “react”: “^18.2.0”).

Version identification:

npm list react react-dom

Current stable version: React 18.3.1 (released April 2024) according to React’s official documentation. React 19.0.1 was released in December 2025.

Quick version check from code:

console.log(React.version);

Common React.js Installation Errors

Most errors come from Node.js version mismatches or corrupted npm cache.

Error frequency: According to Xygeni data, 40,009 vulnerabilities were disclosed in npm packages during 2024, a 38% increase over 2023. Many installation errors stem from dependency conflicts and compatibility issues.

What Causes npm Install Errors

Network timeouts, permission issues, incompatible Node versions, or corrupted package-lock.json files.

Sometimes antivirus software blocks npm operations.

Common error types according to 2025 troubleshooting guides:

1. ELIFECYCLE errors (script failures during installation)
2. Dependency conflicts (incompatible package versions)
3. Permission errors (EACCES on macOS/Linux)
4. Network timeouts (registry connection failures)
5. EBADENGINE (Node version incompatibility)

Real-world example: According to GitHub issues, developers using Node v16.20.2 get EBADENGINE warnings when installing packages that require Node 18+.

How to Fix Node Version Compatibility Issues

Use nvm to switch Node versions:

nvm install 18
nvm use 18

React 18 requires Node 14+. Some dependencies need Node 16 or 18.

Version requirements by React version:

• React 16-17: Node 12+ (minimum)
• React 18: Node 14.0.0+ (minimum), Node 16-18 (recommended)
• React 19: Node 18+ (recommended)

React Native specifics (Medium data):

• React Native 0.67 and below: Node 14
• React Native 0.68-0.72: Node 14-16
• React Native 0.73+: Node 18+
• React Native 0.81+: Node 20.19.4+

nvm installation check:

nvm --version

Best practice recommendation: Always use LTS (Long Term Support) versions of Node.js for stability and security updates according to WaveMaker documentation.

How to Clear npm Cache

npm cache clean --force

Delete node_modules and package-lock.json, then run npm install again.

Cache issues context: According to DEV Community research, npm’s public registry uses a 5-minute cache (max-age=300) for package metadata, and 1-year cache for package tarballs. Clearing local cache helps resolve corrupted or outdated package information.

Complete cache clear procedure:

npm cache clean --force
rm -rf node_modules
rm package-lock.json
npm install

Windows version:

npm cache clean --force
rmdir /s /q node_modules
del package-lock.json
npm install

Verification after cache clear:

npm cache verify

How to Fix Permission Errors During Installation

On macOS/Linux, avoid using sudo with npm.

Fix permissions with:

sudo chown -R $(whoami) ~/.npm

On Windows, run terminal as Administrator or reinstall Node.js.

Permission error frequency: According to 2025 troubleshooting data from Learners Store, permission errors (EACCES) rank among the top 5 most common npm installation issues.

Proper permission fix (never use sudo):

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

Then add to your .bashrc or .zshrc:

export PATH=~/.npm-global/bin:$PATH

Windows permission fix:

• Run PowerShell or Command Prompt as Administrator
• Or reinstall Node.js with “Run as Administrator”

Additional troubleshooting steps:

For dependency conflicts:

npm ls

This shows the dependency tree and highlights conflicts.

For network issues:

npm config set registry https://registry.npmjs.org/
npm install --verbose

For antivirus blocking npm:

• Temporarily disable antivirus during installation
• Add node_modules folder to exclusion list
• Whitelist npm.exe and node.exe

Error prevention checklist:

• [ ] Verify Node.js version matches React requirements
• [ ] Use LTS version of Node.js (not experimental)
• [ ] Clear npm cache if experiencing issues
• [ ] Delete node_modules before fresh install
• [ ] Check internet connection for registry access
• [ ] Disable antivirus temporarily if blocked
• [ ] Never use sudo with npm (macOS/Linux)
• [ ] Use nvm for version management
• [ ] Keep npm updated: npm install -g npm@latest
• [ ] Review package.json for version conflicts

Common warning to ignore:

npm WARN deprecated [package-name]

Deprecation warnings don’t prevent installation. They indicate packages with newer alternatives available.

When to seek help:

If you see errors after trying these fixes, check:

• Stack Overflow for specific error messages
• GitHub issues for the failing package
• React community Discord or forums
• npm documentation for command-specific issues

Performance tip: According to Medium troubleshooting guides, adding this to package.json prevents future compatibility issues:

{
  "engines": {
    "node": ">=18.0.0",
    "npm": ">=9.0.0"
  }
}

This ensures anyone installing your project uses compatible versions.

How to Install React.js on Windows

Windows works well with React using PowerShell or Command Prompt.

Stack Overflow’s 2024 survey shows 59.2% of developers use Windows for personal development and 47.6% for professional work.

What Are the Steps to Install React on Windows

1. Download Node.js installer from nodejs.org
2. Run the .msi file and follow prompts
3. Open PowerShell or Command Prompt
4. Run npx create-react-app my-app
5. Navigate to folder and run npm start

Installation time: 5-10 minutes for Node.js, 2-5 minutes for React app creation.

Version verification:

node --version
npm --version
npx --version

How to Use Windows Terminal for React Installation

Windows Terminal supports multiple shells (PowerShell, CMD, WSL).

Use WSL (Windows Subsystem for Linux) for a Linux-like experience with better npm performance.

WSL usage data: Stack Overflow 2024 found 17.1% of developers use WSL for personal work and 16.8% for professional work. Build 2025 surveys revealed over 40% of professional Windows developers actively use WSL in their workflows.

Why WSL matters for React:

• 20x better file read/write performance over WSL 1
• No permission conflicts with npm
• Access to Linux tools (bash, grep, sed)
• Better Docker integration

Install WSL 2:

wsl --install

Requires Windows 10 version 1903+ or Windows 11. Sets WSL 2 as default.

2024-2025 WSL improvements:

• Automatic memory reclaim (returns unused RAM to Windows)
• DNS tunneling enabled by default
• IPv6 support in mirrored networking mode
• Open-sourced in May 2025 (available on GitHub)

Red Hat Linux coming to WSL: Microsoft announced in November 2024 that Red Hat Enterprise Linux will become an official WSL distribution.

How to Install React.js on macOS

macOS comes with Terminal ready for software development.

Stack Overflow 2024 shows 31.8% of developers use macOS. Professional developers prefer it at 33.2%.

macOS device shipments grew 14.9% year-over-year in Q3 2025 (overall PC market grew 8.1%).

What Are the Steps to Install React on macOS

1. Install Homebrew: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
2. Install Node: brew install node
3. Create app: npx create-react-app my-app
4. Start server: cd my-app && npm start

Homebrew advantages:

• No sudo needed (avoids permission errors)
• Automatic updates: brew update && brew upgrade
• Works on Apple Silicon and Intel
• Manages dependencies automatically

Alternative: Use nvm for version flexibility (install multiple Node versions).

How to Use Terminal for React Installation on Mac

Open Terminal from Applications > Utilities or use Spotlight (Cmd + Space).

Consider using iTerm2 or the built-in Terminal with Oh My Zsh for better productivity.

Installation verification:

node --version
npm --version
which node

Output should show /usr/local/bin/node or /opt/homebrew/bin/node (Apple Silicon).

How to Install React.js on Linux

Linux offers multiple ways to install Node.js, and most developers prefer nvm.

Stack Overflow 2024 data shows Ubuntu leads Linux distributions with 27.7% adoption. Linux desktop market share reached 4.1% globally in 2025 (grew from 3% to 4% in 0.7 years).

Linux in development: 90.1% of cloud-native developers use Linux environments. 68.2% of DevOps teams use Linux as primary platform. 87.8% of machine learning workloads run on Linux infrastructure.

What Are the Steps to Install React on Linux

1. Install nvm: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
2. Restart terminal
3. Install Node: nvm install --lts
4. Create React app: npx create-react-app my-app

Why nvm over package managers:

• Install multiple Node versions
• Switch per project automatically
• No sudo for global packages
• Created in 2010, actively maintained

nvm performance note: NodeVibe benchmarking in 2025 found nvm takes 543ms cold start on Zsh (FNM/Volta take <10ms). For heavy terminal users, this adds up. However, nvm remains the most popular choice for its reliability.

Alternative version managers:

• FNM (Fast Node Manager): 15.2k GitHub stars, written in Rust, cross-platform
• Volta: 10k stars, manages entire toolchain, uses package.json config
• n: Simple system-wide installation

How to Install Node.js on Ubuntu for React

Using apt (older version):

sudo apt update
sudo apt install nodejs npm

Using nvm (recommended for latest version and easier management):

nvm install 18
nvm use 18

After installation, verify with node --version and proceed with your React project setup.

Distribution preferences (Stack Overflow 2024):

• Ubuntu: 27.7% adoption (personal and professional)
• Debian: 9.8% personal, 9.1% professional
• Arch Linux: 8.0% personal, 4.3% professional
• Red Hat Enterprise Linux: 4.9% professional (enterprise focused)

Build tools needed for some packages:

sudo apt install build-essential

This installs gcc, g++, and make required for compiling native modules.

Project-specific Node versions with .nvmrc:

Create .nvmrc in project root:

18.19.1

Then run:

nvm use

Automatically switches to correct version when entering project directory.

Installation verification checklist:

• [ ] Node.js installed (node --version returns v18+ for React 18)
• [ ] npm installed (npm --version returns 9.0+)
• [ ] Create test app: npx create-react-app test-app
• [ ] Dev server starts: npm start
• [ ] Browser opens at localhost:3000
• [ ] See React logo spinning

OS selection based on 2024-2025 data:

Windows (59.2% developer adoption):

• Best for: Enterprise environments, Windows-specific development
• Use WSL for Linux tools (40% of Windows developers do)
• Windows 11 market share: 43.22% (growing from Windows 10’s 53.19%)

macOS (31.8% developer adoption):

• Best for: iOS development, design-heavy workflows
• 33.2% of professional developers prefer macOS
• Growing market share (14.9% YoY growth)

Linux (27.7% Ubuntu adoption among developers):

• Best for: DevOps, cloud development, machine learning
• 90.1% cloud-native developers use Linux
• Fastest npm performance (native file system)

Performance comparison:

npm install speed (typical React project):

• Linux with nvm: Fastest (native file system)
• macOS with Homebrew: Excellent (optimized for platform)
• Windows native: Slower (NTFS overhead)
• Windows WSL 2: 20x faster than WSL 1, near-Linux performance

Cold shell startup with nvm (NodeVibe 2025 benchmarks):

• Bash: ~200ms
• Zsh: ~543ms
• With alternatives (FNM/Volta): <10ms

Version manager switching speed:

• nvm: 200-217ms
• FNM/Volta: <10ms (40-100x faster)

For developers opening 50+ terminal tabs daily, FNM or Volta can save minutes.

Actionable next steps:

Once installed, you can explore React for beginners tutorials or dive into React hooks explained guides to start building components.

For production-ready applications, learn about unit testing with React testing libraries and set up a build pipeline for continuous integration.

Platform-specific troubleshooting:

Windows:

• Antivirus blocking npm? Add node_modules to exclusions
• Path too long errors? Enable long paths: New-ItemProperty -Path "HKLM:\SYSTEM\CurrentControlSet\Control\FileSystem" -Name "LongPathsEnabled" -Value 1 -PropertyType DWORD -Force
• Or use WSL 2 (avoids Windows path limitations)

macOS:

• Missing compiler? Install Xcode tools: xcode-select --install
• Apple Silicon compatibility? Most packages now support M1/M2/M3
• Rosetta 2 handles older packages automatically

Linux:

• Permission errors? Use nvm (never sudo npm)
• Missing build tools? Install: sudo apt install build-essential python3
• Different distros have different package names (nodejs vs node)

FAQ on How To Install React.Js

Can I install React.js without Node.js?

No. Node.js is required because npm (the package manager) runs on it.

You can add React via CDN links for quick prototypes, but any serious development environment needs Node.js installed locally.

What is the difference between npx and npm when installing React?

npm installs packages to your system or project folder.

npx executes packages without permanent installation. Use npx create-react-app to run the latest version once without cluttering your global packages.

Should I use Create React App or Vite?

Vite is faster for development with instant server start and quicker hot module replacement.

Create React App is more established but slower. Most new projects in 2024 use Vite for better performance.

How long does it take to install React.js?

First-time setup takes 5-10 minutes depending on internet speed.

The npx create-react-app command downloads approximately 200MB of dependencies into your nodemodules folder.

Can I install React.js on a shared hosting server?

You build React locally, then upload the production build to shared hosting.

Run npm run build to create static files. These files work on any web server without Node.js.

What version of React should I install?

Install the latest stable version (React 18.x as of 2024).

The npm install react command automatically fetches the newest release. Check package.json to confirm your version number.

Why does my React installation fail on Windows?

Common causes: outdated Node.js, permission errors, or spaces in folder paths.

Run PowerShell as Administrator, update Node to version 18+, and install in a path without special characters.

Do I need to install React globally?

No. Install React as a project dependency, not globally.

Each project should have its own React version in nodemodules. Global installation causes version conflicts between projects.

How do I install React with TypeScript support?

Add the TypeScript template flag to your command:

npx create-react-app my-app –template typescript

For Vite: npm create vite@latest my-app — –template react-ts

Can I install React.js alongside other JavaScript frameworks?

Yes, but not recommended in the same project.

React can coexist with jQuery or vanilla JavaScript. Mixing React with Angular or Vue in one codebase creates unnecessary complexity and bundle size issues.

Conclusion

You now know how to install React.js using multiple methods. Choose the one that fits your workflow.

Vite offers speed. Create React App offers simplicity. Manual setup offers control.

Your React project is ready for building dynamic user interfaces with the virtual DOM and JSX syntax.

The next steps involve learning React components, state management, and routing. Consider exploring popular React libraries to extend functionality.

As your application grows, you will need app deployment strategies and continuous deployment pipelines.

Start small. Build a few components. Break things.

That is how every React developer learns. Your development server is running. Time to write some code.

• Author
• Recent Posts

Bogdan Sandu

Bogdan Sandu specializes in web design, focusing on creating user-friendly websites, and innovative UI kits.

Many of his resources are available on various design marketplaces and for free on Codepen.

Over the years, he's worked with a range of clients and contributed to design publications like Design Your Way, Designmodo, WebDesignerDepot, WPDean, and Speckyboy, and Slider Revolution among others.

Latest posts by Bogdan Sandu (see all)

• Feature-Driven Development vs Agile: Key Differences - March 12, 2026
• Agile vs DevOps: How They Work Together - March 11, 2026
• Ranking The Best Mapping Software by Features - March 11, 2026