The Reality of "Just a React App"

A complete breakdown of the architecture, tooling, and paradigms involved in modern frontend development. This highlights the true scope of work required when React is the default (and often only) option for frontend developers who are effectively React specialists.

---

Core Architecture & Language

• React: Virtual DOM, JSX
• Component Paradigms: Class component lifecycles, Higher-Order Components (HOCs), render props, Hooks
• Advanced Rendering: Suspense, Error Boundaries
• TypeScript
• Application Type: SPA vs. MPA

Build Toolchain & Dependencies

• Transpiling: SWC, Babel, esbuild
• Bundling: Vite, Webpack, Turbopack, ESM vs. CJS modules, code-splitting
• Package Management: NPM, PNPM, Yarn, Bun
• Dependency Fanout: Security implications, license implications

Code Quality & Testing

• Linting: ESLint (with plugins/configs for major dependencies), Stylelint for CSS
• Formatting: Prettier, integration with ESLint
• Testing: Jest, Vitest, Bun, integration with TypeScript and transpiler

Data & State Management

• Request Client: REST, GraphQL, RPC, type generation from server
• Data Fetching & Caching: React Query, Apollo, Relay, fetch
• State Management: Redux, Zustand, React Context, useState, useReducer, request client cache integration
• Side Effect Management: RxJS, Redux Sagas, Redux Epics, Redux Thunks, middleware or useEffect abstractions you make/maintain

Rendering & Routing

• CSR (Client-Side Rendering): Client routing with React Router, integration with state management solutions, render and fetch vs. fetch while rendering, lazy-loading
• SSR (Server-Side Rendering): Prerender and hydrate (Isomorphic JS)
• React Server Components (RSC): use server (embedded sections of server-only code)
• Server Routing: File system routing, prefetching

UI, Assets, & Styling

• Standard CSS: Vanilla CSS, BEM methodology, CSS Modules, SASS, LESS
• Utility CSS: Tailwind CSS
• CSS-in-JS: Styled Components, Emotion, Vanilla Extract, StyleX
• CSS Postprocessing
• SVG: SVGR vs. actual assets
• Component Library: Third-party vs. rolling your own, fits with styling solution, transpiling and publishing or monorepo package/directory

Infrastructure & Scaling

• Authorization: Next.js wrappers, client-side SDKs
• Background Processing: Service workers, web workers
• Repository Management: Monorepos, standard repositories
• Architecture: Microfrontends
• Deployment: Deploy assets