How to Install ReactJS on Ubuntu 18.04 | 20.04

In this article, we are going to shows that how to Install ReactJS on Ubuntu 18.04 | 20.04.

React is an open-source, front end, JavaScript library that is used for building interactive user interfaces or reusable UI components. With the help of ReactJS, you can create interactive elements on websites or mobile applications.

ReactJS was developed by Facebook in 2011 and maintained by Facebook and a community of open source developers and companies.

Ubuntu is a Linux Operating System based on Debian and mostly composed of non-profit(free) and open-source software. It is a complete Linux operating system that compatible with desktops, laptops, server and other devices. Ubuntu is Open Source so it is freely available for both community and professional support.

if you are a learner and looking for a Linux distribution for Learning then Ubuntu Linux Operating System is best for you as a beginning.

How to Install ReactJS on Ubuntu

Simply follow below steps to install ReactJS on your Ubuntu system:

Step 1 : Install Node.js

Node.js is a JavaScript runtime environment and it is a requirement for running React. Node.js runs on the V8 engine and executes JavaScript code outside a web browser.

 By default, the Node.js packages is not included in the Ubuntu standard repository. So you will need to install it from the Node.js official repository by running below commands:

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

Run the commands below to verify it’s version:

node -v

The command above show the Node.js version as below:

v14.16.0

After install Node.js, now run the command below to install Yarn package manager:

sudo npm install -g yarn

Step 2 : Create First React App

At this stage, you can create your React applications. Run the commands below to create your first React app called myfirstapp.

yarn create react-app myfirstapp

You can also create React project using commands below:

npx create-react-app myfirstapp
npm init react-app myfirstapp

When you run the above command, you will get a output similar as below:

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

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn 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 myfirstapp
  yarn start

Happy hacking!

Next, change the directory to your project and start your application by running command below:

cd myfirstapp
yarn start

After start your application, you will get the below output:

Compiled successfully!

You can now view myfirstapp in the browser.

  Local:            http://localhost:3000


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

yarn start command also opens a browser window and load application index as show below:

That’s all.

If you face any error and issue in above steps , please use comment box below to report.