How to Install Reactjs and Build an App on Ubuntu 20.04 LTS

Reactjs-Ubuntu on vpsie

Table of Contents

How to Install Reactjs and Build and App on Ubuntu 20.04 LTS

React is a free and open-source library for creating user interfaces using UI components in JavaScript. This library is maintained by the Meta Foundation for Software Development as well as several companies and individual developers. For web and mobile apps, it is used to handle the view layer. In addition, React provides an interface that can be reused. React is a cool tool for web development, and as cool as it is, it’s very easy to learn. Learning it at the right time puts you at a higher advantage. You can easily learn NextJS or Remix if you want to advance your web development career with React. So let’s get started with installing react on Ubuntu.

For Ubuntu systems to be registered with VPSie, you need to create a VPSie account if you don’t have one already.

Our example is based on an Ubuntu instance with GUI installed. Here is a link that will guide you to installing Ubuntu’s GUI if you do not already have it installed.




Now open your terminal and run the following commands to update your system.



# apt-get update && apt-get upgrade -y







Step 1: Install Node Js






You can get the latest version of node js from the official website and download it. After downloading it follow the following commands:



VPSie Node js installation





Go to download folder:



# cd Downloads/





Run the following to create a directory with root folder:



# sudo mkdir -p /usr/local/lib/nodejs





Unzip and copy the downloaded file to the folder that we just created:



# sudo tar -xJvf node-v16.14.2-linux-x64.tar.xz -C /usr/local/lib/nodejs
VPSie Angular CLI installation






Now open the a file using the following command and add the lines given below.



# sudo nano ~/.profile





Lines to add:





export PATH=/usr/local/lib/nodejs/node-$VERSION-$DISTRO/bin:$PATH



After saving it run the following command:


# . ~/.profile


VPSie Angular CLI installation





Now check the versions:


# node --version
# npm --version


VPSie Angular CLI installation









Step 2: Install Yarn package Manager







Install the Yarn package manager by running the following command:



# sudo npm install -g yarn
Yarn installation





Step 3: Create Reactjs Application







Now that most of the setup has been done, you are ready to create your application. Run the following command to create your application: 



# yarn create react-app testapp



The ‘testapp‘ in the command is the name of the application. You can change the name to whatever you wish.




React application vpsie




A React application named “testapp” has been installed successfully. A directory called “testapp” has been created in file explorer. There you will find everything you need for your app development. App.js file can be found in SRC folder within that directory where you can build the application.




React application vpsie





Step 4: Execute the application







Run the following command to execute the application, First go to the app directory: 



# cd testapp/




Then, start your development server by running the following command:


# yarn start
React application vpsie





Also you can use the address http://{your-servers-ip}:3000





Once your application is ready for deployment, just create a production build. You can build your application using the following command. A new directory will be created called build just like testapp. Production files will be stored in that directory.



# yarn build
React application vpsie

Installing ReactJS and building an application have both been successful. Get started learning ReactJS and exploring coding. Hope you found this useful.

Share on