Setup React Development on Windows

Setting up React on Windows requires installing Node.js and choosing the right development tools. This guide covers the complete setup process.

Prerequisites

Install Node.js and NPM

Method 1: Official Installer (Recommended)

  1. Download from nodejs.org
  2. Download the LTS version (Long Term Support)
  3. Run the installer and follow the wizard
  4. Restart your computer after installation

Method 2: Using Chocolatey

If you have Chocolatey installed:

choco install nodejs

Method 3: Using Winget

Windows 10/11 users can use Winget:

winget install OpenJS.NodeJS

Verify Installation

Open Command Prompt or PowerShell:

node --version
npm --version

Create React App

Using Create React App 

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

Your browser will open to http://localhost:3000

Using Vite (Faster Development) 

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

Development Environment

Visual Studio Code

  1. Download from code.visualstudio.com
  2. Install VS Code
  3. Install these essential extensions:
    • ES7+ React/Redux/React-Native snippets
    • Prettier - Code formatter
    • ESLint
    • Auto Rename Tag
    • Live Server (for static files)

Windows Terminal (Recommended)

Install from Microsoft Store for better terminal experience with tabs and multiple shells.

Git for Windows

Install Git from git-scm.com

Browser Developer Tools

Install React Developer Tools:

Environment Configuration

Windows PATH Issues

If Node.js commands aren’t recognized:

  1. Search for “Environment Variables” in Start Menu
  2. Click “Edit the system environment variables”
  3. Click “Environment Variables”
  4. Add to PATH:
    • C:\Program Files\nodejs\
    • C:\Users\YourUsername\AppData\Roaming\npm

Using PowerShell Profiles

Create a PowerShell profile for aliases and shortcuts:

# Open PowerShell profile
notepad $PROFILE

# Add useful aliases
Set-Alias -Name npm-start -Value "npm start"
Set-Alias -Name npm-build -Value "npm run build"

Package Management

Configure NPM 

# Set default npm directory to avoid permission issues
npm config set prefix "C:\Users\%USERNAME%\npm-global"

Add the npm-global folder to your PATH.

Yarn Alternative

Install Yarn as an alternative package manager:

npm install -g yarn

Development Tools

React Developer Tools CLI 

npm install -g react-devtools

Additional Useful Packages 

# For development tools
npm install -g nodemon
npm install -g live-server

# For React Native (if needed)
npm install -g @react-native-community/cli

Common Issues and Solutions

Permission Errors

If you encounter EACCES errors:

# Clear npm cache
npm cache clean --force

# Use PowerShell as Administrator

Port Already in Use 

# Find process using port 3000
netstat -ano | findstr :3000

# Kill the process
taskkill /PID <PID_NUMBER> /F

Node.js Version Issues

Consider using NVM for Windows to manage multiple Node.js versions:

# Install NVM4W from GitHub
# https://github.com/coreybutler/nvm-windows
nvm install 18
nvm use 18

Sources

For other platforms, check our React Linux setup or React macOS installation.