Hi there, Are you curious on How to install ReactJS on Ubuntu 20.04 LTS ?
In this article, I will give you a complete guide to set up the environment for getting started with ReactJS in your local machine.
ReactJS is an open-source JavaScript library used for building the user interface, maintained by Facebook and the community of developers. ReactJS can be used in the development of Web Applications or Mobile Apps.
In React (also known as ReactJS), data is rendered to the DOM, and to run the React Application, and it requires additional libraries for state management and routing. Some examples of such libraries are Redux and React Router.
Page Contents
Getting Started with ReactJS
System Requirements
- Ubuntu 20.04
- 4 GB RAM (Minimum 2 GB)
- 10 GB Free Space
Installation Procedure
For installing React in your system, you should first need to know about npm and understand why do we need them.
What is npm?
npm stands for Node Package Manager, npm is the world’s largest opensource software registry, containing over 800,000 code packages. npm is free to use, and any npm public software can be downloaded and used without any registration and login.
Why npm for React Development?
npm is a dependency management tool for javascript application, which helps to install all the libraries and other tools to support the development of JS application.
Now, Let’s start with the installation of npm, and we will go further to React Application.
Step by Step Process to Install ReactJS
Step 1: Installing npm
For installing npm in your system, run the following command in terminal:
$ sudo apt install npm
After installing npm in your system, check the version of npm and node installed in your system but using the power below:
$ npm -v
then, you will see the result below:
ranger@linx:~$ npm -v 6.14.4
The version of the npm installed depends upon the date of installing as the update release is done frequently but make sure to have npm installed of version greater than 5.
$ node -v
after running above command on the terminal you will get the following result:
ranger@linux:~$ node -v v10.19.0
Note that the version of the node installed in your system is greater than 10.
If you don’t have the latest version of npm installed in your system, you can upgrade Node Package Manager (npm) to the latest version by running following command in terminal:
$ sudo npm install -g npm@latest
or, you can upgrade to the most recent release by running the following command:
$ sudo npm install -g npm@next
Step 2: Installing create-react-app
We will need to configure tools like babel, webpack, etc. for the productive react development environment which is complex to configure for beginners in the world of React. We can find several tools that will help to configure but among them, create-react-app is the easiest and finest tool to configure.
We can install create-react-app using npm. For this, you need to run the following installation command in terminal:
$ npm install -g create-react-app
After the create-react-app is installed in your system, you can check the version of create-react-app in your system by running the following command:
create-react-app --version
And you will get the following result (The version of create-react-app installed in your system may differ according to the date of installation)
ranger@linux:~$ create-react-app --version v3.4.1
Step 3: Creating the first React App
React App can be created simply using the create-react-app installed using the following command
$ create-react-app my-first-app
The command above creates a React App named my-first-app, where a new folder named my-first-app is created including all the files, setups, and necessary libraries within that folder.
Step 4: Running the React App
Once the React project is created, navigate into the project directory and run the react application using the following command via terminal:
$ npm start
npm start commands starts development sever which will perform all the build process and opens browser and loads the application which will run at http://localhost:3000 by default. You will see the following windows opened in your browser with a beautiful React Logo and texts.
Uninstall create-react-app and npm
You can uninstall any library installed from npm using the npm uninstall command. You run the following command to uninstall create-react-app:
$ npm uninstall -g create-react-app
Similarly, you can uninstall npm using the following apt command:
$ sudo apt remove npm
Conclusion
Hurray!! Congratulations, I hope you have learned the method on How to Install React Application on Ubuntu 20.04 LTS Focal Fossa. If you have any questions, suggestions, feedback please don’t hesitate to write them in the comment box below because it will help us to improve or correct our contents.
Read More: How to install Tor on Ubuntu 20.04 LTS (Focal Fossa)
Fantastic. Needed to do this in a hurry and an overview required.
You wrote great directions. Thanks!
But it seems there’s something wrong with the files.
I googled it, others are getting the same message.
FYI, this is a clean install. I’m new to react.
Now I have no clue what to do.
I even uninstalled and reinstalled….hoping that might somehow fix it.
But nope.
There’s a period in there that shouldn’t be.
Copy and paste moved the carrot. But it’s right under the period right before the word config.
“ERROR:
/usr/local/lib/node_modules/npm/lib/utils/exit-handler.js:22
const hasLoadedNpm = npm?.config.loaded
^
SyntaxError: Unexpected token “.”