React Guide

Applies to: React 18+, TypeScript, Single Page Applications, Component Libraries, Web Apps

Core Principles

1. Component-Based: Build encapsulated components that manage their own state
2. Declarative: Describe what UI should look like, React handles DOM updates
3. Unidirectional Data Flow: Props down, callbacks up
4. Composition Over Inheritance: Prefer component composition and custom hooks
5. TypeScript First: All components use TypeScript with strict prop interfaces

Guardrails

Component Rules

• Use functional components exclusively (no class components)
• Keep components under 200 lines (split into smaller components)
• Every component has a TypeScript interface for props