How to Install ReactJS on Ubuntu 22.04

React (also known as React.js or ReactJS) is an open-source JavaScript front-end library for creating web frontend and UI components.

It is developed and maintained by the Facebook and a large community of developers. This is also useful for creating mobile applications.

In this tutorial you will learn to install and create ReactJS Application on a Ubuntu 22.04 OS.

Step 1: Update Operating System

Update your Ubuntu 22.04 operating system to make sure all existing packages are up to date:

$ sudo apt update && sudo apt upgrade -y

Step 2: Install Node.js

Node.js is required to create and run a ReactJS application.

The Node.js version included in the default Ubuntu 22.04 repositories is v12.22.9 which is an older TLS version.

We’ll install Node.js version 18.x (current stable version) on our Ubuntu OS.

Run the following command to download and execute the NodeSource installation script:

$ curl -sL https://deb.nodesource.com/setup_18.x | sudo bash - 

Next, run the following command to install the Node.js  and npm to your system:

$ sudo apt install nodejs

The nodejs package includes both the node and npm binaries.

Once done, verify the installation by running:

node -v 

Output
v18.4.0

npm -v

Output
v8.12.1

Step 3: Install ReactJS package

After installing the node and npm, you will need to install create-react-app in your system. It is a command-line utility used to create a ReactJS Application.

Run the following npm command to install the create-react-app utility:

$ sudo npm install -g create-react-app

Verify the installed version of create-react-app with the following command:

create-react-app --version

You should see the following output:

5.0.1

Step 4: Create A New ReactJS Application

You can create a ReactJS application with the following command:

$ sudo create-react-app myreactapp 

On successful application creation, you should see the following output:

Success! Created myreactapp at /home/react/myreactapp
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd myreactapp
  npm start

Happy hacking!

Step 5: Start ReactJS Application

Once you have created your application switch to that project and run npm start to start application.

cd myreactapp  npm start 

Once the application has started successfully, you should get the following output:

Compiled successfully!

You can now view myreactapp in the browser.

Local: http://localhost:3000
On Your Network: http://192.168.1.100:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

The default ReactJS application start on port 3000.

Step 6: Create a Systemd service

Next, it is a good idea to create a systemd service file to handle the ReactJS service. You can create it with the following command:

$ sudo nano /lib/systemd/system/react.service

Add the following lines:

[Unit]
After=network.target

[Service]
Type=simple
User=root
WorkingDirectory=/home/react/myreactapp
ExecStart=/usr/bin/npm start
Restart=on-failure

[Install]
WantedBy=multi-user.target

Save and close the file and then reload the systemd daemon with the following command:

$ sudo systemctl daemon-reload

Then start the ReactJS service and activate it at system startup with the following command:

$ sudo systemctl start react
$ sudo systemctl enable react

Then check the status of the ReactJS app with the following command:

$sudo systemctl status react

You should get the following output:

● react.service
     Loaded: loaded (/lib/systemd/system/react.service; enabled; vendor preset: enabled)
     Active: active (running)
   Main PID: 2101 (npm start)
      Tasks: 30 (limit: 2200)
     Memory: 140.0M
        CPU: 2.937s
     CGroup: /system.slice/react.service
             ├─2101 npm
             ├─2112 sh -c "react-scripts start"
             ├─2113 node /home/react/myreactapp/node_modules/.bin/react-scripts start
             └─2120 /usr/bin/node /home/react/myreactapp/node_modules/react-scripts/scripts/start.js

Step 7: Accessing ReactJS Web Interface

Once successfully installed, open your web browser using the URL http://your-ip-address:3000. You should see the React default page:

Conclusion

In this tutorial, you have learned, how to install ReactJS on your Ubuntu 22.04 system. You can now start developing your ReactJS application.

For additional information, you can check the official ReactJS website.