28 lines
1.2 KiB
Plaintext
28 lines
1.2 KiB
Plaintext
---
|
|
description:
|
|
globs:
|
|
alwaysApply: false
|
|
---
|
|
# React Component Refactoring Rules
|
|
|
|
1. **Component Extraction:**
|
|
* Identify distinct sections or large pieces of JSX within a component.
|
|
* Extract these sections into separate, self-contained functional React components.
|
|
|
|
2. **File Organization:**
|
|
* Create a dedicated directory (e.g., `src/components`) for reusable components.
|
|
* Place each extracted component in its own file within this directory.
|
|
|
|
3. **Naming Convention:**
|
|
* Name component files using kebab-case (e.g., `UserProfile.tsx` -> `user-profile.tsx`).
|
|
* Export components using PascalCase (e.g., `export const UserProfile = ...`).
|
|
|
|
4. **Data/Type Colocation:**
|
|
* If specific data structures, constants, or TypeScript types/interfaces are solely used by one component, move them into that component's file.
|
|
* Export data/types if needed by other parts of the application, otherwise keep them local.
|
|
|
|
5. **Import Updates:**
|
|
* Modify the original parent component to import the newly created components.
|
|
* Replace the extracted JSX/logic with the imported component tag (e.g., `<UserProfile />`).
|
|
* Remove the original code (definitions, data, types) that was moved to the new component files.
|