Get Started

# ===== 1. Create the project =====
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev
# Open http://localhost:5173

# ===== 2. The structure =====
# src/main.tsx       app entry
# src/App.tsx        root component
# index.html         single HTML
# vite.config.ts     build config

// src/App.tsx (replace contents)
import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <main style={{ padding: 24, fontFamily: 'system-ui' }}>
      <h1>React + Vite</h1>
      <button onClick={() => setCount(c => c + 1)}>
        clicks: {count}
      </button>
    </main>
  );
}

# ===== 3. Routing =====
npm install react-router-dom

// src/main.tsx
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import App from './App';
import About from './About';

const router = createBrowserRouter([
  { path: '/', element: <App /> },
  { path: '/about', element: <About /> },
]);
createRoot(document.getElementById('root')!).render(<RouterProvider router={router} />);

# ===== 4. Build for production =====
npm run build
# Output in dist/; static assets ready for any host.

# ===== 5. Next steps =====
# - Add a router (react-router-dom or @tanstack/router)
# - Add data fetching (@tanstack/react-query)
# - Add a UI kit (Mantine, Chakra, shadcn/ui)
# - Add a state lib if needed (Zustand, Jotai, Redux Toolkit)

# ===== Patterns to internalise =====
# - Vite for everything new; Next.js if you need SSR/SSG
# - TypeScript from day one
# - One UI kit per app; do not mix
# - Co-locate component, types, tests in a folder

# ===== Pitfalls =====
# - npm install in the wrong dir (look at your prompt)
# - Wrong Node version; use nvm / volta
# - Polluting global CSS; prefer scoped styles or CSS Modules
# - Skipping eslint + prettier; pay later

# Create a new React app
npm create vite@latest my-app -- --template react
cd my-app && npm install && npm run dev