Setup & Vite
Overview
Historically, starting a new React project meant using a tool called create-react-app (CRA). While CRA was revolutionary for its time by hiding complex Webpack configurations, it eventually became notoriously slow, bloated, and practically abandoned by its maintainers. Modern React development has universally shifted to Vite.
Vite (French for 'quick') is a next-generation frontend build tool created by Evan You. Unlike older bundlers that cram your entire application into one massive file before the dev server can even start, Vite utilizes native ES modules in the browser. It serves your source code almost instantly and only compiles exactly what you are currently viewing on your screen.
For enterprise or production apps that require Server-Side Rendering (SSR) or SEO optimization, developers use meta-frameworks like Next.js or Remix. But for standard Single Page Applications (SPAs), learning React, or building rapid prototypes, Vite is the absolute gold standard in the 2026 ecosystem.
Syntax
# 1. Scaffold a new project named 'portfolio-app' using the React template
npm create vite@latest portfolio-app -- --template react
# 2. Navigate into the directory
cd portfolio-app
# 3. Install all required dependencies from package.json
npm install
# 4. Start the blazing fast development server
npm run devCommon Pitfalls
- Using create-react-app (CRA) in 2026: Do not use
npx create-react-app. It is officially deprecated by the React core team. CRA uses outdated Webpack versions, takes minutes to start on large projects, and is no longer receiving security updates. Always use Vite, Next.js, or Remix.
Interview Questions
Webpack crawls your entire application, resolves every dependency, and bundles it into one large file before the server can start. Vite relies on native browser ES modules. It pre-bundles dependencies using esbuild (which is written in Go and is 10-100x faster than JS bundlers) and only transforms application code on-demand when the browser specifically requests it.
HMR is a feature that allows a bundler to swap out updated modules (like a CSS file or a React component) in a running application without requiring a full page refresh. Vite's HMR is virtually instantaneous because it doesn't need to rebuild the entire bundle.
Real-World Example
Understanding package.json in Vite: This is a standard React Vite configuration. Notice that Vite itself is a 'devDependency' because it is only used to build the app. The final product deployed to AWS or Vercel only contains the pure HTML, CSS, and JS that Vite outputs, without Vite itself.
{
"name": "enterprise-dashboard",
"private": true,
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite", // Starts local dev server
"build": "vite build", // Compiles minified production code
"lint": "eslint .", // Checks for code quality issues
"preview": "vite preview" // Tests the production build locally
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.2.1",
"vite": "^5.2.0"
}
}Check Your Knowledge
Test your understanding of Setup & Vite with these quick questions.