How to Install React.js on Ubuntu 22.04 or 20.04

ReactJS, or simply React, is a prominent open-source JavaScript library developed by Facebook, designed for crafting interactive user interfaces (UIs) for single-page applications. Understanding its distinctive features and advantages is crucial for developers aiming to install React.JS on Ubuntu 22.04 Jammy Jellyfish or its older stable release of Ubuntu 20.04 Focal Fossa and creating React.js applications.

Key Features of ReactJS:

• Virtual DOM: React utilizes a Virtual DOM to enhance performance by minimizing direct manipulations, facilitating efficient diffing and reconciliation processes.
• JSX Syntax: JSX, a syntax extension for JavaScript, allows developers to write code resembling HTML, simplifying the development process while enhancing code readability.
• Component-Based: With a focus on encapsulated components, React ensures code is reusable, maintainable, and easily testable, with each component managing its state.
• Unidirectional Data Flow: Implementing one-way data flow, React guarantees that changes in child structures don’t affect parent structures, leading to stable and easily debuggable code.
• Strong Community: With Facebook’s backing, React enjoys robust community support, frequent updates, and many resources.

Why Choose ReactJS Over Alternatives? ReactJS distinguishes itself from other JavaScript libraries and frameworks like Angular and Vue.js due to several factors:

• Performance Excellence: React’s Virtual DOM offers unmatched performance for dynamic and large-scale applications.
• Flexibility: Unlike Angular, which adheres to a rigid structure, React offers flexibility, allowing developers to select their preferred architecture, libraries, and tools.
• Accessible Learning Curve: Due to its focus on JavaScript and simplicity, React presents a more manageable learning curve than its counterparts.
• Seamless Integration: React can be effortlessly integrated into various projects, making it a preferred choice for diverse applications.

For those ready to integrate this powerful library into their development environment, the upcoming guide will meticulously walk through the steps to install React.JS on Ubuntu 22.04 Jammy Jellyfish or Ubuntu 20.04 Focal Fossa, covering installation from NodeSource and using npm for a smooth setup process.

Install Node.js on Ubuntu 22.04 or 20.04 For React.js

Step 1: Updating Your Ubuntu System

Before beginning installation, you must update your Ubuntu system to avoid potential conflicts and ensure all existing packages are current. To update your system, execute the following command:

sudo apt update && sudo apt upgrade

This command will fetch the latest versions of your system’s packages from the Ubuntu repositories and then upgrade your system to these latest versions.

Step 2: Install Initial Packages

Certain packages are necessary to facilitate the smooth installation of Node.js. We will install these using the apt package manager. The following command will install curl (a tool for transferring data using various protocols) and git (a distributed version control system):

sudo apt install curl git -y

Step 3: Import NodeSource Repository on Ubuntu

To install Node.js, we will be utilizing the NodeSource repository, which provides more up-to-date versions of Node.js compared to the default Ubuntu repositories. You can opt for either the current stable version or the latest Long-Term Support (LTS) version of Node.js.

The current version will have the most recent features, but the LTS version offers greater stability and is often a better choice for production environments. Depending on your preference, run one of the following commands to import the NodeSource repository:

Option 1 – Import Node.js – Current Version:

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

Option 2 – Import Node.js – LTS Version:

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

With the chosen NodeSource repository added to your system, you will need to run another update to ensure the system recognizes the new repository:

sudo apt update

Next, install Node.js with the following command:

sudo apt install nodejs

After installing, run the following command to verify the correct Node.js version and build:

node --version

This will output the version of Node.js currently installed on your system, confirming the success of your installation.

Install React.js on Ubuntu 22.04 or 20.04

With Node.js now installed on your Ubuntu system, we’re ready to proceed with the installation of ReactJS. ReactJS is a powerful JavaScript library for building user interfaces, particularly single-page applications requiring a fast response time.

Step 1: Update NPM Before Proceeding with React.js Project

The Node Package Manager (NPM), bundled with Node.js, is an essential tool for JavaScript developers. It enables installing, updating, and managing various software packages in Node.js. Updating NPM to its latest version is a crucial initial step in the installation process.

Run the following command to update NPM to its latest version:

sudo npm install npm@latest -g

The -g flag in this command denotes that NPM should be updated globally across your system. This step guarantees that all subsequent npm commands you execute use the latest package manager version, optimizing efficiency and reducing potential issues.

Step 2: Install React.js on Ubuntu 22.04 or 20.04 via NPM (Create New React App)

Now, you can use the Create React App command-line tool to install ReactJS and create a new React app. This utility allows for the quick setup of new single-page React applications without any build configuration. Install it using the following command:

sudo npm install -g create-react-app

This command will install Create React App globally on your system.

Create First React.js Project on Ubuntu 22.04 or 20.04

After successfully installing ReactJS on your Ubuntu system, we now venture into an exciting part of our journey – creating your first ReactJS project.

This hands-on activity equips you with a practical understanding of ReactJS and its functionalities.

Step 1: Initializing Your ReactJS Project with Ubuntu

The first thing we need to do is initialize a new ReactJS project. We use a command-line tool called ‘Create React App’ for this. This utility, provided by Facebook, simplifies creating a new React application by automatically configuring the build setup for you.

Run the following command to create a new project. Replace ‘my-app’ with the name you want for your project:

npx create-react-app my-app

The npx command executes the Create React App package without installing it globally. This command creates a new directory with the name you specified (‘my-app’ in this case), and within this directory, it sets up a new React application.

Step 2: Navigate to New React.js Project Directory on Ubuntu

After creating your new React project, the next step is to navigate into your newly created project directory. We do this using the cd (change directory) command. This command allows us to move into different directories in our system from the terminal.

Navigate into your new project directory by executing:

cd my-app

Now you are within the project directory of your new React application. You can run various commands to manage and manipulate your React application here.

Step 3: Start React.js Project on Ubuntu

With your new project ready, it’s time to start and see the fruits of your labor. This is achieved by running a simple npm command.

To start your new React application, run the following commands:

npm run build

npm start

Upon executing this command, a development server gets launched. This server watches for any changes in your project files and automatically refreshes your application, providing real-time updates as you develop your application. Your new React application should now be accessible in your web browser at http://localhost:3000.

Create Systemd Service for Your ReactJS Application on Ubuntu 22.04 or 20.04

In this part of our journey, we’ll set up a systemd service for our ReactJS application. Systemd is a system and service manager for Linux operating systems, and it has become the de-facto initialization daemon for most new Linux distributions. This step is crucial to ensure our application can run persistently, even after a system reboot, crash, or even the terminal session ends.

Step 1: Create a Systemd Service File on Ubuntu for React.js

Our first task is to create a systemd service file for our ReactJS application. The service file tells systemd how to manage and interact with our application.

We’ll use a text editor such as nano to create the service file. Execute the following command to create and open the service file (replace ‘my-app’ with the name of your application):

sudo nano /etc/systemd/system/my-app.service

This command opens the nano text editor and creates a new file named ‘my-app.service’ in the ‘/etc/systemd/system’ directory.

Step 2: Configure Systemd Service File for React.js Project on Ubuntu

With the service file open in the text editor, we need to input some specific details about our ReactJS application. Below is an example of what your systemd service file should look like:

[Unit]
Description=My ReactJS App
After=network.target

[Service]
ExecStart=/usr/bin/npm start
WorkingDirectory=/path/to/my-app
User=username
Group=usergroup
Restart=always
RestartSec=3
Environment=PATH=/usr/bin:/usr/local/bin
Environment=NODE_ENV=production
Environment=PORT=3000

[Install]
WantedBy=multi-user.target

In this file, replace ‘/path/to/my-app’ with the actual path to your ReactJS application, and replace ‘username’ and ‘usergroup’ with your username and usergroup respectively. The Environment lines set up the necessary environment for your application to run correctly.

Step 3: Enable and Start React.js APP Service on Ubuntu

Once you’ve correctly configured your systemd service file, save and exit the text editor. We need to inform systemd about our new service and instruct it to start the service upon system boot.

To enable and start your service, execute:

sudo systemctl enable my-app
sudo systemctl start my-app

The systemctl command is a utility which is used to introspect and control the state of the systemd system and service manager.

Finally, verify that your service is running with the following command:

sudo systemctl status my-app

This command should output information about your service, including its current status. If it’s running correctly, you should see ‘active (running)’ in the output.

Closing Thoughts

This guide walked you through the process of setting up ReactJS on Ubuntu Linux, starting with the installation of Node.js and npm. We then installed create-react app to ease the initiation of new ReactJS projects and verified the setup with a test application. A systemd service was also created to ensure the ReactJS application runs persistently, even after system reboots or failures. This foundational guide is just a starting point, as mastering ReactJS and its interaction with the Linux environment requires continuous learning.