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.
Here I am going to explain the installation and set up of a React App on the Ubuntu platform.
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 of
create-react-app, we can create our first React application using it.
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.
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.
Have a nice code!