Complete React Installation For Windows

In this part, we will see React Installation for windows, There are actually two ways to do installation, but we will show you the easiest one method because other one is actually a little complicated, for that we need some download:

• Download NodeJS and install react NPM.
• Install any editor, either sublime or Visual Studio.
• Using NodeJS, install the create-node-app package.
• Create the app using create-react-app command.

Step:1 Download NodeJS and NPM

To install NodeJS you can go through this link https://nodejs.org/en/download/ in here, you should download LTS one because it’s the stable version for node. For NPM, we don’t require to download from anywhere else, you’ll find out it in NodeJS installation.

Here you can download any Windows file for node, but it will be easy if you download (.msi) file, just click on Windows installer then your download will start automatically.

As you can see, NPM package manager will be installed automatically after you hit next.

After finishing the all the steps in node installation, we just need to make sure that if node installed successfully or not, for that we need to go to command prompt.

Here, type the command node -v with this command you’ll get a version of node and type npm -v to get a version of npm. If the node and npm shows their version, that means node and npm successfully installed on your pc.

Step: 2 Install Any Editor

Now we have installed our node and npm then after we need an editor to write the code. Okay, so there are many editors available, but we recommend you to go with either sublime text or visual studios.

We will install here Visual Studio Code because it’s an easy editor, with no other mess, also with useful extensions, and again it’s a user-friendly editor.

You can download it with this link: https://code.visualstudio.com/, it is official site of Visual Studio, here we again recommend you to download stable version.

You just need to follow the steps given during installation, so nothing additional things to download in the visual code.

Step: 3 Install The create-node-app Package

Okay, now we need to install react and react-DOM using node. Remember, we are going to use node as environment for react.

C:\\Users\\mypc>npm install -g create-react-app

To install react, we just need to type npm install -g create-react-app, this command will install create-react app package globally which means you can make react application anywhere in your computer. This process will take some time, around 3-4 minutes.

Step: 4 Create The App Using create-react-app Command & react installation

Now we are in our final stage, here we will make an application using react to ensure react successfully installed.

C:\\Users\\mypc\\Desktop>mkdir react_tutorials

C:\\Users\\mypc\\Desktop>cd react_tutorials

C:\\Users\\mypc\\Desktop\\react_tutorials>create-react-app myapp

Foremost, we need to make a folder we used here mkdir command, but you can do it by making yourself that doesn’t actually matter much, then after you have to use this cd command to go in the folder then after we will use create-react-app <your folder name> this will install all required dependencies to run the application, you just have to wait for around 4-6 minutes, and if you get this “happy hacking” massage then your application is ready to edit. And lastly, we need to start the server for that type, the command npm start.

C:\\Users\\mypc\\Desktop\\react_tutorials>cd myapp

C:\\Users\\mypc\\Desktop\\react_tutorials\\myapp>npm start

Next, open the project in the downloaded editor to edit and to make our ‘hello world’ program.

React application has many files and folders located in the root directory. These are some of them:

1. Node_modules: This file contains the React library as well as any third-party libraries that are required.
2. Public It contains the public assets of this application. It includes the index.html, where React will mount it by default on the element.
3. Src This contains the App.css and App.js as well as App.test.js. The index.css and index.js files are also included. The App.js file is responsible for the display of the React output screen.
4. Package lock.json: This is automatically generated for operations in which npm packages modify the package.json or node_modules trees. It cannot be published. If it is found in any other location than the top-level package, it will be ignored.
5. Package.json This contains various metadata that are required to run the project. It provides information to npm that allows you to identify and manage the project’s dependencies.
6. README.md This document provides information about React topics.

React Environment Setup

Open the App.js folder and make any changes you wish to be displayed on the screen. Make the desired changes and save it. After saving the file, Webpack will recompile the code and the page refreshes automatically. Any changes made to the browser screen are immediately reflected in the browser. After Webpack has completed compiling the index.html files, you can now create as many components as you like.