Posted onFeb 24 • Originally published atmarcqualie.com

Vite + React Quickstart

I've been setting up a lot of quick experiments and prototypes lately to prove concepts. For these kind of apps I don't need a full stack like NextJS, but I also want to be able to use React + TypeScript for various reasons such as component testing or debugging. The aim is also to avoid hosted solutions like Code Sandbox or Stackblitz so I can use the code offline and also pull in local packages that aren't public.

It's surprisingly simple to get a working react app locally now with Vite and a few lines of html/jsx. I like this approach because it's a "close to the metal" as possible with react avoids complex build steps.

It's worth noting this is in-fact raw react and isn't designed for production use. Many layers will be needed on top for things like routing, SSR, hot reloading, etc but I don't need any of those for my quick throw away tests.

Dependencies

yarn add react react-domyarn add-D @types/react @types/react-dom vite

Yes, I'm still using yarn since my primary work toolchain is based around it but you can replaceyarn withpnpm ornpm to get the same result.

Files

index.html

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>React + Vite Prototype</title><scriptsrc="/app.tsx"type="module"></script></head><body></body></html>

app.tsx

importReact,{typeFC,StrictMode}from'react'import{createRoot}from'react-dom/client'exportconstApp:FC=()=>{return(<div>Hello, world!</div>)}document.addEventListener('DOMContentLoaded',()=>{createRoot(document.body).render(<StrictMode><App/></StrictMode>,)})

Running

vite dev

You can now access the app onhttp://localhost:5173 (default port). You should see "Hello, world!" in your browser if everything worked.

Conclusion

This is mainly here for my own reference so I can quickly copy + paste this when setting up a new experiment. The goal is to have as basic of a setup as possible to avoid conflicts with any dependencies then replicate the behaviour from the experiment into other projects.