React Component Generator

Generates modern React components following best practices with TypeScript support.

When to Use

• "Create a Button component"

• "Generate a UserProfile component"

• "Scaffold a DataTable component"

Instructions

1. Gather Requirements

• Component name (PascalCase)

• Component type (functional, with state, with effects)

• Props needed

• TypeScript types

• Styling approach

2. Generate Component Structure

Functional Component:

import React from 'react'; import styles from './ComponentName.module.css';

interface ComponentNameProps { // Props here }

export const ComponentName: React.FC<ComponentNameProps> = ({ // Destructure props }) => { return ( <div className={styles.container}> {/* Component JSX */} </div> ); };

With State:

import React, { useState } from 'react';

export const ComponentName: React.FC<Props> = () => { const [state, setState] = useState<Type>(initialValue);

return <div>{/* ... */}</div>; };

With Effects:

import React, { useEffect } from 'react';

export const ComponentName: React.FC<Props> = () => { useEffect(() => { // Effect logic return () => { // Cleanup }; }, [dependencies]);

return <div>{/* ... */}</div>; };

3. Add PropTypes/TypeScript Interfaces

interface ComponentNameProps { title: string; onAction?: () => void; children?: React.ReactNode; className?: string; }

4. Create Associated Files

• ComponentName.tsx

• Component file

• ComponentName.module.css

• Styles

• ComponentName.test.tsx

• Tests

• index.ts

• Barrel export

5. Add Documentation

/**

• ComponentName - Brief description
• @example
• <ComponentName title="Hello" onAction={handleClick} /> */

Best Practices

• Use functional components

• TypeScript for type safety

• CSS Modules for styling

• Proper prop destructuring

• Meaningful names

• Add tests

• Export from index.ts