{"id":53016,"date":"2026-04-24T01:00:00","date_gmt":"2026-04-24T08:00:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=53016"},"modified":"2026-04-24T03:06:49","modified_gmt":"2026-04-24T10:06:49","slug":"how-to-run-react-app-loacally","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-run-react-app-loacally\/","title":{"rendered":"How to Run a React App Locally: Step-by-Step Guide (2026)"},"content":{"rendered":"
\"How<\/figure>\n

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

This guide walks you through every step \u2014 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<\/code>).<\/p>\n

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

Prerequisites<\/h2>\n

Before running a React app locally, you need two things installed on your machine:<\/p>\n

Node.js and npm<\/h3>\n

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.<\/p>\n

    \n
  1. Download the LTS version from nodejs.org<\/a>.<\/li>\n
  2. Run the installer for your operating system (Windows, macOS, or Linux).<\/li>\n
  3. Verify the installation by opening your terminal and running:<\/li>\n<\/ol>\n
    node -v\nnpm -v<\/code><\/pre>\n
    Both commands should return version numbers. If you see errors, restart your terminal or reinstall Node.js.<\/p>\n
    A code editor<\/h3>\n
    Visual Studio Code<\/a> 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.<\/p>\n
    Option 1: Create a New React App With Vite<\/h2>\n
    Vite is the recommended way to start a new React project in 2026. It’s faster than the now-deprecated create-react-app<\/code> and provides instant hot module replacement (HMR).<\/p>\n
    Step 1: Create the project<\/h3>\n
    Open your terminal and run:<\/p>\n
    npm create vite@latest my-react-app -- --template react<\/code><\/pre>\n
    This creates a new directory called my-react-app<\/code> with a React + Vite project structure. For TypeScript support, use --template react-ts<\/code> instead.<\/p>\n
    Step 2: Install dependencies<\/h3>\n
    cd my-react-app\nnpm install<\/code><\/pre>\n
    Step 3: Start the development server<\/h3>\n
    npm run dev<\/code><\/pre>\n
    Your app is now running at http:\/\/localhost:5173<\/code>. 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.<\/p>\n
    Step 4: Stop the server<\/h3>\n
    Press Ctrl + C<\/code> in your terminal to stop the development server at any time.<\/p>\n
    Option 2: Run an Existing React Project<\/h2>\n
    If you’re working on an existing project (from Git, a teammate, or a tutorial), follow these steps:<\/p>\n
    Step 1: Clone the repository<\/h3>\n
    git clone https:\/\/github.com\/username\/project-name.git\ncd project-name<\/code><\/pre>\n
    Step 2: Install dependencies<\/h3>\n
    npm install<\/code><\/pre>\n
    This reads the package.json<\/code> file and downloads all required packages into the node_modules<\/code> directory.<\/p>\n
    Step 3: Start the development server<\/h3>\n
    Check the scripts<\/code> section of package.json<\/code> for the correct command. Common options:<\/p>\n
    npm run dev        # Vite projects\nnpm start          # CRA or custom setups\nnpm run develop    # Gatsby projects<\/code><\/pre>\n
    Understanding the React Project Structure<\/h2>\n
    A typical Vite + React project contains:<\/p>\n