Building a React Template From Scratch
A React template is just a pre-configured starter project you clone and modify. Most people use scaffolding tools, but they often pull in way more dependencies than you need. I built my own templates after realizing how much bloat Vite and Create React App force on you by default. Start with a folder. Run npm init -y in it. Install React and ReactDOM with npm i react react-dom, then add the dev dependencies: npm i -D vite @vitejs/plugin-react esbuild. That's it for the core. Vite handles the bundling and HMR (hot module replacement) out of the box. Create a vite.config.js file. Add the React plugin import and configure the server port if you want something other than 5173. Then create an index.html in the root with a standard boilerplate that points to your src/main.jsx. That entry file renders your root component into a #root div. Keep it minimal. Anything beyond that is your choice, not the tool's.
One thing nobody warns you about: Vite's dev server caches aggressively. I spent two hours debugging a template where changes to vite.config.js weren't being picked up because the cache was stale. The fix was clearing node_modules/.vite and restarting. I add a rm -rf node_modules/.vite step to my startup script now. After the basic setup, decide what you're actually template-izing. Do you need TypeScript? Add @types/react and @types/react-dom, then rename your files to .tsx and .ts. Configure tsconfig.json with strict mode if you want type safety, or disable it if you just want to ship faster. Your call. For CSS, most people reach for Tailwind. It works fine but adds a lot of configuration overhead. If you're shipping a template meant for general use, I'd suggest vanilla CSS or CSS modules instead. Less decision fatigue for the person who clones it. They can always add Tailwind later if they need it.
Folder structure matters more than you'd think. I used to flatten everything and ended up with 40 components in the root src/ directory of one template. Nobody could find anything. The working pattern I landed on is src/components/, src/pages/, src/hooks/, src/utils/, and src/assets/. Keeps things scoped without over-complicating it. Here's a counter-intuitive point: don't put routing in your template unless you specifically need it. React Router adds significant bundle weight and configuration. Most small projects don't need it. I learned this the hard way when a client asked why their "simple landing page template" came with 15 unnecessary dependencies including the full router package. State management follows the same logic. Don't include Redux, Zustand, or anything like that by default. React's built-in useState and useContext handle 90% of use cases. If someone needs a global store, they'll tell you. Shipping with one forces an opinion on everyone else.
Get the Full Details
Document the template properly. Not with fancy marketing copy, just a README.md that lists the commands (npm run dev, npm run build), the port it runs on, and what's included. People will read it. Or they won't and will come back asking questions you already answered. The real downside of templates is maintenance. Every dependency update is a potential breaking change. I have one template where updating from Vite 4 to 5 broke the build because of a config option change. Another where the React 18 automatic batching behavior caused a rendering bug I hadn't anticipated. Test upgrades before publishing. A template that doesn't start out of the box is worse than no template at all. If you're looking for something to clone and run, I keep a clean version at github.com/sapiensai/react-template-starter. It's bare bones. No router, no state library, no CSS framework. Just React, Vite, and the absolute minimum to get running. Everything else is up to you.
Quick reference commands:
npm create vite@latest my-template -- --template reactcd my-template && npm installnpm run dev
That creates a Vite React project in about 30 seconds. From there, strip out whatever you don't need and rebuild. The scaffolding tool gives you a reasonable starting point, but the real work is in the cleanup.
