Separation of concerns isolates unrelated responsibilities while keeping closely related items together. Each part should perform one focused concern and remain usable in different compositions. section 3.1.2
For interactive UIs, React applies the principle by keeping the UI description and JavaScript logic together in reusable components instead of splitting dependent templates and view logic across files. section 3.1.2 section 1.0
Apply the principle by:
- Keeping related UI structure and behavior together when separating them would make each part depend on the other. section 3.1.2
- Giving components focused responsibilities, such as displaying a timer list, running an individual timer, or managing a submission form. section 12.6
- Allowing components to communicate through interfaces and callbacks without requiring one component to know the other's internal work. section 12.6
A focused JSX component
const title = <h1>Hello</h1>; JSX keeps the description of this UI element beside its JavaScript context, then transpiles it into regular JavaScript. section 3.1.2
Trace how JSX becomes regular JavaScript before execution. section 3.1.2
