How to Install ReactJS on Ubuntu 22.04

ReactJS is a JavaScript library popular for building user interfaces(UI). It primarily uses a component-based architecture, splitting down user interface elements that can be used repeatedly. Therefore, you can easily create interactive and dynamic web applications.

The key objective of this post is to provide educational material on installing ReactJS on Linux systems, specifically the Ubuntu 22.04 system.

How to Install Prerequisites for ReactJS on Ubuntu 22.04?

This step-wise guide will install the necessary dependencies on your Ubuntu 22.04 machine to run the ReactJS package smoothly.

Step 1: Install Necessary Dependencies

Before installing the ReactJS package, ensure you have all the necessary dependencies using the below-mentioned command:

sudo apt install curl apt-transport-https gnupg2 software-properties-common

The command sets up the necessary tools to run the ReactJS package smoothly on your Ubuntu 22.04 system.

Step 2: Update Packages List

As a good practice, it is important to keep your system files up to date:

sudo apt update

Step 3: Access Node.js Repository

Node.js is essential for ReactJS development because it provides the necessary tools for building and running React applications. Thus, to install the newest release of Node.JS, navigate the Node.js repository:

https://deb.nodesource.com/

Step 4: Download Node.js Repository

Copy the command to the Ubuntu terminal to download and add Node.js repository:

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

According to the message displayed in your terminal, the Node.js repository has been successfully configured on your Ubuntu 22.04 machine.

Step 5: Install Node.js using APT

After configuring the Node.js repository, proceed to install the package using the APT package manager:

sudo apt install nodejs -y

You have successfully installed the NodeJS on your Ubuntu system.

Step 6: Upgrade “npm”

Use the following command to upgrade the npm (Node Package Manager) to the latest release on your Ubuntu machine:

sudo npm install -g npm@latest

This command will install the latest available npm package files on your system.

Step 7: Check “Node.js” and “npm” Versions

Next, you can confirm both versions of Node.js and npm with the “-v” option:

node -v && npm -v

During the installation, the latest available version of Node.js is 20.12.1 and npm is 10.5.1.

How to Install and Create a ReactJS Application on Ubuntu 22.04?

With just a few steps presented below, you can install and start a ReactJS application on your Ubuntu 22.04 machine.

Step 1: Install ReactJS using “npm”

Upon installing the prerequisites on your Ubuntu machine, now your system is ready to install the ReactJS package using Node Package Manager (npm):

sudo npm install -g create-react-app

The command installed ReactJS globally on your machine, which allows you to use it to create new React projects from anywhere in your terminal.

Step 2: Verify ReactJS Version

Check the installed version of ReactJS via the command:

create-react-app --version

Currently, you have the latest version of ReactJs 5.0.1 on your Ubuntu 22.04 operating system.

Step 3: Create React Application (my_app)

Utilized the “create-react-app” followed by your app name, such as my_app, to create ReactJS application:

sudo create-react-app my_app

After establishing a new ReactJS app with the name “my_app”, you will receive a few recommended commands, for instance, npm start, which starts the development server.

Step 4: Navigate to ReactJS App (my_app)

Let’s begin to start the ReactJS application by entering into the “my_app” directory, a newly created app:

cd my_app

Step 5: Run Your ReactJs Application

Execute the command in the “my_app” directory to run the development server for a ReactJS application:

sudo npm start

In return, you will get the following links to view your application in the browser:

Finally, copy the created link to the web browser and view your my_app application:

http://localhost:3000

If you see the ReactJS logo, as shown above, indicating that the ReactJS has been configured on your Ubuntu 22.04 machine.

Conclusion

Installing ReactJS on your Ubuntu 22.04 machine is simple by following a few commands. For ReactJS, you will need to install the Node.js package using the Node.js Repository and after that, install the ReactJS package using Node Package Manager (npm) via the command “sudo npm install -g create-react-app”.

Finally, run the command “sudo npm start” to start your ReactJS application on your Ubuntu 22.04 machine.