Creating a Project with Vite

For anything you intend to keep, start with a build tool. Vite 25,978 is the lightest of the recommended options: it compiles JSX and TypeScript with Oxc 616,256 , a transformer written in Rust, serves your source as native ES modules in development so startup does not depend on project size, and bundles for production with Rolldown 181,166 .

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

The -- passes the rest of the arguments to the scaffolder rather than to npm 2,036 ; use react-ts for a TypeScript project (TypeScript), or leave the arguments off and create-vite asks which framework and variant you want. Installing pulls in a short dependency list — 24 packages on the run recorded here — and npm run dev starts the development server:

  VITE v8.3.0  ready in 277 ms
  ➜  Local:   http://localhost:5177/
  ➜  Network: use --host to expose

Open that address and edit src/App.jsx. The change appears without a reload and without losing component state, because Vite's React 7,897 plugin patches the updated module in place — hot module replacement. If state does get reset, you probably edited something outside a component. npm run build then produces the deployable version in dist/:

vite v8.3.0 building client environment for production...
✓ 20 modules transformed.
dist/index.html                   0.45 kB │ gzip:  0.29 kB
dist/assets/index-DykytF2W.css    4.10 kB │ gzip:  1.47 kB
dist/assets/index-CyBHeG3D.js   222.52 kB │ gzip: 69.26 kB
✓ built in 302ms

React itself accounts for most of those 222 kB — about 69 kB over the wire after gzip. The hashed file names let you cache the assets forever and invalidate them by changing the hash, and npm run preview serves dist/ locally so you can check the production build before deploying it.