Aprender a pensar en componentes es una de las habilidades más valiosas del desarrollo web moderno. Transformar una página completa en piezas independientes, reutilizables y combinables entre sí permite construir aplicaciones escalables y fáciles de mantener. A continuación se explica el proceso mental para identificar componentes, aplicar composición de componentes y manejar propiedades que modifican su comportamiento.
¿Cómo se transforma un menú de navegación en componentes?
El ejercicio parte de un menú de navegación real, similar al de Platzi [0:30]. El primer paso es observar los elementos visuales y agruparlos según su función:
- Logo: incluye la imagen del logo y un banner que indica si hay una sesión en vivo.
- Links: los enlaces principales de navegación.
- Botones de autenticación: opciones para suscribirse o iniciar sesión.
- Campo de búsqueda: compuesto por un input y un botón diseñados para funcionar juntos.
Cada uno de estos bloques puede convertirse en un componente independiente. Pero la verdadera potencia aparece cuando combinamos componentes más pequeños dentro de otros más grandes, lo que se conoce como composición de componentes [1:50].
Por ejemplo, el componente Logo contiene dos componentes internos: la imagen del logo y el banner de sesiones en vivo. La lista de enlaces (LinksList) agrupa varios componentes Link individuales. El componente Menú es, a su vez, la unión de todos los anteriores.
¿Qué sucede cuando un componente necesita cambiar según el contexto?
El menú no siempre luce igual. Si el usuario no está autenticado, se muestran botones de login y suscripción. Si ya es un estudiante suscrito, aparecen sus puntos, notificaciones y perfil [2:50]. Este comportamiento se controla mediante atributos o propiedades, que funcionan de manera análoga a los parámetros de una función.
Así, el componente Menú recibe una propiedad user. Cuando user no existe, se renderizan los botones de autenticación. Cuando sí existe, se muestra un componente UserPreview con un dropdown del perfil.
¿Cómo manejar múltiples variantes de un mismo componente?
Un caso muy frecuente es el del botón. No existe un solo tipo de botón en una aplicación real [3:20]. En lugar de crear componentes separados para cada variante, se usa un único componente Button con propiedades como:
- type: define si el botón tiene fondo de color o es transparente.
- size: controla el tamaño, ya sea small o big.
Con CSS y estas propiedades, un mismo componente puede adoptar distintas apariencias. Sin embargo, cuando la cantidad de variantes crece demasiado, es señal de un problema de estandarización en el diseño [4:05]. Vale la pena revisar con el equipo de diseño cuántas variantes son realmente necesarias.
¿Cuándo conviene crear componentes derivados?
Si escribir Button con sus propiedades una y otra vez resulta repetitivo, se pueden crear componentes derivados [7:20]. Por ejemplo:
BigButton llama internamente a Button con size="big" por defecto.SmallButton hace lo mismo con size="small".
De esta forma el código queda más limpio y se evita repetir configuraciones. Esta técnica aplica también a categorías específicas como los sales buttons (botones para usuarios no suscritos), los student buttons (con un atributo icon que recibe otro componente) y los dropdowns (con áreas de clic y áreas ocultas) [5:10].
¿Se construyen los componentes de lo pequeño a lo grande o al revés?
Durante el análisis se partió de los elementos más pequeños hacia el componente general. Sin embargo, en la práctica real el flujo es inverso [5:55]: se comienza desde la vista más amplia, como la página Home, y se van identificando los componentes necesarios conforme se profundiza.
El componente Home contendría, mediante composición, el Menú, un hero, un título, una descripción y un formulario de registro [6:15]. Cada uno de estos se descompone a su vez en piezas más específicas.
Un detalle importante sobre la sintaxis: cada framework de JavaScript —React, Vue, Angular, Svelte— utiliza su propia forma de escribir componentes. Lo relevante no es memorizar una sintaxis particular, sino comprender el proceso de identificación, creación y composición.
Para que los componentes respondan a las acciones del usuario, es necesario entender conceptos como la reactividad, el estado y el ciclo de vida de los componentes [8:40]. Estas estrategias de rendering determinan cómo se convierte cada componente en el HTML final con el que interactúan los usuarios.
¿Cómo dividirías tú el menú en componentes? Comparte tu propuesta en los comentarios y compara tu proceso mental con el que se presentó aquí.
