Setup React Development on Linux

Setting up React on Linux requires Node.js and npm. This guide covers everything you need for React development.

Prerequisites

Install Node.js and NPM

Using your package manager:

# Ubuntu/Debian
sudo apt update
sudo apt install nodejs npm

# Fedora
sudo dnf install nodejs npm

# Arch Linux
sudo pacman -S nodejs npm

Alternative: Using NVM (Recommended)

NVM lets you switch between Node.js versions easily:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc
nvm install 18
nvm use 18

Create React App

The easiest way to start a React project is with Create React App:

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

This creates a complete React development environment with hot reloading.

Alternative: Vite (Faster Development)

Vite provides faster development builds:

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

Code Editor Setup

VS Code

  1. Install VS Code from your package manager or code.visualstudio.com
  2. Install essential extensions:
    • ES7+ React/Redux/React-Native snippets
    • Prettier - Code formatter
    • ESLint
    • Auto Rename Tag

Terminal Extensions

Install these for better development experience:

# For additional React tools
npm install -g @storybook/cli
npm install -g react-devtools

Browser Setup

Install the React Developer Tools browser extension:

Environment Configuration

Environment Variables

Create a .env file in your project root:

REACT_APP_API_URL=http://localhost:3001
REACT_APP_ENV=development

Package.json Scripts

Customize your package.json with useful scripts:

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint src/**/*.{js,jsx}",
    "format": "prettier --write src/**/*.{js,jsx}"
  }
}

Common Issues

Permission Denied with NPM

If you encounter permission errors:

# Configure npm to use a different directory
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc

Port Already in Use

Kill the process using port 3000:

sudo lsof -ti:3000 | xargs kill -9

Sources

For other platforms, check our React setup for macOS and Windows React installation.