React JS Setup, Installation and First React Project

 Hello everyone, today we will discuss the React JS Setup, Installation, and First React Project.



Step 1:Install Node.js

To check if node.js is installed on your system, type node -v in the terminal. This will help you see the version of node.js currently installed on your system.

sibinmuhammed@ladmin-knf:~$ node -v
v12.18.4

If it does not print anything, install node.js on your system. To install node.js, go to the homepage, https://nodejs.org/en/download/ of node.js, and install the package based on your OS.


Based on your OS, install the required package. Once node.js is installed, npm will also get installed along with it. To check if npm is installed or not, type npm –v in the terminal as given below. It will display the version of the npm.

sibinmuhammed@ladmin-knf:~$ npm -v
6.14.8


Step 2:create-react-app

We don't want to configure React manually, because it is complicated and takes a lot of time. create-react-app is a much easier way which does all the configuration and necessary package installations for us automatically and starts a new React app locally, ready for development.

Another advantage of using create-react-app is that you don't have to deal with Babel or Webpack configurations. All of the necessary configurations will be made by create-react-app for us.

In order to install your app, first, go to your workspace  and run the following command:

npx create-react-app my-app

The installation process may take a few minutes. After it is done, you should see a folder that appears in your workspace with the name you gave to your app.

Once it is successfully installed, You should get a similar output:


Step 3: Run the App 

After the installation is completed, change to the directory where your app was installed:

cd my-app

and finally, run npm start to see your app live on localhost: 

npm start

Open your browser and hit  http://localhost:3000/


If you see something like this in your browser, you are ready to work with React.

Step 4 - IDE for writing your code[Visual Studio Code]

Popular posts from this blog

Learn Java 8 streams with an example - print odd/even numbers from Array and List

Java Stream API - How to convert List of objects to another List of objects using Java streams?

Registration and Login with Spring Boot + Spring Security + Thymeleaf

Java, Spring Boot Mini Project - Library Management System - Download

ReactJS, Spring Boot JWT Authentication Example

Top 5 Java ORM tools - 2024

Java - Blowfish Encryption and decryption Example

Spring boot video streaming example-HTML5

Google Cloud Storage + Spring Boot - File Upload, Download, and Delete