React is getting popular noadays. Ubuntu, an open source operating system based on Linux is also getting a lot a popularity. It will be greater to work on React with the support of Ubuntu operating system. Here, we will see the steps to install React on Ubuntu 20.04.
Before directly stepping into the installation steps, lets look at an overview of react. It 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.
We can design interactive and beautiful User Interfaces(UIs) using React.js in record time. A React app can be divided into components. A component is simply the independent and reusable code block which contains its functions and view. A component’s data is stored in its state and the data from one component is passed to another component using props. React updates the right components when its data changes.
When analyzing the graph data, it’s clear that, popularity of React is going up.
We know that it’s impossible to explain all about React in a single paragraph. So I have already made an article which explains the complete features and benefits of React. I am sure that the article can help you a lot.
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.
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.
Let us start with the installation of dependancies and tools to work with React on Ubuntu. After that, we will install create-react-app tool for creating a new react project.
1. Install Nodejs
So we need to install Node.js on our system first. 12.x is the current stable version of Node which is recommended for most users. Installation of Node.js 12.x can be done using the below command.
So open our Terminal and paste the below command.
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - sudo apt-get install -y nodejs
2. 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 application 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,
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 [email protected] -g
3. Install Create-React-App Tool
So we have set up both Node.js and NPM in our system. Now we need can globally install the
create-react-app tool using NPM. This tool is used to create a new project in React. It works on macOS, Windows and Linux operating systems.
create-react-app on our system using NPM as global using the below command.
npm install -g create-react-app
4. Creating a New React Project
After the successful installation, we can create our first React application using it. Otherwise the
Here awesome-project is the name I have chosen for my React project.
An alternative method
So in step 3, I have explained the procedures to install
create-react-app tool and using it, we can create a new React application which I have explained in step 4.
But we have an alternative option using NPX. We know that NPM is a Node.js package manager. But with NPM 5.2 or later versions, we get an additional tool called NPX, which is an NPM package runner. Simply we can say that NPM manages all the Node.js packages and NPX executes the Node.js packages.
So if we are going with this alternative method, skip steps 3 and 4 and simply create a new React application with a single command which I have given below.
npx create-react-app awesome-project
Here NPX will temporarily installs
create-react-app tool and create a new react project named awesome-project.
5. 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
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.
Note:- If port 3000 is busy with another process, the app will start in port 3001 or any other port available.
Guys, how about a no-code tool?
I know this is a bit off-topic, but my friends at CodeDesign.app have opened their beta for the public. CodeDesign is a visual code-export tool and I personally loved it so far. If you sign up now, you could get a 1-year subscription worth 100USD. Click here to get started!
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.