Creando Componentes Reutilizables con ReactJS

En ReactJS, los componentes son la piedra angular de cualquier aplicación. Facilitan la tarea de dividir la interfaz de usuario en piezas independientes y reutilizables que pueden gestionarse de forma aislada. La reutilización de componentes no solo ahorra tiempo sino que también mejora la consistencia y la calidad del código. A continuación, te muestro cómo puedes crear componentes reutilizables eficazmente.

Definiendo un Componente Base

Comencemos con un ejemplo sencillo: un botón que puede ser utilizado en varias partes de nuestra aplicación. Definiremos un componente Button que acepta propiedades (props) para personalizar su apariencia y comportamiento.

import React from 'react';

const Button = ({ text, onClick, type = 'button' }) => {
    return (
        <button type={type} onClick={onClick} className="button-default">
            {text}
        </button>
    );
};

export default Button;

Con este componente, no estamos limitados a un solo botón, sino que podemos reutilizarlo y personalizarlo pasando diferentes propiedades.

Extendiendo la Funcionalidad

Imagina que ahora necesitamos un botón con un estilo específico para acciones de confirmación. Podemos extender nuestro componente Button utilizando composición.

import Button from './Button';

const ConfirmButton = ({ text, ...props }) => {
    return (
        <Button {...props} className="button-confirm">
            {text}
        </Button>
    );
};

export default ConfirmButton;

Este ConfirmButton tendrá su propio estilo, pero hereda la funcionalidad base del componente Button original.

Abstracción Inteligente

Si tenemos tipos similares de componentes, como Card, Modal, Panel, etc., podemos abstraer la lógica común.

import React from 'react';

const Box = ({ children, className }) => {
    return <div className={`box-default ${className}`}>{children}</div>;
};

export default Box;

Ahora, Box puede ser utilizado para crear una variedad de contenedores reutilizables, solo modificando las clases y añadiendo contenido como se necesite.

Manejo de Estados Globales y Contexto

Para componentes que dependen de un estado global, como un tema oscuro o claro, podemos utilizar el Context API de React para evitar pasar props a través de muchos niveles de componentes.

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const ThemedButton = ({ text, ...props }) => {
    const theme = useContext(ThemeContext);
    const buttonClass = theme === 'dark' ? 'button-dark' : 'button-light';

    return (
        <button {...props} className={buttonClass}>
            {text}
        </button>
    );
};

export default ThemedButton;

Este enfoque nos ayuda a mantener nuestros componentes limpios y enfocados en su función, sin tener que preocuparnos por la propagación del estado.

Crear componentes reutilizables en ReactJS es una práctica que te permite escribir aplicaciones más limpias y mantenibles. Este proceso implica un diseño atento de la arquitectura y la identificación de elementos comunes en la interfaz de usuario, lo cual se traduce en una base sólida para aplicaciones escalables y fáciles de mantener.