component-naming

Enforce consistent React component naming by applying domain + role patterns in PascalCase—for example, renaming a generic Chart to TrendChart to reflect its domain and purpose. This improves readability and ensures names align with file conventions using kebab-case.

The domain + role pattern combines the business domain (e.g., Trend, User) with the component's functional role (e.g., Chart, Form, Button). This naming approach clarifies what a component does and where it fits in your application's architecture.

Use dot notation to name compound subcomponents—for example, Card.Header, Card.Body—keeping related parts semantically grouped. This maintains clarity while avoiding layout or styling suffixes in component names.

PascalCase signals to React that a symbol is a component rather than a regular HTML element. Combined with domain + role naming, it enforces a consistent, scannable codebase that improves code review speed and reduces naming ambiguity.

Yes. Component naming conventions apply during pull requests, component creation, and refactoring to catch inconsistencies early. This ensures domain context and role semantics remain clear as your codebase grows.

File names should align with component names but use kebab-case—for example, TrendChart lives in trend-chart.jsx. This maintains consistency between imports and file structure while following JavaScript file naming best practices.