Ever wonder why your React app’s dev server feels like it’s stuck in 2018 traffic while competitors zip ahead?
Modern React essentials start here, with Vite—not some dusty Create React App relic. We’re talking the second post in a Next.js series, but React’s the beating heart. Skip HTML/CSS basics if you’re like the author (already knows ‘em); jump straight to what powers real apps.
Why Vite? Because Waiting is for Webpack Nostalgics
Vite. Fastest kid on the block. Boot times? Milliseconds. Native ESM means browsers chew modules directly—no bundling slog in dev. Hot Module Replacement? Swap one file, state survives. Industry standard now, prerequisites simple: Node.js, that’s it.
Vite is significantly faster than older tools like create-react-app because of its modern architecture: Native ESM: It serves code as native ES modules, which browsers can parse directly, skipping the slow bundling step during development.
npx create-vite@latest, pick React template, npm install, npm run dev. Done. But here’s my unique take: Vite isn’t just quick; it’s the webpack killer we needed post-2016. Remember Grunt’s task-runnning hell? Vite echoes npm’s package revolution—democratizing speed, making solo devs punch like teams. Prediction: By 2025, 90% new React projects Vite-powered, shoving Next.js even deeper into enterprise.
Short para: StrictMode. Love it or hate it?
Why Does StrictMode Make useEffect Run Twice?
New Vite React app? wraps your root. Dev mode: Mount, unmount, remount. useEffect fires twice. Panic? Nah.
It’s deliberate. Catches stale closures, missing cleanups. Visualize: Run 1 (subscribe), Run 2 (unsubscribe), Run 3 (resubscribe). Idempotent logic shines; duplicates crash. Production? Stripped clean. Genius for bug-hunting—React’s way of saying, “Make it strong now, thank me later.”
Env vars next. .env file, root level. VITE_ prefix mandatory, or ghosted from client.
VITE_API_URL=https://api.myapp.com
Grab it: import.meta.env.VITE_API_URL. No hardcodes, ever. Security 101.
npm rundown. npm i for deps (React, axios). npm i -D for dev (Vite plugins). Global? Rare, like nodemon. Dev: npm run dev (HMR magic). Build: npm run build (dist folder, minified). Preview: npm run preview (prod sim).
Proxying APIs: Ditch CORS Nightmares Forever
localhost:5173 frontend, :3000 backend. axios.get(‘http://localhost:3000/api/users’)? CORS blocks it. Fix: vite.config.js proxy.
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
}
}
}
})
Now /api/users flies through. smoothly dev.
Core React. Strip to HTML basics first—unpkg scripts, Babel standalone. See the matrix.
<!DOCTYPE html>
<html>
<head>
<title>React Fundamentals</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- etc -->
</head>
<body>
<div id="root"></div>
</body>
function App() { return
Hello
; } ReactDOM.render. Boom, React sans build tools. Teaches the ‘why’—virtual DOM diffs, one-way data.But components. Real power. Index screams: Building UIs with Components, State + Hooks, Advanced Patterns.
How Do Modern Components Shift Architecture?
Functional components rule. No classes. Props down, events up. Composition over inheritance—React’s mantra since 16.8 Hooks.
useState: const [count, setCount] = useState(0); Simple.
useEffect: Side effects. Dependencies array key. Cleanup fn returns.
Advanced: useReducer for complex state. Custom hooks—extract logic, reuse. useCallback, useMemo: Premature opt? Nah, targeted now.
State mgmt: Don’t overkill. Context + useReducer beats Redux for most. Zustand? Lightweight if needed.
APIs: Loading/error states. Custom hook: useFetch(url) { const [data, loading, error] = … } Suspense incoming, but basics first.
Navigation Without Next.js: React Router’s Quiet Dominance
SPAs need routes. React Router v6: , , } />. Hooks: useParams, useNavigate. Clean.
Performance: Memo, lazy, virtual lists. Vitest for tests—Vite native, fast.
TypeScript? Integrate day one. Generics tame props: interface Props { children: ReactNode; }
Here’s the critique: Original post’s Vite hype spot-on, but skimps patterns depth. Corporate spin? None—straight tutorial. My insight: This stack (Vite+TS+Hooks) mirrors SvelteKit’s speed without framework lock-in. React wins by staying unopinionated, but devs chase shinies—stick to essentials, ship faster.
Testing: Vitest. npm i -D vitest. vite.config.test.js. Fast, JS-native.
Optz: Code splitting, tree shaking baked in.
🧬 Related Insights
- Read more: Daily Briefing: April 04, 2026
- Read more: Enterprise DevOps Teams: Steal These SaaS Secrets Before Your Next Outage
Frequently Asked Questions
What is Vite and why use it for React?
Vite’s a next-gen build tool—dev server uses native ESM for instant startups, HMR for live updates. Ditches CRA’s webpack slowness.
Why does useEffect run twice in React dev?
StrictMode double-mounts to expose bugs like missing cleanups or stale closures. Production ignores it.
How to proxy APIs in Vite to fix CORS?
Add server.proxy in vite.config.js, target your backend URL. Requests to /api forward smoothly.
Wrap: Modern React essentials aren’t fluff. Vite unlocks why React endures—evolve fast, break nothing. Dive in, your future self nods.
