create-component

Create React Component

Create a new React component with proper TypeScript structure.

Context

• Current directory: !pwd
• Existing components: !find src/components -name "*.tsx" -o -name "*.ts" 2>/dev/null | head -10

Your Task

Create a well-structured React component with TypeScript.

Arguments

• $1: Component name (required) - PascalCase (e.g., UserProfile, TodoList)
• $2: Component type (optional) - functional (default) or class
• $3: Include tests (optional) - --with-tests to generate test file

Steps

1. Determine component location:

   • Check if src/components exists
   • If not, check for src/ directory
   • Create appropriate directory structure

2. Create component file structure:

   For simple component:

   src/components/ComponentName.tsx
   

   For complex component with styles:

   src/components/ComponentName/
   ├── ComponentName.tsx
   ├── ComponentName.module.css
   └── index.ts
   

3. Generate functional component (default):

   interface ComponentNameProps {
     // Add props here
   }
   
   export function ComponentName({}: ComponentNameProps) {
     return (
       <div>
         <h1>ComponentName</h1>
       </div>
     );
   }
   

4. For component with common props:

   interface ComponentNameProps {
     className?: string;
     children?: React.ReactNode;
   }
   
   export function ComponentName({ className, children }: ComponentNameProps) {
     return (
       <div className={className}>
         {children}
       </div>
     );
   }
   

5. For component with state:

   import { useState } from 'react';
   
   interface ComponentNameProps {
     initialValue?: number;
   }
   
   export function ComponentName({ initialValue = 0 }: ComponentNameProps) {
     const [count, setCount] = useState(initialValue);
     
     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => setCount(count + 1)}>Increment</button>
       </div>
     );
   }