Site icon CodeARIV

How to Install and Setup a React App on Ubuntu 20.04

Image is loading...

React is getting popular nowadays. Ubuntu, an open-source operating system based on Linux is also getting a lot of attention. It will be greater to work on React with the support of the Ubuntu operating system. Here, we will see the steps to install React on Ubuntu 20.04.

React is a powerful library to deal with complex projects in an easy manner. React Native, one of the most lovable hybrid mobile application development frameworks is also based on React.

I am not explaining a lot about React because I know that you need a quick guide for the installation of React.js on your Ubuntu system.

Prerequisites

I am assuming that the reader has a basic knowledge of Unix/Linux commands. Otherwise please refer to the article Basic Linux Commands for Beginners.

What we will learn?

Here in this article, we will learn the following things.

Install and Setup a React App on Ubuntu

Let us start with the installation of dependencies and tools to work with React on Ubuntu. After that, we will install the create-react-app tool for creating a new react project.

Note that, we are executing all the commands in the Terminal of our Ubuntu system

Install Nodejs

So we are going to set up React.js on our Ubuntu system. But it requires a server to run. The solution is Node.js. Node.js is an open-source server environment that uses JavaScript on the server.

This JavaScript runtime is built on top of Chrome’s V8 JavaScript engine, which is Google’s open-source high-performance JavaScript and WebAssembly engine.

So we need to install Node.js on our system first. 16.x is the current stable version of Node which is recommended for most users. Installation of Node.js 16.x can be done using the below command.

So open the Terminal on our system and paste the below command.

curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

Update NPM(optional)

Node Package Manager or simply NPM is the package manager tool for Node.js. Many professionals and organizations use this to share the packages they have developed.

create-react-app, a tool for creating React applications is shared under NPM. So we need the NPM tool to access it. We may also require it to install and use an NPM package required for our project.

All NPM packages used in our React application, are defined in a file, package.json.

Normally, NPM will be installed with the Nodejs itself. However, we can update it to the latest version using the below command.

sudo npm install npm@latest -g

Creating a New React Project

After the successful installation of Nodejs and NPM, we can create our first React application using the create-react-app tool. The below command will temporarily install the create-react-app tool on our system and create a new react project.

npx create-react-app awesome-project

Here, awesome-project is the name I have chosen for my React project.

Running the Application

After the successful creation of our React application, we can run it locally from our system.

Enter the project directory and execute npm start command.

cd awesome-project
npm start

It starts the React application on port 3000 and opens a new tab on our browser with the address below.

http://localhost:3000

Note:- If port 3000 is busy with another process, the app will start in port 3001 or any other port available.

Summary

So, in this article, we have discussed the steps for the installation of React.js on an Ubuntu system. These steps are verified by our team and 100% working.

Exit mobile version