How to install ReactJS on Ubuntu 20.04 LTS Focal Fossa

In this article, I will give you a complete guide to set up the environment for getting started with ReactJS in your local machine.

ReactJS is an open-source JavaScript library used for building the user interface, maintained by Facebook and the community of developers. ReactJS can be used in the development of Web Applications or Mobile Apps.

In React (also known as ReactJS), data is rendered to the DOM, and to run the React Application, and it requires additional libraries for state management and routing. Some examples of such libraries are Redux and React Router.

---

Getting Started with ReactJS

---

System Requirements

• Ubuntu 20.04
• 4 GB RAM (Minimum 2 GB)
• 10 GB Free Space

Installation Procedure

For installing React in your system, you should first need to know about npm and understand why do we need them.

What is npm and Why we need npm for react development?

npm stands for Node Package Manager, npm is the world’s largest opensource software registry, containing over 800,000 code packages. npm is free to use, and any npm public software can be downloaded and used without any registration and login.

npm is a dependency management tool for javascript application, which helps to install all the libraries and other tools to support the development of JS application.

Now, Let’s start with the installation of npm, and we will go further to React Application.

To install React Application on your system, follow these steps:

Step 1: Installing npm

For installing npm in your system, run the following command in terminal:

$ sudo apt install npm

After installing npm in your system, check the version  of npm and node installed in your system but using the power below:

$ npm -v

then, you will see the result below:

ananta@fosslovers:~$ npm -v
6.14.4

The version of the npm installed depends upon the date of installing as the update release is done frequently but make sure to have npm installed of version greater than 5.

$ node -v

after running above command on the terminal you will get the following result:

ananta@fosslovers:~$ node -v
v10.19.0

Note that the version of the node installed in your system is greater than 10.

 If you don’t have the latest version of npm installed in your system, you can upgrade Node Package Manager (npm) to the latest version by running following command in terminal:

$ sudo npm install -g npm@latest

or, you can upgrade to the most recent release by running the following command:

$ sudo npm install -g npm@next

Step 2: Installing create-react-app

We will need to configure tools like babel, webpack, etc. for the productive react development environment which is complex to configure for beginners in the world of React. We can find several tools that will help to configure but among them, create-react-app is the easiest and finest tool to configure.

We can install create-react-app using npm. For this, you need to run the following installation command in terminal:

$ npm install -g create-react-app

After the create-react-app is installed in your system, you can check the version of create-react-app in your system by running the following command:

create-react-app --version

And you will get the following result (The version of create-react-app installed in your system may differ according to the date of installation)

ananta@fosslovers:~$ create-react-app --version
v3.4.1

Step 3: Creating the first React App

React App can be created simply using the create-react-app installed using the following command

$ create-react-app my-first-app

The command above creates a React App named my-first-app, where a new folder named my-first-app is created including all the files, setups, and necessary libraries within that folder.

Step 4: Running the React App

Once the React project is created, navigate into the project directory and run the react application using the following command via terminal:

 $ npm start

npm start commands starts development sever which will perform all the build process and opens browser and loads the application which will run at http://localhost:3000 by default. You will see the following windows opened in your browser with a beautiful React Logo and texts.

Uninstall create-react-app and npm

You can uninstall any library installed from npm using the npm uninstall command. You run the following command to uninstall create-react-app:

$ npm uninstall -g create-react-app

Similarly, you can uninstall npm using the following apt command:

$ sudo apt remove npm

Conclusion

Hurray!! Congratulations, I hope you have learned the method on How to Install React Application on Ubuntu 20.04 LTS Focal Fossa. If you have any questions, suggestions, feedback please don’t hesitate to write them in the comment box below because it will help us to improve or correct our contents. Thanks, Happy FOSS Computing. 

Read More: “How to install LAMP stack on Ubuntu 20.04 LTS Focal Fossa”