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 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]


Comments