React Page Widget Composition

Overview

Pages compose workflows and own layout. Widgets connect state or behavior to stateless UI. Components stay presentational by default.

Keep routing at the app/root boundary. App.tsx may own route setup, app-level providers, loading state, and route-to-page wiring.
Pages are route targets and workflow composers; pages must not import or render other pages.
Pages may connect to stores, queries, commands, and selectors when the page owns the workflow.
Components receive data, callbacks, and positioning class names through props. They should not own business state.
Widgets may read state, call queries/commands, bind events, and compose stateless components.
Widgets must not import or render other widgets. Use children or named slots, then compose widgets on the page.
Split widgets that own multiple workflows.

If a presentational component exists only for one controlling widget, keep it inside the widget folder: