Choosing a Starting Point
React itself doesn’t dictate a build setup. For learning and most new projects, Vite is the fastest and most popular way to start a plain React app — for full-stack apps with routing and server rendering built in, Next.js is the standard choice.
Creating a Project with Vite
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run devBasic Project Structure
A fresh Vite + React project includes a few key files worth knowing right away.
Key Files
| File | Purpose |
|---|---|
| index.html | The single HTML page the app is mounted into |
| src/main.jsx | The entry point that renders the root App component |
| src/App.jsx | The top-level component of your application |
| package.json | Project dependencies and npm scripts |
src/main.jsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
createRoot(document.getElementById("root")).render(
<StrictMode>
<App />
</StrictMode>
);How Rendering Gets Started
createRoot() attaches React to a DOM node (usually a single <div id="root"> in index.html), and .render() tells React what component tree to display inside it.
StrictMode
<StrictMode> is a development-only wrapper that helps catch common mistakes by intentionally rendering components twice and warning about deprecated patterns. It has no effect in production builds.
.jsx vs .js File Extensions
Files containing JSX syntax are conventionally given a .jsx extension (or .tsx in TypeScript projects) so tooling and editors recognize them correctly, though some build setups also accept JSX in plain .js files.
Best Practice
Use Vite for learning React itself or building a client-only app. Reach for Next.js once you need routing, server rendering, or a full-stack setup out of the box.