How To Run React In VS Code (Visual Studio Code)

React doesn't really run directly in VSCode.

There is also no such thing as running a React "file" in VSCode or any other editor.

When developing a React app, React code runs locally on your localhost web server, which is provided by NodeJS environment.

What you're really looking for is to set up React "development environment" in VSCode.

In order to Run React in VSCode first you need to install Node (download Node here.)

Even if you execute React code from VSCode's terminal, you're pretty much still running it via NodeJS environment. The editor (Visual Studio Code) actually has nothing to do with it.

If your app was created following steps in this tutorial, every time you modify an existing file in your React app, it will automatically restart in your browser. But it's not because it's running in VSCode. This is called hot reload.

Hot reload is a feature available by default if you set up your React app to run in VSCode following steps in this tutorial. (Because create-react-app command we will execute will install webpack and other tools.)

So there really isn't such thing as running React files in VSCode, (or any other editor.)

It's an illusion created by your React build. Seems like it's running in VS Code, but Visual Studio Code plays no part in running a React app.

Create React App Using Node's NPX Command

• Install NodeJS
• Run npx create-react-app projectName (in this tutorial I used youtube for project name.)
• Once React app is created, go into projectName directory on command line.
• Execute npm start command

After following these steps, your React app will automatically open in your default browser.

By default React will run on port 3000. (But will suggest another port if 3000 is already taken by another currently running app.)

So the address of your React app running live should be http://localhost:3000.

Having said all this here is a video tutorial that will walk you step by step through the process of setting up your React App to work in VSCode. This will help you run and edit your React files in VS Code, with automatic refresh (hot reload), so you can focus on developing your app.

Here is the video I made explaining how to run React in Visual Studio Code:

Video chapters:

1. 00:00 How to install and run React in VSCode (intro)
2. 00:18 Installing NodeJS
3. 00:49 Set Environment Variables on Windows (to run Node globally)
4. 01:30 Check if NodeJS is installed (check node version)
5. 01:47 Create and Run First React JS App in VSCode
6. 02:15 Where to create a react project folder on command line
7. 02:42 Running npx create-react-app youtube command.
8. 03:09 Running npm start to start React server.
9. 03:24 Running Your First ReactJS App in browser on localhost:3000
10. 03:35 Open React App in VSCode
11. 04:22 Modifying App.js (main react application file)
12. 04:49 Creating a blank react app
13. 04:59 Breaking react app into components
14. 05:33 How to return and render component's HTML
15. 06:27 import { useState } from 'react';
16. 06:33 useState explained
17. 07:14 How to render a number in react
18. 07:27 How to add a button in react
19. 07:53 How to create a click function (component method in react)
20. 08:34 How to make button do something in react (onClick event)
21. 09:15 How to pass props in react
22. 10:29 How to destructure props in react
23. 10:57 Congrats!

But let's go over the process:

If you're searching for any of these phrases this tutorial might be for you:

1. how to run react app in vscode
2. how to run react app in visual studio code
3. how to run react app from visual studio code
4. how to run existing react app in visual studio code
5. how to run my react app in vs code
6. how to run react app locally
7. how to run react app from terminal
8. how to run react app on localhost
9. how to run react using npm

Automatic Refresh

From now on, every time any of the files inside /src folders are modified (in any editor, which can be something other than VSCode) your app will automatically reload in browser.

Using VSCode side by side with the browser running your React app is ideal.

Good luck coding your React application! :)