create-react-component

Creating a React Component

This skill guides the creation of new React components to ensure consistency, maintainability, and quality across the project.

1. Analysis & Preparation

• Identify Responsibility: Clearly define what the component does. Is it a UI primitive (atom) or a complex feature (organism)?
• Determine Location:
  • Shared UI components: src/components/ui/ or src/components/common/
  • Feature-specific components: src/features/<FeatureName>/components/
• Check Existing: Verify if a similar component already exists to avoid duplication.

2. File Structure

Create a directory with the PascalCase name of the component. Example: src/components/ui/MyComponent

The directory should contain:

• MyComponent.tsx: The main component implementation.
• index.ts: Re-export the component (e.g., export * from './MyComponent';).
• (Optional) MyComponent.css or styles.ts: For styling, depending on the project's styling strategy (e.g., CSS Modules, Styled Components, Tailwind).

3. Implementation Guidelines (The "Gold Standard")

Setup

• Imports: Group imports: React/Project dependencies -> Local components -> Styles/Utils.
• Types: Always define a Props interface. Export it if it's likely to be used elsewhere.

Coding

• Function Component: Use const ComponentName = ... or function ComponentName(...).
• Props Destructuring: Destructure props in the function signature for readability.
• Clean Code: Keep the render logic clean. Extract complex logic into custom hooks if proper.
• Accessibility (a11y): Ensure interactive elements have accessible names (aria-label) and keyboard navigation support.

Example Template (MyComponent.tsx)

import React from 'react';

// Define Props interface
export interface MyComponentProps {
  title: string;
  isActive?: boolean;
  onClick: () => void;
}

/**
 * MyComponent
 * Description of what this component does.
 */
export const MyComponent: React.FC<MyComponentProps> = ({
  title,
  isActive = false,
  onClick,
}) => {
  return (
    <div
      role="button"
      tabIndex={0}
      onClick={onClick}
      onKeyDown={(e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          onClick();
        }
      }}
      className={`my-component ${isActive ? 'active' : ''}`}
    >
      <h3>{title}</h3>
    </div>
  );
};