Clean Reactive Architecture — React One-File Sample

A minimal sample that demonstrates Clean Reactive Architecture implemented in a single React component.

All architectural units — gateway interface, gateway implementations, entities, presenter, controller, and user interface — live in src/App.tsx with inline comments identifying each unit. The intent is to show the architecture clearly, without the file structure of a full project getting in the way.

Getting started

Install dependencies:

npm ci

Start the development server:

npm run dev

Architecture mapping

The table below shows how each unit from the Clean Reactive Architecture diagram maps to App.tsx.

Architectural unit	Implementation
Entities	count (useState)
Presenter	countValue, countStatus
Controller	onIncrementButtonClick, onDecrementButtonClick, onAppMount
User interface	JSX returned from App

Tech stack

• React 19
• TypeScript
• Vite
• Tailwind CSS

Further reading

• Clean Reactive Architecture
• Development Methodology