CCelestiallines.com
← Back to blog

How to Install React

By Pawan Singh · Jun 2026

"Installing React" today almost always means scaffolding a full project with a build tool, not dropping a script tag on a page. Here's the current recommended path, what you actually get, and the tooling decisions worth understanding rather than just copy-pasting.

Requirements

You need Node.js and npm installed. Use the current LTS release (20.x or later) rather than whatever shipped with your OS package manager years ago — React's tooling (Vite, ESLint configs, TypeScript) moves fast enough that an old Node version is a common source of confusing install errors. Check with:

node -v
npm -v

Create a New React App with Vite

Vite is the current standard way to scaffold a React project. It replaced Create React App, which is deprecated and no longer maintained — don't start a new project with it in 2026.

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

This starts a dev server, typically at http://localhost:5173, with hot module replacement (HMR) enabled — edits to your components appear in the browser almost instantly without a full page reload or lost component state.

Adding TypeScript

For a TypeScript-based project, use the react-ts template instead of react from the start:

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

Retrofitting TypeScript onto an existing plain-JS Vite project later is also possible — rename .jsx files to .tsx, add a tsconfig.json (Vite's TS template ships one you can copy from), and install typescript and @types/react/@types/react-dom as dev dependencies — but starting with the right template avoids the migration entirely.

Project Structure

  • index.html — the actual HTML shell; unlike Create React App, this lives at the project root, not buried in public/, and Vite injects your bundled script directly into it
  • src/main.jsx — the entry point; calls ReactDOM.createRoot() and mounts your root component into the DOM, usually wrapped in <React.StrictMode>
  • src/App.jsx — the root component, where most people start building
  • public/ — static assets copied as-is to the build output (favicons, robots.txt), not processed by Vite
  • vite.config.js — build and dev server configuration, including the @vitejs/plugin-react plugin that enables JSX and Fast Refresh

Environment Variables

Vite only exposes environment variables to client code if they're prefixed with VITE_, and they're accessed via import.meta.env rather than Node's process.env:

// .env
VITE_API_URL=https://api.example.com

// in a component
const apiUrl = import.meta.env.VITE_API_URL;

This prefix requirement is deliberate — it stops you from accidentally bundling server-only secrets into a client-side JS file that ships to every visitor's browser.

Building for Production

npm run build
npm run preview

build outputs a static, optimized, minified bundle to the dist/ directory. preview serves that exact build locally so you can sanity-check the production output before deploying — it's not the same as npm run dev, which never minifies or tree-shakes. Deploying is then just uploading dist/ to any static host (Netlify, Vercel, Cloudflare Pages, S3, or a plain Nginx server).

If you're deploying under a subpath rather than a domain root (e.g. example.com/app/), set base: '/app/' in vite.config.js before building — otherwise every asset URL in the built index.html resolves from the root and 404s.

When You Need More Than a Client-Side App

Plain Vite + React gives you a client-rendered single-page app, which is fine for dashboards and internal tools but weak for public, SEO-sensitive pages since content only exists after JavaScript runs. If you need server-side rendering, static generation, or file-based routing, that's what a framework like Next.js is for — it's built on React but solves a different problem than "install React," so it's worth knowing the two aren't interchangeable answers to the same question.

Common Issues

  • Blank page after build, works fine in dev — almost always the base path in vite.config.js not matching where the build is actually deployed.
  • Node version errors during npm install — run node -v; anything older than Node 18 will fail on current Vite versions.
  • HMR not updating in the browser — check for a stray second dev server running on the same port, or a reverse proxy/VPN in between that's buffering the WebSocket connection Vite uses for live updates.
  • "process is not defined" errors — you're using Node's process.env convention instead of Vite's import.meta.env; they are not interchangeable.
  • TypeScript errors on files that used to work — usually a stale tsconfig.json after converting a plain-JS project; compare it against a freshly scaffolded react-ts template.

Need a React front end built or modernized? Get in touch — I work as a freelance React developer.

Related posts

Comments