Cómo crear componentes personalizados y reutilizables en React

En mis últimos proyectos he estado creando componentes personalizados en React para poder utilizarlos en diferentes partes de la aplicación. Gracias al uso de las props puedo adaptar mis componentes a cada necesidad específica, esto hace que el código sea más limpio, fácil de mantener y de personalizar.

✨¿Qué es un componente personalizado?

Un componente personalizado en React es una función que envuelve una parte de la interfaz de usuario y que se puede reutilizar en distintas partes de la aplicación personalizándolo en cada uso.

Este tipo de funciones tiene que cumplir una serie de requisitos para poder utilizarlos correctamente:

Deben empezar con mayúscula, no puede ser function button(), tiene que ser function Button().
Son componentes de React, por lo tanto deben retornar un elemento JSX, por ejemplo Hola
Se tiene que exportar para poder utilizarlo.

🧱 Un ejemplo clásico: el botón

Un botón es un gran ejemplo de componente reutilizable, ya que es un elemento que suele repetirse con diferentes estilos, comportamientos o atributos (como disabled, onClick...).

Código del componente:

En este ejemplo tenemos lo siguiente:

Usamos children para renderizar el contenido del botón.
La propiedad variant nos permite aplicar estilos condicionales (por ejemplo, primario o secundario) y le hemos dado por defecto el valor "default" de esta manera no se aplicarán estilos condicionales si no lo requerimos.
Con el operador spread (...attributes) pasamos automáticamente todas las demás props sin tener que listarlas una a una. Esto permite una gran flexibilidad ya que podemos añadir disabled, type, onClick, etc., solo cuando lo necesitemos. También he definido un objeto llamado "variantClass" para manejar los diferentes estilos de la propiedad variant y aplicarlos directamente en "className".