How to Run a React App Locally: Step-by-Step Guide (2026)

To run a React app locally, install Node.js, create a project with Vite (or clone an existing repo), install dependencies with npm install, and start the dev server with npm run dev. Your app will be available at http://localhost:5173 (Vite) or http://localhost:3000 (Next.js). The entire process takes under five minutes.

This guide walks you through every step — from installing prerequisites to running, customizing, and preparing your React application for deployment. Updated for 2026 with Vite as the recommended build tool (replacing the now-deprecated create-react-app).

Want to visually build your React UI before writing code? UXPin Merge lets you drag and drop real React components from libraries like MUI and Bootstrap, then copy the JSX output directly into your project. Try it free.

Prerequisites

Before running a React app locally, you need two things installed on your machine:

Node.js and npm

Node.js is the JavaScript runtime that powers React’s development tools. npm (Node Package Manager) comes bundled with it and manages your project’s dependencies.

1. Download the LTS version from nodejs.org.
2. Run the installer for your operating system (Windows, macOS, or Linux).
3. Verify the installation by opening your terminal and running:

node -v
npm -v

Both commands should return version numbers. If you see errors, restart your terminal or reinstall Node.js.

A code editor

Visual Studio Code is the most popular choice for React development. Install helpful extensions like ESLint, Prettier, and the ES7+ React/Redux/React-Native snippets extension for a smoother workflow.

Option 1: Create a New React App With Vite

Vite is the recommended way to start a new React project in 2026. It’s faster than the now-deprecated create-react-app and provides instant hot module replacement (HMR).

Step 1: Create the project

Open your terminal and run:

npm create vite@latest my-react-app -- --template react

This creates a new directory called my-react-app with a React + Vite project structure. For TypeScript support, use --template react-ts instead.

Step 2: Install dependencies

cd my-react-app
npm install

Step 3: Start the development server

npm run dev

Your app is now running at http://localhost:5173. Open this URL in your browser to see the default Vite + React welcome page. Changes you make to the code will instantly appear in the browser thanks to hot module replacement.

Step 4: Stop the server

Press Ctrl + C in your terminal to stop the development server at any time.

Option 2: Run an Existing React Project

If you’re working on an existing project (from Git, a teammate, or a tutorial), follow these steps:

Step 1: Clone the repository

git clone https://github.com/username/project-name.git
cd project-name

Step 2: Install dependencies

npm install

This reads the package.json file and downloads all required packages into the node_modules directory.

Step 3: Start the development server

Check the scripts section of package.json for the correct command. Common options:

npm run dev        # Vite projects
npm start          # CRA or custom setups
npm run develop    # Gatsby projects

Understanding the React Project Structure

A typical Vite + React project contains:

• src/ — your source code. This is where you write components, styles, and application logic.
• src/App.jsx — the root component that renders your application.
• src/main.jsx — the entry point that mounts your React app to the DOM.
• public/ — static assets (images, fonts, favicon) served as-is.
• index.html — the HTML template. Vite uses this as the entry point.
• package.json — project metadata, scripts, and dependency list.
• vite.config.js — Vite configuration for build settings, plugins, and dev server options.
• node_modules/ — installed dependencies (never edit this directory).

Customizing Your React App

Open src/App.jsx in your code editor. Replace the default content with your own:

function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
      <p>Your local development server is running.</p>
    </div>
  );
}

export default App;

Save the file, and the browser updates instantly — no manual refresh needed.

Troubleshooting Common Issues

Building for Production and Deployment

When you’re ready to deploy, create an optimized production build:

npm run build

This generates a dist/ folder with minified, optimized files ready for hosting. Deploy to any static hosting service:

• Vercel — connect your Git repo for automatic deployments.
• Netlify — drag and drop your dist folder or connect Git.
• GitHub Pages — free hosting for static sites.
• AWS S3 + CloudFront — for enterprise-scale deployments.

Using Environment Variables

Store sensitive configuration (API keys, endpoints) in a .env file at your project root:

VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My React App

Access them in your code with import.meta.env.VITE_API_URL. In Vite, only variables prefixed with VITE_ are exposed to your application.

Next Steps After Running Locally

• Learn React fundamentals — understand how React works with components, state, and hooks.
• Add routing — use React Router for multi-page navigation.
• Connect to an API — fetch data from external services to make your app dynamic.
• Set up a design system — install a React component library like MUI or shadcn/ui for consistent UI elements.
• Prototype before coding — use UXPin Merge to visually assemble your UI with real React components and export the JSX.

Design React UIs Visually With UXPin Merge

Before writing a single line of code, you can prototype your React application’s UI using UXPin Merge. Drag and drop real React components onto a canvas, configure their props, and see how they behave with actual interactivity — not static mockups.

When you’re satisfied with the layout, export the production-ready JSX and drop it straight into your local React project. It’s the fastest way to go from idea to running code.

With UXPin Forge, you can even describe what you want in natural language, and the AI generates a working interface from your production component library. Start your free trial.

Frequently Asked Questions

What is the fastest way to create a React app in 2026?

Use Vite: run npm create vite@latest my-app -- --template react, then cd my-app && npm install && npm run dev. Your app will be running locally in under a minute. For full-stack apps, use Next.js: npx create-next-app@latest.

Is create-react-app still supported?

Create-react-app (CRA) is no longer actively maintained and is not recommended by the React team for new projects. Migrate existing CRA projects to Vite or a framework like Next.js for better performance and continued support.

What port does a React dev server use?

Vite uses port 5173 by default (http://localhost:5173). CRA and Next.js use port 3000. You can change the port in your configuration or by passing a flag like --port 3001.

Do I need Node.js to run React?

You need Node.js for development — it powers npm, your build tools, and the dev server. In production, a React app is just static HTML, CSS, and JavaScript files that run in the browser without Node.js.

How do I fix “npm start” not working?

Check that you’re in the correct project directory, that node_modules exists (run npm install if not), and that your package.json has a valid “start” or “dev” script. Check the terminal error output for specific messages. Port conflicts are another common cause — kill other processes using the same port.

Can I run multiple React apps locally at the same time?

Yes. Each app needs a different port. Start the first app normally, then start the second with a different port: npm run dev -- --port 3001. You can run as many apps as your system resources allow.