Setting-Up-Environment-for-React

Setting up a development environment for React using Visual Studio Code (VS Code) and some more essential tools/extensions. Here’s a guide to help you get started.

Install Node.js and npm

React applications rely on Node.js and npm (Node Package Manager). If you haven’t already installed them, download Node.js by clicking on below download button. Install it just with default settings.

This will also install npm (Node Package Manager). It is a package manager for JavaScript that is widely used in the JavaScript ecosystem, including for installing and managing the development environment for React applications.

You can download nodeJS package by clicking on below button.

Download Node.js

Install Visual Studio (VS) Code

If you haven’t already, download and install Visual Studio Code, then click on below download button to download this tool from official website.

During installation, you should apply action as “Open With Code“. In this way, you will be easy to open an folder with VS code. By the way, this action will already be added as default settings.

Download VS Code

Create a React Application

Do following steps to create react based application on VS code.

1. Create a folder in your computer and open it with VS code. Note: Neither use white space nor capital letter nor first letter as digit in the folder name.
2. Open terminal window in VS code. Make sure that path of your current folder is shown.
3. Internet connection must be established before doing next steps.
4. Run below command, for react application using vite.
   • npm create vite@latest
   • When you run above command, then you will have to give your requirement for
     • Project Name (Note: neither use whitespace nor capital letter nor first letter as digit in project name)
     • Framework as “React”
     • Variant as “JavaScript”
5. When you run above command, then multiple files will be created in your created folder.
6. In your terminal, navigate to your React app’s directory using the cd command. For example, you will write following line in the terminal and hit enter.
   • cd yourappname
7. Run below commands. First command will install all dependencies and second command will run the application.
   • npm install
   • npm run dev

Your React development environment is now set up in Visual Studio Code, and you can start building your React applications. VS Code provides excellent support for JavaScript and React development, and with the right extensions, you can enhance your coding experience even further.

Error for NPM installation

If you face some error related to installation of “npm” in your system, then do below steps.

Note: Your PC user’s name must not contain white space. If so, then change it by installing new window.

Step 1: Run below command in CMD window.

npm install npm -g

Step 2: Add below path in your environment variable path

c:\Users\AppData\Roaming\npm

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

..

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

..

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

..

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

..