Set Up a React Development Environment and Build Your First App

The fastest correct way to start a React project in 2026 is Vite. Open a terminal and run npm create vite@latest my-app -- --template react, install the dependencies, and start the dev server — you have a live, hot-reloading React app in under a minute. You will need a current Node.js LTS (Node 20 or 22), a package manager (npm ships with Node; pnpm is a fast alternative), and a code editor such as VS Code.

A note for anyone following older tutorials: Create React App (CRA) is deprecated. The React team officially stepped away from create-react-app in 2025, and the React documentation no longer recommends it. Do not start new projects with npx create-react-app. For a plain single-page app, use Vite; when you need routing, server-side rendering, or a full-stack setup, reach for a framework like Next.js or React Router (v7 / Remix).

This guide uses React 19 with function components and Hooks only — no class components, no lifecycle methods. We have shipped and maintained React frontends for 12+ years across 50+ delivered projects, and this is the exact setup we start new work with today.

Prerequisites: what to install first

Before you create a React app, get three things in place:

• Node.js (LTS). React tooling runs on Node. Install the current LTS release — Node 20 or Node 22 — from nodejs.org. Vite requires a modern Node version, so avoid anything older than Node 18.
• A package manager. npm is bundled with Node, so you already have it. pnpm and yarn are popular alternatives; pnpm is faster and disk-efficient. This guide shows npm commands with pnpm equivalents.
• A code editor. VS Code is the de facto choice for React. Add the ESLint and Prettier extensions for linting and auto-formatting as you type.

Confirm Node and npm are installed and recent before going further:

node -v
# v22.x.x   (any v20.x or v22.x LTS is fine)

npm -v
# 10.x.x

Create the app with Vite

Vite is the modern build tool for React single-page apps: instant dev-server startup, lightning-fast Hot Module Replacement (HMR), and an optimized production build. Scaffold a new project with the create vite command and choose the react template:

# npm  (the extra -- passes the template flags through npm)
npm create vite@latest my-app -- --template react

# pnpm
pnpm create vite my-app --template react

# then move into the folder, install dependencies, and start the dev server
cd my-app
npm install
npm run dev

Understand the generated files

Vite gives you a small, clear project. The files that matter most:

• index.html — the single HTML page Vite serves. Unlike CRA it lives in the project root (not public/), loads your app as an ES module pointing at /src/main.jsx, and contains the <div id="root"> element that React mounts into.
• src/main.jsx — the entry point. It finds #root and renders your app with React 18+'s createRoot API.
• src/App.jsx — your first component, and where you will spend most of your time.
• src/index.css / src/App.css — starter styles you can edit or delete.
• vite.config.js — Vite configuration, pre-wired with the official React plugin (@vitejs/plugin-react).
• package.json — your dependencies and the dev, build, and preview scripts.

Here is what src/main.jsx looks like — note the modern createRoot, not the old ReactDOM.render:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'

// React 18+ entry API. createRoot replaces the deprecated ReactDOM.render.
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Run the development server

Start the dev server with the dev script — note it is npm run dev, not npm start (that was CRA's command). Vite prints a local URL, usually http://localhost:5173. Open it in your browser.

The standout feature is Hot Module Replacement: save a file and the browser updates instantly, preserving component state where it can. Leave npm run dev running while you work, and stop it with Ctrl+C.

Your first component

Open src/App.jsx. App is a function component — a plain JavaScript function that returns JSX, the HTML-like syntax React uses to describe UI. Replace the generated contents with a simple greeting:

// src/App.jsx
function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>My first React app, powered by Vite.</p>
    </div>
  )
}

export default App

Notice there is no import React from 'react' at the top. Since React 17 the new JSX transform lets you write JSX without importing React directly, and Vite's template uses it by default. You only import what you actually use — for example the Hooks useState and useEffect.

Save the file and the browser updates automatically. That is your first React component on screen.

Add interactivity with the useState Hook

A static page is not why you reached for React. State is data that changes over time and re-renders the UI when it does. You read and update state with the useState Hook. The classic first interactive app is a counter:

// src/App.jsx
import { useState } from 'react'

function App() {
  // count is the current value; setCount updates it and triggers a re-render.
  const [count, setCount] = useState(0)

  return (
    <div>
      <h1>Hello, world!</h1>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </div>
  )
}

export default App

useState(0) declares a state variable starting at 0 and returns a pair: the current value (count) and a setter function (setCount). Clicking the button calls setCount, React updates the state, and the component re-renders with the new number. There is no manual DOM manipulation — you describe what the UI should look like for a given state, and React keeps the screen in sync.

Split the UI into components with props

Real apps are built from many small components. A component receives data from its parent through props — read-only inputs. Add a Greeting component and pass it a name:

// src/App.jsx
import { useState } from 'react'

function Greeting({ name }) {
  return <h2>Welcome, {name}!</h2>
}

function App() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <Greeting name="Ada" />
      <Greeting name="Grace" />
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </div>
  )
}

export default App

Greeting is reusable — render it as many times as you like with different props. Props flow one way, from parent to child. This component-and-props model is the foundation of every React app, from a landing page to a large dashboard.

Build for production

When you are ready to ship, create an optimized production bundle with npm run build. Vite outputs static assets to a dist/ folder — minified JavaScript and CSS with hashed filenames for long-term caching. Preview that production build locally with npm run preview before you deploy:

# create an optimized production build in dist/
npm run build

# serve the built app locally to sanity-check it before deploying
npm run preview

The contents of dist/ are plain static files. Deploy them to any static host — Netlify, Vercel, Cloudflare Pages, or Amazon S3 with CloudFront — or serve them from your own backend.

Vite vs Next.js vs Create React App

Which tool should you actually use? Short version: use Vite for single-page apps, Next.js for production web apps that need SSR or routing, and avoid Create React App entirely.

	Vite	Next.js	Create React App
Type	Build tool / dev server	Full-stack React framework	Legacy build tool
Best for	SPAs, dashboards, internal tools	SEO sites, SSR/SSG, full-stack apps	Nothing new — migrate away
Rendering	Client-side (CSR)	SSR, SSG, ISR, RSC + CSR	Client-side (CSR)
Routing	Add React Router yourself	Built-in file-based routing	Add React Router yourself
Dev server	Instant start, fast HMR	Fast (Turbopack)	Slow (Webpack)
Status in 2026	Actively recommended	Actively recommended	Deprecated

If you are unsure and just want to learn React or build an internal tool, start with Vite. If you are building a customer-facing product that needs server-side rendering, SEO, or API routes, start with Next.js.

Where to go next

You now have a running React app with components, state, and props. The usual next steps are:

• Routing / navigation. A real app has multiple screens. Add React Router for client-side navigation, nested layouts, and data loading.
• Fetching data. Load data from an API with fetch inside a useEffect, or use a data library such as TanStack Query for caching and revalidation.
• State management. useState and useContext cover most needs; reach for Zustand or Redux Toolkit only when shared state genuinely gets complex.
• Styling. Plain CSS, CSS Modules, or Tailwind CSS all work cleanly with Vite.

Building something production-grade and want experienced hands on it? We offer React development services and broader web development — 12+ years and 50+ delivered projects building and maintaining React frontends for startups and enterprises.

Frequently Asked Questions

Should I still use create-react-app?

No. Create React App is deprecated — the React team stepped away from it in 2025 and the official docs no longer recommend it. For a new single-page app, use Vite (npm create vite@latest). If you need routing, SSR, or full-stack features, use a framework like Next.js or React Router v7. Only keep CRA on existing legacy projects, and plan to migrate off it.

Should I use Vite or Next.js for my first app?

Use Vite if you are learning React or building a client-side single-page app such as a dashboard, internal tool, or widget — it is simpler and starts instantly. Use Next.js if you need server-side rendering, static generation, SEO, or built-in routing and API routes for a production web app. Both are actively recommended in 2026.

Do I need to import React to use JSX?

No. Since React 17 the new JSX transform lets you write JSX without import React from 'react', and Vite's React template is already configured for it. You still import the specific APIs you use, such as import { useState } from 'react'.

What Node.js version do I need for React and Vite?

Use the current Node.js LTS — Node 20 or Node 22. Vite requires a modern Node release, so anything older than Node 18 will not work. Check your version with node -v and update from nodejs.org if it is out of date.

Why is it npm run dev and not npm start?

npm start was the script Create React App defined. Vite names its dev-server script dev, so you run npm run dev. The script names are just entries in package.json — open that file to see exactly what dev, build, and preview run.

What is the difference between Vite and Create React App?

Both scaffold a client-side React app, but Vite uses native ES modules with esbuild and Rollup for near-instant startup and fast Hot Module Replacement, whereas Create React App used Webpack and was much slower. CRA is now deprecated and unmaintained; Vite is the actively recommended replacement for single-page apps.