03bd3659e0
- Introduced a comprehensive set of general coding guidelines to enhance code readability and maintainability. - Established a localization rule to prevent hard-coded user-facing text, ensuring all strings are managed through the localization system. - Defined a naming convention for React components, mandating the use of PascalCase for consistency across the codebase. - Included examples and enforcement strategies for each rule to facilitate adherence during development and code reviews.
1.1 KiB
1.1 KiB
React Component Naming Rule: PascalCase
Rule
- All React component names must use PascalCase.
- This applies to:
- Component file names (e.g.,
MyComponent.tsx,UserProfile.jsx) - Exported component identifiers (e.g.,
export const MyComponent = ...orfunction UserProfile() { ... })
- Component file names (e.g.,
Rationale
- PascalCase is the community standard for React components.
- Ensures consistency and readability across the codebase.
- Prevents confusion between components and regular functions/variables.
Examples
✅ Correct
// File: UserProfile.tsx
export function UserProfile() { ... }
// File: TaskList.tsx
const TaskList = () => { ... }
export default TaskList;
❌ Incorrect
// File: userprofile.tsx
export function userprofile() { ... }
// File: task-list.jsx
const task_list = () => { ... }
export default task_list;
Enforcement
- All new React components must follow this rule.
- Refactor existing components to PascalCase when modifying or moving them.
- Code reviews should reject non-PascalCase component names.