React · Theory

React Architecture

Theory

55/94

React Architecture

A simple React architecture: src/pages (routes), src/features (cart, auth), src/shared (Button, api client). Data: local useState, Context for rare globals, Redux/TanStack Query when it earns its keep. Keep page files thin — they compose feature components.

One-way data still applies at app scale. Don’t create a ‘God Context’ with twenty fields. Don’t put fetch inside random Buttons — a small api module or a query hook.

React Architecture — output — pages / features / shared. Don’t dump every component in src/.

Exam tip

Folders + where state lives.

Example

// Folder sketch
console.log("pages/   routes");
console.log("features/ cart, auth");
console.log("shared/   Button, api");

React Architecture — output: pages / features / shared. Don’t dump every component in src/.

Short notes

Folders : pages / features / shared.
State : local → context → store.
TrapGod context.

React · Theory

React Architecture

← All stacks

Theory

55/94

React Architecture

One-way data still applies at app scale. Don’t create a ‘God Context’ with twenty fields. Don’t put fetch inside random Buttons — a small api module or a query hook.

React Architecture — output — pages / features / shared. Don’t dump every component in src/.

Exam tip

Folders + where state lives.

Example

// Folder sketch
console.log("pages/   routes");
console.log("features/ cart, auth");
console.log("shared/   Button, api");

React Architecture — output: pages / features / shared. Don’t dump every component in src/.

Short notes

Folders : pages / features / shared.
State : local → context → store.
TrapGod context.

React Architecture

Example

Short notes

Questions

React Architecture

Example

Short notes

Questions