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. React is getting popular nowadays.
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.
Pre-requisites
I am assuming that you have a basic knowledge of Unix/Linux commands. Otherwise please refer to the article Basic Linux Commands for Beginners.
Outline
In this Article, We will see the all steps about How to install and setups the React js on your Ubuntu OS.
We will learn the following topics.
- Install Node.js and npm
- Updating npm
- Creating a new React project
- Running the React application
Install and Setup a React App
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. 18.x is the current stable version of Node which is recommended for most users. Installation of Node.js 18.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
Install / Update npm
In my previuse article, I already discuss about how to install npm on Linux system. Let’s check that for the clear explanation.
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-ap, 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
Let’s check the versions of Node and npm.
✔ node --version ✔ npm --version
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 first-react-project
Here, first-react-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 first-react-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.
I hope y’all understand and enjoy my article, keep in touch with my page….!