Cómo crear componentes personalizados y reutilizables en React

Iratxe — Tue, 22 Jul 2025 11:23:06 +0000

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".

🧪 Ejemplos de uso

Aquí algunos ejemplos de cómo usar este componente personalizado con distintas props:

Y este sería el resultado final en la interfaz:

✅ Conclusión

Crear componentes personalizados es una práctica esencial en React. Nos ayuda a:

Reutilizar código.
Mantener consistencia en la UI.
Mejorar la mantenibilidad del proyecto.

Este ejemplo con un botón puede escalarse a otros elementos como inputs, tarjetas, modales o incluso componentes más complejos.

¿Lo has utilizado alguna vez?

Puedes probar el componente directamente aquí:
Ver en CodeSandbox

Cómo instalar y configurar Tailwind CSS 4 con React y Vite (paso a paso)

Iratxe — Sun, 29 Jun 2025 10:40:23 +0000

Tailwind CSS 4 ha llegado con muchos cambios interesantes. En este post te mostraré cómo instalarlo, configurarlo y dar los primeros pasos con esta nueva versión, usando React y Vite como base.

Si necesitas instalarlo en otro entorno (como Next.js, Laravel, PostCSS o incluso desde la CLI), puedes consultar las opciones oficiales en la documentación de Tailwind CSS.

🚀 Crear el proyecto con Vite + React + TypeScript

Antes de instalar Tailwind, necesitas crear tu proyecto con Vite. Si ya lo tienes creado, puedes saltarte esta parte.
Desde la terminal:
npm create vite

Elige el nombre del proyecto, las tecnologias (React y TypeScript + SWC) sigue los pasos para la configuración inicial y listo.

🛠️ 1. Instalar Tailwind CSS y su plugin para Vite

Una vez creado el proyecto, accede al directorio y ejecuta lo siguiente:

npm install -D tailwindcss @tailwindcss/vite

⚙️ 2. Configurar Tailwind en vite.config.ts

Importa el paquete de tailwindcss y añadelo dentro del array de plugins que tienes configurado, junto a React.

🎨 3. Importar Tailwind en tu archivo CSS

En el archivo index.css añade la importación de tailwindcss, de esta manera ya podrías empezar a utilizarlo.
No es necesario importar index.css para que funcione, ¡vamos a verlo!

💡 4. Probar que Tailwind funciona

Para comprobar que funcione borra el contenido por defecto del componente principal (App.tsx) y añade una etiqueta con algunas clases utilitarias de Tailwind.

Ahora ejecuta en la terminal npm run dev y comprueba en el navegador que funciona:

🎨 5. Personalizar colores en Tailwind CSS 4

Hasta aquí ya hemos visto que con esta nueva versión apenas hay que hacer configuraciones y podemos fácilmente empezar a trabajar.
Lo siguiente que veremos es cómo configurar nuestras clases unitarias personalizadas en esta nueva versión.

Una novedad de Tailwind 4 es que ya no necesitas el archivo tailwind.config.ts para personalizar tu configuración. Ahora puedes usar la directiva @ theme directamente en tu index.css.

Por ejemplo, para añadir una paleta de colores personalizada, puedes usar herramientas como UI Colors. Esta herramienta genera un bloque de configuración que puedes pegar así:

Ahora puedes usar tu color personalizado directamente:

¿Qué te ha parecido esta nueva instalación y configuración de Tailwind CSS 4?

DEV Community: Iratxe