How To Install React JS In Ubuntu

React.js is an open-source JavaScript framework and library. It’s the most popular front-end framework at present for building UIs and web apps. 

The best way to install it on Ubuntu is through the create-react-app Node module. We’ll cover the steps for this and use this module to create a basic React application in this article.

Add NodeSource PPA

A React application requires various tools like Node.js, npm, etc. You can install these from the Ubuntu repo but those packages are usually outdated. We recommend using the official PPA instead to get the latest versions.

Use the following command to download and run the latest setup script. This’ll add the NodeSource PPA to your sources list and update your apt package index.

curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash

Install Node.js

As the script automates most of the process, you can install the latest Node.js version now with

sudo apt install nodejs

Afterward, check the Node version to verify the installation.

node -v

Create React App with npm/npx

The legacy method for creating single-page React apps is to install the create-react-app module with npm and use that.

npm install -g create-react-app

For instance, the following command creates a directory called newapp containing your project files.

create-react-app newapp

A minor drawback to this method is that tools like create-react-app are not used often. By the time you use it again, the installed version may be outdated.

On the other hand, npx can install and invoke packages without adding them to your global $PATH. This makes it better suited for tools like create-react-app.

You can directly start a new project with npx like so

npx create-react-app newapp

In either case, you can cd to the project directory and start the development server with the start command.

cd newapp
npm start

This should redirect you to the React page in your default browser. You can also manually visit http://localhost:3000/ to see your app.

Once you’re ready to deploy your app, create a minified bundle with the build command.

npm run build
Anup Thapa

Senior Writer

Anup Thapa is a Linux enthusiast with an extensive background in computer hardware and networking. His goal is to effectively communicate technical concepts in a simplified form understandable by new Linux users. To this end, he mainly writes beginner-friendly tutorials and troubleshooting guides. Outside of work, he enjoys reading up on a range of topics, traveling, working out, and MOBAs.