React Starter Template in 2026: Vite + Sensible Structure

This is a practical React starter template for 2026: how to scaffold a new React app with Vite, a clean folder structure to grow into, and the handful of libraries most real projects reach for. Create React App is deprecated, so this uses Vite — the modern standard — and reflects React 19 and the React Compiler.

Scaffold the project

Create a new React + TypeScript project with Vite, install dependencies, and start the dev server:

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

A sensible folder structure

Organize by feature as the app grows, with a few shared folders. This scales far better than dumping everything in components/.

my-app/
├─ public/
├─ src/
│  ├─ main.tsx           # app entry — mounts React
│  ├─ App.tsx            # root component + routes
│  ├─ routes/            # one folder per page/route
│  ├─ features/          # feature modules (each owns its components + logic)
│  ├─ components/        # shared, reusable UI (Button, Card, ...)
│  ├─ hooks/             # shared custom hooks (use*)
│  ├─ lib/               # api client, helpers, config
│  └─ styles/            # global CSS / tokens
├─ index.html
├─ package.json
└─ vite.config.ts

The entry point

src/main.tsx mounts your app. React 19 uses createRoot; wrap the app in your router and data provider here.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import './styles/global.css';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

A starter App component

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <main className="app">
      <h1>My App</h1>
      <button onClick={() => setCount((c) => c + 1)}>
        Count is {count}
      </button>
    </main>
  );
}

The libraries most projects add

Start minimal and add these as you need them — they’re the mainstream 2026 choices:

• Routing: React Router for pages and navigation.
• Server data: TanStack Query for fetching, caching and revalidation.
• Client state: Zustand when you need shared UI state.
• Forms: React Hook Form + Zod for forms and validation.
• UI + styling: Tailwind + shadcn/ui for components you own.
• Quality: ESLint + Prettier, and Vitest + Testing Library for tests.

Enable the React Compiler

The React Compiler (stable, v1.0) auto-memoizes your components at build time, so you can skip most manual useMemo/useCallback. Add its plugin and let it optimize for you.

# install the compiler plugin
npm install -D babel-plugin-react-compiler

// vite.config.ts — add it to the React plugin's Babel options
// react({ babel: { plugins: [['babel-plugin-react-compiler']] } })

Scripts you’ll use

npm run dev       # start the dev server (instant HMR)
npm run build     # production build to /dist
npm run preview   # preview the production build locally

Spin up a React project instantly in XCODX Studio — npm packages run in the browser, no local setup. See also best React libraries, the complete guide to React Hooks and React best practices.