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.
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.
So 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 on 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, we can skip steps 3 and 4 and simply create a new React application using 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
This will opens up the react application we have created in a new tab of our browser with the below URL.
Note:- If the port 3000 is busy with another process, the app will open up in port 3001 or any other port available.
Have a nice code!