How to Install React.js on Ubuntu 26.04, 24.04 and 22.04

Current React tooling expects a modern Node.js runtime before you write the first component. To install React.js on Ubuntu, set up a supported Node.js LTS release first, then scaffold a Vite project so JSX, fast refresh, local preview, and production builds all work from npm.

React is the official project name, while React.js and ReactJS are common search variants. These commands target Ubuntu 26.04, 24.04, and 22.04. NodeSource or NVM gives the same Node.js 24 LTS path across all three releases; Ubuntu’s archive package works for this Vite workflow only on Ubuntu 26.04 at the moment.

Install React.js on Ubuntu

Choose a React.js Installation Method on Ubuntu

React installs into each project through npm, so the real system choice is how you provide Node.js and npm. NodeSource is the simplest APT-managed path across supported Ubuntu LTS releases, while NVM is better when different projects need different Node.js versions.

Method	What It Provides	Release Fit	Best For
NodeSource Node.js 24 LTS	System-wide nodejs package with bundled npm	Works on Ubuntu 26.04, 24.04, and 22.04	Most React development workstations and servers that should update through APT
NVM	User-scoped Node.js installs under ~/.nvm	Works on Ubuntu 26.04, 24.04, and 22.04	Per-project version switching or developer accounts without a system-wide Node.js preference
Ubuntu repository Node.js	Distro-packaged nodejs and separate npm	Ubuntu 26.04 currently meets Vite’s engine requirement; Ubuntu 24.04 and 22.04 do not	Ubuntu 26.04 users who prefer the distro package and accept Node.js 22
SDKMAN	JVM language and toolchain manager	Not a Node.js or React installer	Java, Kotlin, Gradle, Maven, and related JVM tooling, not this React workflow

For deeper Node.js package-source comparisons, see install Node.js on Ubuntu. React’s own installation documentation no longer recommends Create React App for new projects, so Vite replaces the old global create-react-app package here. If your goal is JVM tooling instead, install SDKMAN on Ubuntu; it manages Java, Kotlin, Gradle, and Maven rather than Node.js packages.

Update Ubuntu Before Installing React Tooling

Refresh APT metadata before installing Node.js prerequisites or adding the NodeSource repository:

sudo apt update

If APT lists pending system upgrades, review them separately with sudo apt upgrade before changing the JavaScript toolchain. A package-list refresh is enough for the install commands in this section.

Install Node.js 24 LTS from NodeSource on Ubuntu

Use NodeSource when you want a current Node.js LTS branch managed by APT. Install the repository prerequisites first; curl downloads the signing key, and gpg converts it into the keyring format APT expects.

sudo apt install ca-certificates curl gpg

Import the NodeSource repository key into /usr/share/keyrings/:

curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor --batch --yes -o /usr/share/keyrings/nodesource.gpg

Create a DEB822 source file for the Node.js 24 LTS repository. The Architectures line uses your system architecture so APT ignores packages that do not match the machine.

NODE_MAJOR=24
printf '%s\n' \
'Types: deb' \
"URIs: https://deb.nodesource.com/node_${NODE_MAJOR}.x" \
'Suites: nodistro' \
'Components: main' \
"Architectures: $(dpkg --print-architecture)" \
'Signed-By: /usr/share/keyrings/nodesource.gpg' \
| sudo tee /etc/apt/sources.list.d/nodesource.sources > /dev/null

Refresh APT again and confirm the candidate comes from NodeSource before installing anything:

sudo apt update
apt-cache policy nodejs

The exact patch version changes, but the relevant output should show the NodeSource node_24.x repository:

nodejs:
  Candidate: 24.x.x-1nodesource1
        500 https://deb.nodesource.com/node_24.x nodistro/main amd64 Packages

Install Node.js, then verify both node and npm are available:

sudo apt install nodejs
node --version
npm --version

NodeSource bundles npm in the nodejs package. Current Node.js 24 LTS output follows this pattern:

v24.x.x
11.x.x

Install Node.js with NVM for React Projects

Use NVM instead of NodeSource when your React projects need different Node.js versions. NVM installs into your user account, so skip this section when the NodeSource package already supplies your preferred Node.js runtime.

sudo apt install curl

Download NVM’s installer from its default branch. The installer selects NVM’s current release tag, so the command does not need a hardcoded version:

curl -fsSL https://raw.githubusercontent.com/nvm-sh/nvm/HEAD/install.sh | bash

Reload your shell profile so the nvm function is available in the current terminal. Bash users normally run:

source ~/.bashrc

If you use Zsh, reload ~/.zshrc instead. Confirm NVM loaded, then install the current Node.js LTS branch:

command -v nvm
nvm install --lts
nvm alias default 'lts/*'
node --version
npm --version

Successful output should show NVM and a Node.js 24 LTS runtime:

nvm
Now using node v24.x.x (npm v11.x.x)
default -> lts/* (-> v24.x.x)
v24.x.x
11.x.x

Optional: Install Node.js from Ubuntu Repositories on Ubuntu 26.04

Ubuntu 26.04 currently ships Node.js 22 in the universe component, which satisfies the current Vite engine requirement. Skip this method on Ubuntu 24.04 and 22.04 because their archive packages are too old for current Vite.

If APT cannot find the packages on Ubuntu 26.04, enable the Ubuntu Universe repository first. The Ubuntu repository path can pull in many JavaScript helper packages and build dependencies, so use NodeSource or NVM when you want a smaller Node.js-specific setup.

sudo apt install nodejs npm
node --version
npm --version

On Ubuntu 26.04, successful output follows this pattern:

v22.x.x
9.x.x

Create a React.js Project with Vite on Ubuntu

After Node.js and npm are ready, create React project files with Vite. The template installs React and React DOM as project dependencies, which keeps each app self-contained instead of placing React globally on the system.

Scaffold a React Project with Vite

Create a new project named react-demo with the React template:

npm create vite@latest react-demo -- --template react

If npm asks to install create-vite, answer y. Relevant output includes the project directory and the next commands:

Scaffolding project in /home/username/react-demo...
Done. Now run:

  cd react-demo
  npm install
  npm run dev

Install React Project Dependencies

Enter the project directory and install the npm dependencies declared by the Vite template:

cd react-demo || exit
npm install

The install creates node_modules/ and a lock file for repeatable installs. Keep the lock file in version control when this becomes a real project.

Start the React Development Server

Start Vite’s local development server from inside the project directory:

npm run dev

Open the local URL Vite prints in your browser. The exact version and startup time vary, but the output should include a local address:

VITE v8.x.x ready in 274 ms
Local: http://localhost:5173/

Use npm run dev -- --host 0.0.0.0 only on a trusted local network when you need to open the Vite server from another machine or browser session. The default local-only server is safer for normal development.

Build React Production Files

Run a production build before you deploy or before you treat the setup as complete:

npm run build

A successful build writes static files into dist/. Relevant output includes:

vite v8.x.x building client environment for production...
rendering chunks...
computing gzip size...
dist/index.html

The dist/ directory is what you deploy to a static host or serve with a web server. If you need a local web server for those files, install Nginx on Ubuntu and point a server block at the built directory instead of running the Vite development server as a public service.

Get Started with React.js Files on Ubuntu

The Vite React template puts the main component in src/App.jsx. Replace it with a small stateful component to confirm React fast refresh works while the development server is running:

import { useState } from 'react';
import './App.css';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <main className="app-shell">
      <h1>React is running on Ubuntu</h1>
      <p>Vite refreshes this page when you save changes.</p>
      <button onClick={() => setCount((value) => value + 1)}>
        Clicks: {count}
      </button>
    </main>
  );
}

Save the file while npm run dev is still active. The browser should update without restarting the server, which confirms React, Vite, and npm are working together.

For a typed React workflow, set up TypeScript after this baseline project works. Install TypeScript on Ubuntu covers the compiler and package-manager options, and install Git on Ubuntu helps if you need version control before publishing the project.

Update or Remove React.js Tooling on Ubuntu

Update NodeSource Node.js on Ubuntu

For the NodeSource method, refresh APT metadata and upgrade only the nodejs package when you want a newer Node.js 24 point release:

sudo apt update
sudo apt --only-upgrade install nodejs

Update Ubuntu Repository Node.js on Ubuntu 26.04

For the Ubuntu repository method on Ubuntu 26.04, refresh APT metadata and upgrade the explicit Node.js packages. This keeps the runtime on Ubuntu’s packaged branch instead of switching to NodeSource.

sudo apt update
sudo apt --only-upgrade install nodejs npm

Update NVM Node.js for React Projects

NVM users can install the newest LTS release and keep the default alias on the LTS branch:

nvm install --lts
nvm alias default 'lts/*'
node --version

After switching Node.js versions, run the dependency update workflow below from each project so engine issues appear before deployment.

Update React Project Dependencies

For any Node.js method, update npm dependencies from inside each React project and run a fresh build:

cd react-demo || exit
npm update
npm run build

Remove a React Project Directory

The following command permanently deletes the sample project, including source files, dependencies, and any local changes under ~/react-demo. Move or back up files you want to keep before running it.

rm -rf ~/react-demo

Remove NodeSource Node.js from Ubuntu

If you used the NodeSource method and no longer need system-wide Node.js, remove the package, repository source, keyring, and user npm cache:

sudo apt remove --purge nodejs
sudo rm -f /etc/apt/sources.list.d/nodesource.sources /usr/share/keyrings/nodesource.gpg
sudo apt update
rm -rf ~/.npm

Verify the package is no longer installed:

dpkg -l nodejs | grep '^ii' || echo 'nodejs package is not installed'

nodejs package is not installed

Remove Ubuntu Repository Node.js from Ubuntu 26.04

If you used Ubuntu’s repository package, remove the explicit runtime packages first. Then preview autoremovable dependencies before deleting them, because this method can install many helper packages for npm.

sudo apt remove --purge nodejs npm
sudo apt autoremove --dry-run

If the preview only lists packages you no longer need, remove them with:

sudo apt autoremove

Remove NVM from Ubuntu

Removing NVM deletes every Node.js version installed under ~/.nvm for your user account. Projects keep their source files, but commands that relied on NVM’s Node.js path will stop working until another Node.js runtime is available.

rm -rf ~/.nvm ~/.npm

Open your shell profile, usually ~/.bashrc or ~/.zshrc, and remove the NVM initialization block:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

Open a new terminal or reload the edited profile, then confirm NVM is no longer loaded:

command -v nvm || echo 'nvm is not loaded'

nvm is not loaded

Troubleshoot React.js on Ubuntu

Vite Reports an Unsupported Node.js Version

Current Vite and create-vite require Node.js ^20.19.0 or >=22.12.0. If npm reports an unsupported engine warning or Vite refuses to start, check the runtime your terminal is actually using:

node --version
npm --version
command -v node

Ubuntu 26.04 currently ships Node.js 22 from the Ubuntu repository, which meets the current Vite engine range. Ubuntu 24.04 ships Node.js 18, and Ubuntu 22.04 ships Node.js 12, so use NodeSource or NVM on those releases when a current React toolchain needs a newer runtime.

NVM Command Not Found After Installation

If the terminal cannot find NVM after the installer finishes, the current shell has not loaded the profile changes yet:

nvm: command not found

Reload the correct shell profile and check again:

source ~/.bashrc
command -v nvm

nvm

For Zsh, replace ~/.bashrc with ~/.zshrc. If the command still prints nothing, reopen the NVM install output and confirm which profile file it modified.

npm Permission Errors During React Setup

The Vite workflow does not need a global React package or a global Create React App package. If npm reports permission errors under a system prefix such as /usr/lib/node_modules, check the active prefix:

npm config get prefix

For NodeSource, keep project dependencies local by running npm install inside the project directory. For NVM, remove old user prefix settings that conflict with NVM before switching versions:

npm config delete prefix
unset PREFIX NPM_CONFIG_PREFIX npm_config_prefix
source ~/.bashrc

Browser Cannot Reach the Vite Server

When the browser runs on the same Ubuntu desktop, use the local URL printed by npm run dev. When the browser is on another trusted machine, start Vite with a network bind and use the Ubuntu machine’s IP address:

npm run dev -- --host 0.0.0.0

Network: http://192.168.1.50:5173/

Use that network bind only for development on a trusted LAN. For a public site, build the project and serve dist/ through a real web server or deployment platform.

Conclusion

React is ready on Ubuntu with a current Node.js LTS runtime, a Vite development server, and a production build path through npm run build. If your team prefers a stricter package manager, install pnpm on Ubuntu, then serve the built dist/ files with a web server or deployment platform when the project is ready.