Setting Up a React Project

The recommended ways to start a React app today are a framework (Next.js, React Router framework mode) or a build tool like Vite for a client-side app. npm create vite@latest my-app -- --template react-ts scaffolds React with TypeScript, a dev server with hot module replacement and an optimized production build. main.tsx mounts the root component with createRoot, and <StrictMode> runs extra development checks (double-invoking renders and effects to surface bugs).

// src/main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";
import "./index.css";

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

// src/App.tsx
export function App() {
  return <h1>Hello, React</h1>;
}

// src/main.jsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";
import "./index.css";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

// src/App.jsx
export function App() {
  return <h1>Hello, React</h1>;
}

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

Common pitfalls

• Using Create React App for new projects — it's deprecated.
• Being surprised that effects run twice in development under StrictMode (intentional, to catch missing cleanups).
• Putting secrets in VITE_* env variables — they're bundled into client code.

Key points

• Vite or a framework to start
• StrictMode surfaces bugs in development
• Client env variables are public

Further reading: react.dev: Creating a React app