Printing and PDF export are disabled for this content. View it online at Full Stack Learning Simplified.

React Setup with Vite

The quickest way to start a React project today is Vite — a fast build tool with instant hot-reload. It scaffolds a project and dev server in seconds.

Create a project

bash

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

The dev server runs at http://localhost:5173 with hot module replacement — edits appear instantly without a full reload.

Project structure

project

my-app/
├─ index.html          # the single HTML page
├─ src/
│  ├─ main.jsx         # entry point (mounts React)
│  ├─ App.jsx          # your root component
│  └─ components/      # your components
└─ package.json

The entry point

main.jsx

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

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

Scripts

bash

npm run dev       # development server
npm run build     # production build -> dist/
npm run preview   # preview the production build

Warning: Create React App is deprecated — don't use it for new projects. Use Vite for a single-page app, or a framework like Next.js when you want routing, SSR, and more built in.

Tip: StrictMode (wrapping your app above) intentionally double-invokes some functions in development to surface bugs — it's a helper, and doesn't run in production.

Free preview. Sign in and subscribe to unlock all 809 lessons across 25 courses.