In this article, I will give you a complete guide to set up the environment for getting started with ReactJS in your local machine.
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.
Getting Started with ReactJS
- Ubuntu 20.04
- 4 GB RAM (Minimum 2 GB)
- 10 GB Free Space
For installing React in your system, you should first need to know about npm and understand why do we need them.
What is npm and Why we need npm for react development?
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.
Now, Let’s start with the installation of npm, and we will go further to React Application.
To install React Application on your system, follow these steps:
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:
ananta@fosslovers:~$ 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:
ananta@fosslovers:~$ 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:
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)
ananta@fosslovers:~$ 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
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. Thanks, Happy FOSS Computing.
Ananta Mishra is a frontend developer and a creative graphics designer with experience in several designing platforms. He likes to be involved at different stages of a digital project, from the seed of the idea, through to sketches, design, and even the front-end and WordPress build.