Frontend Development with React
React is a library for building user interfaces through declarative components. A site built with React is an SPA or SSR application with routing, state management, typing, build optimization, and CI/CD. There's no "Hello World" here — only production architecture for a project that will grow.
Stack and Framework Selection
Clean Vite + React — for SPAs without SEO requirements (dashboards, portals):
React 18+ + Vite 5 + TypeScript + React Router v6 + Tanstack Query + Zustand
Next.js App Router — for SEO sites, mixed content, ISR:
Next.js 15 + TypeScript + React Server Components + Tanstack Query (client) + Zustand (client)
Remix — for forms, mutations, fullstack without API layer:
Remix 2 + TypeScript + Prisma + Zod
This material covers Vite + React SPA; Next.js is in a separate section.
Project Initialization and Structure
npm create vite@latest my-site -- --template react-ts
cd my-site
npm install
Extend the base installation:
# Routing
npm install react-router-dom
# Server state
npm install @tanstack/react-query @tanstack/react-query-devtools
# Global state
npm install zustand
# Forms + validation
npm install react-hook-form zod @hookform/resolvers
# UI
npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-tooltip
# Utilities
npm install clsx tailwind-merge class-variance-authority
# Styles
npm install -D tailwindcss @tailwindcss/vite @tailwindcss/typography
# Icons
npm install lucide-react
# Dev
npm install -D @types/node eslint @typescript-eslint/eslint-plugin prettier
Directory Structure
src/
app/ ← Application initialization
App.tsx
Router.tsx
QueryProvider.tsx
assets/ ← Static files (images, fonts)
components/
ui/ ← Primitives (Button, Input, Card, Dialog)
layout/ ← Header, Footer, Sidebar, Section
shared/ ← Reusable composite components
features/ ← Feature slices (loose coupling)
home/
components/
hooks/
index.ts
about/
contact/
hooks/ ← Global hooks
lib/ ← Utilities, configurations
utils.ts ← cn() and more
api.ts ← Axios/Fetch configuration
queryClient.ts
pages/ ← Pages (use features)
HomePage.tsx
AboutPage.tsx
ContactPage.tsx
NotFoundPage.tsx
store/ ← Zustand stores
styles/
globals.css
types/ ← Global TypeScript types
Timeline
Initial setup with Vite, routing, queries, TypeScript, and Tailwind — 2–3 hours. Building a landing page with 5–7 sections — 3–5 days. Dashboard with 10+ pages and complex state — 2–3 weeks.







