Create a React project with Vite

Let’s create a small Vite project so we can focus on React itself. Create React App is deprecated, and Vite is the straightforward choice for a learning setup today.

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

Vite prints a local URL, usually http://localhost:5173/. Open it and keep the terminal running while you edit.

The generated project gives the browser normal HTML, JavaScript modules, and CSS. Vite transforms JSX during development and creates optimized assets for production. React still runs in the browser. Vite is the toolchain around it.

Delete the demo content from src/App.jsx and start with this:

export default function App() {
  return <h1>React basics</h1>
}

Save the file and confirm the page updates to a single heading that says React basics.

This setup is good for learning the library directly. For a production application, a framework can also decide how routing, data loading, server rendering, and deployment work. Choose that architecture from the product’s needs rather than treating a bare Vite app as the answer to every React project.

The project also includes src/main.jsx, which mounts React onto a DOM node in index.html. You rarely edit those files during the basics lessons, but it helps to know where the app starts.

Hot module replacement means most edits update the page without a full reload. If state disappears after a save, you may have edited the module that owns that state.

Node 18 or newer is a practical minimum for current Vite and React tooling. Check node -v if install or dev commands fail immediately.

If the page does not load, read the first terminal error before changing code. A missing dependency, wrong directory, and JSX syntax error need different fixes.