How To Install ReactJS on Ubuntu 20.04 LTS

In this tutorial, we will show you how to install ReactJS on Ubuntu 20.04 LTS. For those of you who didn’t know, React is an open-source JavaScript library for creating web frontend and UI components. It is developed and maintained by Facebook and a large community of developers. ReactJS can be used in the development of Web Applications or Mobile Apps.

This article assumes you have at least basic knowledge of Linux, know how to use the shell, and most importantly, you host your site on your own VPS. The installation is quite simple and assumes you are running in the root account, if not you may need to add ‘sudo‘ to the commands to get root privileges. I will show you through the step-by-step installation of the ReactJS on Ubuntu 20.04 (Focal Fossa). You can follow the same instructions for Ubuntu 18.04, 16.04, and any other Debian-based distribution like Linux Mint.

Prerequisites

• A server running one of the following operating systems: Ubuntu 20.04, 18.04, and any other Debian-based distribution like Linux Mint or elementary OS.
• It’s recommended that you use a fresh OS install to prevent any potential issues.
• A non-root sudo user or access to the root user. We recommend acting as a non-root sudo user, however, as you can harm your system if you’re not careful when acting as the root.

Install ReactJS on Ubuntu 20.04 LTS Focal Fossa

Step 1. First, make sure that all your system packages are up-to-date by running the following apt commands in the terminal.

sudo apt update
sudo apt upgrade

Step 2. Installing Node.js.

Now we add the Node.js PPA to your Ubuntu system:

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

Next, run the following command to install the Node.js:

sudo apt install nodejs

You can also install the Yarn package manager on your Ubuntu system:

npm install -g yarn

Step 3. Create a New React.js App.

You can create a React.js application using one of the following commands:

yarn create react-app myreactapp

On successful application creation, you will see a long result on the screen:

Success! Created reactproject at /opt/reactproject
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 reactproject
  npm start

Once you have created your React application. This will create a folder in the current directory with the project name. Switch to that project and run yarn start to start the application:

cd myreactapp
yarn start

Output:

Compiled successfully!

You can now view myreactapp in the browser.

  http://localhost:3000

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

Congratulations! You have successfully installed ReactJS. Thanks for using this tutorial for installing the ReactJS on your Ubuntu 20.04 LTS Focal Fossa system. For additional help or useful information, we recommend you check the official ReactJS website.