Componentes reutilizables en Lovable

Reutilizar componentes en Lovable es la clave para construir apps más rápidas, limpias y fáciles de mantener. Si trabajas con React y quieres que tu base de código no se vuelva inmanejable, entender cómo crear y reutilizar componentes te ahorrará horas de trabajo y evitará errores cuando hagas cambios de diseño.

¿Qué es un componente en React y por qué importa?

Un componente es una pieza de interfaz que puedes usar en distintas partes de tu aplicación. Piensa en él como un bloque de Lego: lo construyes una vez y lo encajas donde lo necesites.

En una app de renombrado de fotos, por ejemplo, podrías tener un drop zone donde el usuario suelta sus imágenes. Dentro de ese drop zone viven varios elementos: el header, la lógica de carga y los botones. Todo eso se agrupa en un solo componente que vive en tu carpeta components [01:05].

¿Qué es un componente reutilizable? Es un bloque de UI que defines una vez y puedes insertar en varias páginas. Si lo modificas, los cambios se reflejan en todos los lugares donde lo usaste.

Antes, en el desarrollo web tradicional, trabajar con componentes era complicado. Con React se volvió sencillo, y con Lovable todavía más, porque puedes pedirle que reutilice un componente existente en lugar de crear uno nuevo desde cero [01:35].

¿Cómo reutilizar un componente en distintas páginas?

La idea es simple: importas el mismo componente en la landing page y en el dashboard. Cuando edites ese componente, ambos lugares se actualizan automáticamente. Mismo código, mismo diseño, misma lógica.

En el ejemplo de la clase, la landing page tenía una lista de espera por correo. Para que los usuarios pudieran probar la app subiendo una o dos fotos sin registrarse, bastó con un prompt directo a Lovable: "Using our drop zone component, can you also put a copy of it on the hero of the landing page?" [02:50].

El resultado no fue perfecto en estética, pero demostró el punto: el mismo componente vive en dos páginas distintas sin duplicar código.

¿Qué ganas al reutilizar componentes?

• Menos código en el proyecto, lo que acelera a Lovable al hacer ediciones.
• Cambios de diseño centralizados: editas una vez y se refleja en toda la app.
• Consistencia visual entre páginas como welcome, dashboard o landing.
• Menor riesgo de que Lovable haga cambios masivos en decenas de archivos.

¿Cuándo conviene refactorizar un componente grande?

Un componente pequeño es fácil de mantener. El FileDropZone del ejemplo tiene alrededor de 100 líneas, lo cual es manejable. El problema aparece cuando un componente crece demasiado.

Como regla general, si un componente supera las 300 líneas de código, es momento de dividirlo. Componentes de 1,000 líneas ralentizan a Lovable porque tiene que procesar mucha información de una sola vez [04:20].

¿Cómo le pido a Lovable que divida un componente grande? Usa un prompt como: "Can you refactor the drop zone into smaller and more organized components?" Lovable se encargará de separarlo en piezas más pequeñas y organizadas.

¿Cómo nombrar y encontrar tus componentes en Lovable?

Recordar los nombres de tus componentes hace que tus prompts sean mucho más precisos. Si sabes que tu componente se llama FileDropZone, puedes referenciarlo directamente y Lovable usará ese mismo en lugar de crear uno nuevo.

Si te pierdes, hay una solución rápida:

1. Haz clic en el botón Open Code dentro de Lovable.
2. Navega a la carpeta components.
3. Revisa la lista completa de componentes ya creados.

Desde ahí puedes decir, por ejemplo: "quiero usar el weather widget en otra parte de la app" y especificar dónde [05:30]. Esto evita que Lovable cree archivos duplicados y mantiene tu base de código limpia.

¿Qué prácticas hacen tu app más rápida y mantenible?

La mentalidad correcta no es crear cosas nuevas todo el tiempo, sino pensar cómo reutilizar lo que ya tienes. Esto se traduce en una app más rápida, con menos bugs y más fácil de escalar.

Algunos hábitos que vale la pena adoptar desde el inicio:

• Tener un plan claro, un design system y un theme definidos antes de empezar a construir.
• Apoyarte en librerías como 21st Dev para incorporar componentes con buen acabado visual.
• Diseñar el estilo en función del tipo de cliente o usuario al que apuntas.
• Documentar tu plan en un mermaid diagram o incluso en papel para guiar el desarrollo.

Estos pasos te ayudan a terminar el proyecto más rápido, a que las cosas funcionen de verdad y a mantener un diseño consistente en toda la aplicación.

¿Ya identificaste qué componentes podrías reutilizar en tu próximo proyecto con Lovable? Cuéntame en los comentarios cuál ha sido tu mayor reto al organizar tu base de código.