How to run React in Visual Studio Code

How To Run React In VSCode (Windows tutorial but most of it applies to Mac OSX and Linux)

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. To understand how it works you can watch this video tutorial:

How to run React.js APP in Visual Studio Code

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.

So how do you run React in VSCode?

First you need to download and install NodeJS.

This will give you access to running node command in your CLI.

CLI is Command Line Interface. (Terminal, bash or cmd.exe on Windows.)

NodeJS also includes npm and npx commands.

Once Node is installed go to Start button on Windows.

Type “environment variables” and click Open button.

In your Environment Variables, find PATH variable and add C:\nodejs folder to it. (Or whatever path you installed NodeJS to.)

Now go to Start button again, type cmd and hit enter. (or open Terminal on a mac.)

Type:

node --version

To verify if your Node has been successfully installed.

If it was, this command will output Node version.

Next type:

npm --version
npx --version

To verify npm and npx are available. (It was installed together with Node)

If you see NPM’s version, you’re ready to create your new React app.

Navigate to the directory where you want to create your React app.

For example:

c:\projects\react\

To create a new React app in this directory from command line type:

npx create-react-app yourAppName

Here yourAppName can be anything you want to name your app.

Hit enter and wait until your React app is setup.

If no errors were present while creating react app, type:

npm start

This will start your newly created React app on localhost.

You can now open localhost:3000 in your browser’s address bar and see your React App running live in your browser.

As you can see, you don’t even need Visual Studio Code to run React.

You can edit your currently-running React app in any editor.

The cool thing is soon as you change your React app files, the app will automatically restart in your browser, without you having to refresh it.

Opening React app in VSCode

But since Visual Studio Code is one of the best (if not the best) editors and IDE’s around, you might want to learn how to open your React app for editing in VSCode.

Open your VSCode editor. And go to File > Open Folder.

Remember how we created our React app in c:\projects\react\youtube?

Find this location in VSCode’s File navigator.

Click on the youtube folder (or whatever your project folder is.)

And click [Select Folder] button. Your React project will load in VSCode.

Modify your App.js file by changing it to:

const Hi = () => {
  return (
    <div>Hi there.</div>
  )
}
function App() {
  return (
    <div className="App">
      <Hi />
    </div>
  );
}
export default App;

Save the file by pressing Ctrl + S, (or command + S on a mac.)

And your React app will update in browser:

Example of a blank React app running in Visual Studio Code.

So this is the clean slate app you can now start shaping into anything you want.

Here’s an overview of the React video tutorial’s table of contents:

How to run your first React.js app in VSCode.

This video tutorial I created explains the step by step process

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!