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 Node.js on anUbuntu system
- Updating NPM
- Creating a new React project
- Running the React application
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.
