En los últimos años, ha habido un cambio notable en la forma en que los desarrolladores abordan las bibliotecas de UI, alejándose de instalar bibliotecas de componentes completos a través de paquetes npm y optando por copiar y pegar directamente el código en su base de código.

Esta tendencia ha sido popularizada en gran medida por Shadcn/UI, una biblioteca que proporciona a los desarrolladores componentes personalizables y listos para usar que se pueden copiar directamente en un proyecto para lograr la máxima flexibilidad.

Por qué copiar es beneficioso para componentes complejos

El enfoque de copiar y pegar brilla, particularmente para elementos complejos de la interfaz de usuario, como páginas de autenticación, paneles detallados o visualizaciones de datos intrincadas. Estos componentes requieren una personalización precisa que es difícil de lograr mediante paquetes npm inmutables.

En lugar de abrumar la API de la biblioteca con infinitas opciones de configuración, este enfoque permite a los desarrolladores aprovechar la naturaleza componible y declarativa de los marcos frontend modernos, lo que permite un mayor control sobre cada parte del componente.

En lugar de selectores CSS largos y complejos, puede aplicar estilos directamente a los elementos de un componente. En lugar de inyectar componentes utilizando una lógica de inyección de dependencia compleja, simplemente coloque o reorganice los componentes como desee.

Un gráfico shadcnui interactivo en Bit Platform

Este enfoque ha adquirido una importancia aún mayor con la introducción de asistentes de codificación de IA. En lugar de generar componentes desde cero a través de IA con indicaciones largas y complejas, o entablar una larga conversación con el asistente, puedes comenzar con una composición prediseñadas que se acerque a lo que necesitas.

Al incorporar el código en tu proyecto, le brindas al asistente de IA un contexto específico y tangible. Desde allí, puedes pedirle que realice ajustes incrementales, como modificar estilos, agregar funciones de accesibilidad o cambiar el diseño.

Componentes de bits: paquetes que puede editar directamente

Bit ha introducido una nueva entidad en el mundo del desarrollo web: The Bit Component. En resumen, un componente Bit puede considerarse como un superpaquete. Puedes compartirlo, instalarlo, copiarlo e incluso colaborar en él independientemente de la configuración de cualquier proyecto en particular.

Para simplificar, podemos dividir los componentes de la interfaz de usuario en dos grupos: componentes del sistema de diseño y componentes de bloque. En el sistema de diseño, los componentes básicos como Card son componentes fundamentales. Mientras tanto, los componentes de bloque, como una MediaCard, se componen de elementos del sistema de diseño pero ofrecen una funcionalidad más avanzada.

Opción 1: componer con componentes del sistema de diseño

Al crear un nuevo componente, la primera opción es componerlo desde su sistema de diseño. Por ejemplo, para crear una tarjeta personalizada, es posible que necesites combinar componentes como Tarjeta, Botón y Tipografía.

Componentes basados ​​en MUI compartidos en Bit Platform

Estos componentes se pueden instalar en su proyecto mediante la instalación de npm, pnpm, Yarn o Bit:

npm i @bitdesign/material-ui.surfaces.card bitdesign.material-ui/inputs/button @bitdesign/material-ui.data-display.typography

Opción 2: utilizar componentes de bloque

Al optar por un componente de bloque prediseñado, tiene varias opciones flexibles más allá de la simple instalación.

La ruta más sencilla es instalar el paquete de componentes directamente y utilizar su API. Este enfoque funciona bien si el componente se adapta a sus necesidades desde el primer momento o solo requiere ajustes menores.

Para escenarios en los que necesita realizar cambios importantes, el comando fork de Bit le permite copiar el código completo del componente en su proyecto. Esto incluye archivos fuente, dependencias y configuraciones (incluidas las herramientas de desarrollo del componente).

https://bit.cloud/learnbit-react/material-ui-blocks/content/media-card

Por ejemplo, para copiar el componente MediaCard y su configuración, ejecutaremos bit fork y pasaremos su ID de componente (no el nombre del paquete) como argumento:

bit fork learnbit-react.material-ui-blocks/content/media-card

Vale la pena señalar que Bit también proporciona el comando de importación de bits, que le permite crear cambios en el componente y lanzar una nueva versión. Esta opción requiere que tenga los permisos adecuados para modificar el componente (a diferencia del comando bit fork, que no afecta el componente original).

Expulsar los archivos fuente de las dependencias

Al bifurcar componentes con dependencias, Bit los instala automáticamente para mayor comodidad. Sin embargo, si necesitas acceso directo al código fuente de una dependencia, también puedes bifurcar esas dependencias.

Por ejemplo, si desea copiar el componente Botón, también puede bifurcarlo de la colección de su equipo en Bit Platform:

bit fork bitdesign.material-ui/inputs/button