# Cómo crear componentes reutilizables en React Los componentes reutilizables son el corazón de cualquier aplicación React exitosa. En este artículo, exploraremos las mejores prácticas para crear componentes que sean verdaderamente reutilizables y mantenibles. ## ¿Por qué son importantes los componentes reutilizables? Los componentes reutilizables ofrecen varios beneficios: - **Consistencia**: Mantienen un diseño uniforme en toda la aplicación - **Mantenimiento**: Cambios en un lugar se reflejan en toda la app - **Productividad**: Reduce el tiempo de desarrollo - **Testing**: Más fácil de testear componentes aislados ## Principios básicos ### 1. Diseño por composición En lugar de crear componentes monolíticos, diseña componentes pequeños que puedan combinarse: ```tsx // ❌ Malo: Componente monolítico function UserCard({ user, showActions, showAvatar }) { return (

{showAvatar &&

}

{user.name}

{user.email}

{showActions && (

)}

); } // ✅ Bueno: Composición function Card({ children, className }) { return

{children}

; } function Avatar({ src, alt }) { return {alt}

; } function UserCard({ user }) { return (

{user.name}

{user.email}

); } ``` ### 2. Props bien definidas Usa TypeScript para definir interfaces claras: ```tsx interface ButtonProps { variant?: 'primary' | 'secondary' | 'danger'; size?: 'sm' | 'md' | 'lg'; disabled?: boolean; loading?: boolean; children: React.ReactNode; onClick?: () => void; type?: 'button' | 'submit' | 'reset'; } function Button({ variant = 'primary', size = 'md', disabled = false, loading = false, children, onClick, type = 'button', ...props }: ButtonProps) { const baseClasses = 'px-4 py-2 rounded font-medium focus:outline-none focus:ring-2'; const variantClasses = { primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500', secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500', danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500', }; const sizeClasses = { sm: 'px-2 py-1 text-sm', md: 'px-4 py-2', lg: 'px-6 py-3 text-lg', }; return ( ); } ``` ## Patrones avanzados ### Render Props Para casos donde necesitas compartir lógica pero no UI: ```tsx interface FetchDataProps { url: string; children: (data: { data: T | null; loading: boolean; error: string | null; }) => React.ReactNode; } function FetchData({ url, children }: FetchDataProps) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { async function fetchData() { try { setLoading(true); const response = await fetch(url); const result = await response.json(); setData(result); } catch (err) { setError(err instanceof Error ? err.message : 'Error desconocido'); } finally { setLoading(false); } } fetchData(); }, [url]); return <>{children({ data, loading, error })}; } // Uso function UserList() { return ( url="/api/users"> {({ data, loading, error }) => { if (loading) return

Cargando...

; if (error) return

Error: {error}

; return (

{user.name}

); }} ); } ``` ### Compound Components Para componentes que trabajan juntos: ```tsx interface TabsContextType { activeTab: string; setActiveTab: (tab: string) => void; } const TabsContext = createContext(undefined); function Tabs({ children, defaultTab }: { children: React.ReactNode; defaultTab: string }) { const [activeTab, setActiveTab] = useState(defaultTab); return (

{children}

); } function TabList({ children }: { children: React.ReactNode }) { return

{children}

; } function Tab({ id, children }: { id: string; children: React.ReactNode }) { const context = useContext(TabsContext); if (!context) throw new Error('Tab must be used within Tabs'); const { activeTab, setActiveTab } = context; return ( ); } function TabPanels({ children }: { children: React.ReactNode }) { return

{children}

; } function TabPanel({ id, children }: { id: string; children: React.ReactNode }) { const context = useContext(TabsContext); if (!context) throw new Error('TabPanel must be used within Tabs'); const { activeTab } = context; if (activeTab !== id) return null; return

{children}

; } // Uso function App() { return ( Pestaña 1 Pestaña 2 Contenido de la pestaña 1 Contenido de la pestaña 2 ); } ``` ## Testing de componentes reutilizables ```tsx import { render, screen, fireEvent } from '@testing-library/react'; import { Button } from './Button'; describe('Button', () => { it('renders with correct text', () => { render(); expect(screen.getByText('Click me')).toBeInTheDocument(); }); it('calls onClick when clicked', () => { const handleClick = jest.fn(); render(); fireEvent.click(screen.getByText('Click me')); expect(handleClick).toHaveBeenCalledTimes(1); }); it('is disabled when loading', () => { render(); expect(screen.getByRole('button')).toBeDisabled(); }); it('applies correct variant classes', () => { render(); expect(screen.getByRole('button')).toHaveClass('bg-red-600'); }); }); ``` ## Conclusión Los componentes reutilizables son fundamentales para el éxito de cualquier aplicación React. Siguiendo estos principios y patrones, podrás crear componentes que no solo funcionen bien hoy, sino que también sean fáciles de mantener y extender en el futuro. ### Próximos pasos - Implementa un sistema de design tokens - Crea un Storybook para documentar tus componentes - Establece guidelines de API consistency - Considera usar herramientas como Bit para compartir componentes entre proyectos ¿Qué patrones usas tú para crear componentes reutilizables? ¡Comparte tu experiencia en los comentarios!

Artículos relacionados

TypeScript en 2024: Nuevas características y mejores prácticas

Next.js 14 App Router: Guía completa