Componentes de Svelte Explicados: Propiedades y Composición Simple

Pregunta rápida: por qué las apps modernas se sienten tan fluidas aunque por dentro sean extremadamente complejas

Abre Amazon y fíjate en una página de producto. Verás una galería brillante, reseñas, recomendaciones, un formulario de pago listo y el acceso que nunca recuerda tu contraseña. Todo parece una sola página perfecta, pero detrás cada pieza vive en su propio universo, a veces hecha por equipos distintos, en momentos distintos y hasta en lenguajes distintos. Aun así, todo encaja.

Facebook igual: feed, stories, chat, notificaciones. Son trozos separados que juntos crean la ilusión de una app grande y continua.

Esa es la magia de los componentes. Los componentes dividen apps grandes en bloques pequeños y reutilizables, como Lego. Un bloque, una responsabilidad. Los unes y listo: una app completa.

Con Svelte esto es aún más agradable porque un componente es solo un archivo .svelte. Sin plantillas pesadas. Importas y lo usas donde quieras.

Y aquí llegan unas pequeñas superpotencias para manejar datos dentro de componentes: $props para marcar entradas que llegan del padre, $state para el estado local que le pertenece al componente y $derived para calcular valores que se actualizan automáticamente cuando cambian sus dependencias.

Piensa en ellas como tu caja de herramientas para hacer que los componentes se pasen datos, se sincronicen y hagan cosas útiles sin cableado manual.

Antes de empezar recuerda la estructura en SvelteKit: coloca componentes reutilizables en src/lib, úsalos en src/routes/+page.svelte y ejecuta npm run dev. $lib es un alias a src/lib.

Componentes trabajando juntos. Lo potente no es un componente suelto, sino encajarlos como piezas. Imagina una página con cabecera, lista de productos y pie. Cada uno vive en su archivo. En la página principal los importas con el alias $lib y los colocas como etiquetas personalizadas. El resultado es una página modular donde cada pieza se ocupa de su propio marcado, estilos y comportamiento.

Cómo hablan entre sí. Props, pasar datos hacia abajo. Un padre suele pasar datos a un hijo. Un saludo necesita un nombre, un botón necesita un label, una imagen necesita src. En Svelte declaras qué props esperas extrayéndolas con $props. El hijo usa esas props en su marcado y listo.

Modelo mental claro: $props equivale a una cesta con todos los valores que pasa el padre. Al hacer let llaves name llaves igual a $props sacas name de esa cesta para utilizarlo. Exactamente como atributos en HTML, por ejemplo <img src=/cat.png alt=Un gato />.

Valores por defecto en props. Si el padre olvida un prop, puedes asignar valores por defecto al hacer la destructuración con =. Útil para textos de reserva, estilos u opciones opcionales.

Props dinámicas. No solo cadenas: puedes pasar números, objetos, arrays e incluso funciones. Si el nombre del prop y la variable coinciden, puedes pasar el prop con la abreviatura usando llaves.

Estado vs props. Props son entradas externas que vienen del padre. Estado es el dato que el componente posee y gestiona por sí mismo, usualmente en respuesta a la interacción del usuario. Imagen mental: props son los ingredientes que te entregan, estado es el bol de tu cocina donde mezclas y decides.

Ejemplo típico: un contador. Con $state inicias count en 0 y al hacer click se incrementa y la UI reacciona.

Mezclando props y estado. Un contador que arranca en un valor que da el padre pero luego se actualiza dentro del hijo. Tomas initial desde $props y creas count con $state initial. Desde ahí, el hijo controla count sin afectar al padre.

Atajo mental importante. No mutar props directamente. Si haces initial mas mas no obtendrás lo esperado porque los props son de solo lectura. Primero cópialos al estado con $state y trabaja sobre tu copia.

Composición, construir bloques reutilizables. Composición significa unir componentes. A gran escala combinas cabecera, lista y pie; a pequeña escala creas botones reutilizables o tarjetas con cabecera y cuerpo. Es Lego en todos los niveles.

Botón reutilizable. Un componente Button que acepta label con un valor por defecto te permite usar el mismo botón en muchos lugares con distintos textos. Cambias el diseño una vez y se actualiza en todas partes.

Nidificación de componentes. Descompón una Card en CardHeader y CardBody y vuelve a componer en Card. En la página usas varias Cards con distintos props. Partes pequeñas que se unen para formar piezas más grandes y reutilizables.

Valores derivados con $derived. A veces necesitas un valor nuevo calculado a partir de props o estado y que siempre se mantenga actualizado. Cuando el padre actualiza un prop, Svelte no destruye y recrea el hijo, solo actualiza la variable del prop. Si hiciste un cálculo con let normal se evaluó una sola vez. Con $derived le dices a Svelte que lo mantenga sincronizado con sus dependencias.

Ejemplo de precio con descuento. El hijo recibe price y discount por $props y calcula discountedPrice con $derived price menos price por discount. Si el padre cambia discount, discountedPrice se recalcula solo y la UI refleja el cambio sin trabajo extra.

Reglas rápidas. $props es entrada externa del padre. $state es dato interno que controla el componente. $derived son valores computados reactivos que se recalculan cuando cambian sus fuentes.

Pequeños tropiezos con props. Uno, olvidar $props. Declarar let name sin extraerlo de $props no lo convierte en prop, el hijo nunca lo recibirá. Dos, palabras reservadas. Evita usar nombres como class o for y elige variantes como cssClass. Tres, flujo en un solo sentido. Los props bajan de padre a hijo. El hijo no puede actualizar directamente el dato del padre. Para comunicación ascendente se usan eventos o binding, tema del siguiente capítulo.

Resumen. Componentes son bloques Lego. $props pasa datos hacia abajo con defaults y valores dinámicos. $state gestiona datos propios del componente. $derived mantiene en sincronía los cálculos. La composición te da reutilización y escalabilidad. El flujo de datos es unidireccional y la reactividad se dispara con asignaciones.

Qué sigue. Hasta ahora los hijos aceptan props en silencio. Pero las apps no son de una sola vía. Un hijo necesita avisar cuando se hace click o cuando un formulario se envía. Ahí entran eventos y binding, la columna vertebral de la comunicación bidireccional en Svelte.

En Q2BSTUDIO aplicamos estos principios de componentes y reactividad para crear aplicaciones a medida y software a medida de alto rendimiento, integradas con backends modernos, analítica y despliegues robustos. Si buscas un partner para diseñar, construir e integrar tu próxima plataforma multiplataforma, descubre cómo podemos ayudarte en nuestro servicio de desarrollo de aplicaciones y software multiplataforma.

Además, somos especialistas en inteligencia artificial e ia para empresas, agentes IA, servicios inteligencia de negocio con power bi, ciberseguridad y pentesting, así como servicios cloud aws y azure y automatización de procesos. Integramos pipelines de datos, dashboards, modelos de IA y despliegues nativos en la nube para que tu producto escale con seguridad y velocidad. Conoce cómo la IA aplicada a productos digitales acelera tu roadmap en nuestra página de inteligencia artificial.

Palabras clave que dominamos en proyectos reales: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi y automatización de procesos. Si quieres que tu próxima app en Svelte o SvelteKit sea rápida, segura y mantenible, diseñamos arquitectura de componentes, composición, props, estado y valores derivados para que todo fluya con la suavidad que esperas de un producto moderno.