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.
39 lines
1.1 KiB
Markdown
39 lines
1.1 KiB
Markdown
# 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 = ...` or `function UserProfile() { ... }`)
|
|
|
|
## 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
|
|
```tsx
|
|
// File: UserProfile.tsx
|
|
export function UserProfile() { ... }
|
|
|
|
// File: TaskList.tsx
|
|
const TaskList = () => { ... }
|
|
export default TaskList;
|
|
```
|
|
|
|
### ❌ Incorrect
|
|
```tsx
|
|
// 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. |