How to Run an Existing React Project as a React App in VS Code: A Complete Guide

To run an existing React project in VS Code, clone the facebook/react repository, install dependencies with yarn install, and execute npm start to launch the webpack-dev-server with hot-module replacement at http://localhost:3000.

The facebook/react repository is a monorepo that contains the core React library, React DOM, and development tooling. When you open this codebase in VS Code, you gain access to a fully configured development environment with debugging support, IntelliSense, and integrated task running. This guide shows you exactly how to run an existing React project as a React app in VS Code using the official repository structure.

Understanding the Repository Structure

Before running the project, you need to understand how the facebook/react codebase is organized. The repository uses a monorepo architecture managed by Yarn workspaces.

Workspace Root and Monorepo Configuration

The root package.json defines the workspace boundaries and shared scripts. Located at the repository root, this file declares dependencies for the entire project and maps the workspace packages under the packages/ directory.

When you run yarn install from the root, Yarn creates symlinks in node_modules/ for each local package (react, react-dom, react-reconciler), allowing them to reference each other during development.

Package Architecture

Each functional unit lives under packages/ with its own source and build configuration:

• packages/react/src/React.js – Contains the core public API including React.createElement and hook implementations
• packages/react-dom/ – Houses the DOM renderer and the createRoot API found in packages/react-dom/src/client/ReactDOMClient.js
• scripts/start.js – The development server entry point that configures webpack-dev-server with hot-module replacement (HMR)

The build pipeline, defined in scripts/build.js, transpiles Flow and TypeScript source into distributable ES modules with source maps for debugging.

Step-by-Step Guide to Running the Project in VS Code

Follow these exact steps to run an existing React project as a React app in VS Code.

Clone and Install Dependencies

Open your terminal and clone the repository, then open it in VS Code:

git clone https://github.com/facebook/react.git
cd react
code .

Enable Corepack to ensure Yarn Berry is available, then install dependencies:

corepack enable
yarn install

This command resolves all intra-repo dependencies and creates the necessary symlinks between packages.

Launch the Development Server

Start the development environment using the integrated terminal or VS Code's Run menu:

npm start

The scripts/start.js file executes automatically, launching webpack-dev-server on http://localhost:3000. This server:

• Detects the active example app (typically located in packages/react/src/__examples__/)
• Enables hot-module replacement so changes reflect instantly without full page reloads
• Generates source maps that map compiled code back to original source files in packages/react/src/

VS Code may automatically open your browser to the local server URL, or you can navigate there manually.

Configure VS Code Debugging

The repository includes pre-configured debugging settings in .vscode/launch.json. To attach the debugger:

1. Ensure the dev server is running (npm start)
2. Press F5 or select Run → Start Debugging
3. Select "Launch Chrome against localhost" from the configuration

This configuration launches Chrome with remote debugging enabled and attaches VS Code directly. You can set breakpoints in original source files like packages/react/src/React.js, and execution will pause correctly thanks to the source map configuration.

VS Code Integration Features

The facebook/react repository includes workspace-specific settings that optimize the development experience.

IntelliSense and Type Checking

The .vscode/extensions.json file recommends essential extensions including ESLint, Prettier, and Jest. The repository's tsconfig.json provides type checking for both JavaScript and Flow files.

Open .vscode/settings.json to see the configured validation rules:

{
  "javascript.validate.enable": false,
  "eslint.validate": ["javascript", "javascriptreact"]
}

Flow handles type validation instead of the built-in JavaScript validator, preventing false error warnings in VS Code.

Debugging with Chrome Extension

The Chrome debugging configuration in .vscode/launch.json uses these specific settings:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "trace": true
    }
  ]
}

With source maps enabled, breakpoints set in the editor map directly to the original TypeScript/Flow source rather than compiled bundles.

Task Runner Configuration

You can define custom tasks in .vscode/tasks.json to run npm scripts directly from the Command Palette. This creates single-click entry points for common operations like building specific packages or running the test suite.

Working with Examples and Source Code

The repository includes example applications demonstrating React features. Here is a typical component structure from packages/react/src/__examples__/hello-world/App.js:

import React from 'react';
import {createRoot} from 'react-dom/client';

function App() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>Clicked {count} times</p>
      <button onClick={() => setCount(c => c + 1)}>Click me</button>
    </div>
  );
}

const container = document.getElementById('root');
createRoot(container).render(<App />);

When you modify this file while the dev server runs, webpack's HMR system updates the browser instantly without losing component state.

Summary

• Clone and setup: Use git clone followed by corepack enable and yarn install to prepare the monorepo environment
• Start the server: Execute npm start to run scripts/start.js, which launches webpack-dev-server with HMR at http://localhost:3000
• Debug efficiently: Use the pre-configured .vscode/launch.json to attach VS Code to Chrome and debug original source files in packages/react/src/
• Leverage workspace settings: The repository's .vscode/settings.json and .vscode/extensions.json optimize Flow support and disable conflicting JavaScript validation

Frequently Asked Questions

Why does VS Code show errors in React's source files?

VS Code's default JavaScript validation conflicts with Flow types used in the facebook/react repository. The workspace settings in .vscode/settings.json disable JavaScript validation ("javascript.validate.enable": false) and rely on the Flow extension or ESLint for accurate type checking. Install the recommended extensions from .vscode/extensions.json to resolve these warnings.

How do I debug the actual React source code instead of my application?

Set breakpoints directly in packages/react/src/React.js or packages/react-dom/src/client/ReactDOMClient.js. The webpack configuration in scripts/start.js generates source maps that map the compiled bundle back to these original files. When you launch the debugger using the Chrome configuration in .vscode/launch.json, breakpoints in the core library source will trigger during execution.

Can I run specific packages instead of the entire monorepo?

Yes, use Yarn workspace commands to target specific packages. For example, yarn workspace react run build compiles only the core React package, while yarn workspace react-dom run build handles the DOM renderer. The dev server (npm start) typically runs example apps that import from these local workspaces automatically.

What port does the development server use, and how do I change it?

By default, scripts/start.js serves the application on port 3000. To change this, modify the webpack-dev-server configuration in scripts/start.js or set the PORT environment variable before running npm start. The .vscode/launch.json configuration must also update the url field to match your custom port for debugging to attach correctly.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}