La Anatomía de un Componente

Cada componente Svelte vive en un archivo .svelte. Estos archivos tienen una estructura simple que mantiene tu lógica, marcado y estilos juntos en un solo lugar. Entender esta estructura es fundamental para todo lo que construiremos en BookIt.

Lo que Aprenderás

Las tres secciones de un archivo .svelte
Cómo el script, el marcado y los estilos trabajan juntos
Por qué colocar todo en un solo archivo es poderoso

Abre tu Primer Componente

Veamos la página principal que SvelteKit generó. Abre src/routes/+page.svelte:

<!-- filename: src/routes/+page.svelte -->
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

Este es el componente Svelte más simple posible — solo marcado HTML. Pero la mayoría de los componentes tienen tres secciones.

Las Tres Secciones

Un componente Svelte completo puede tener hasta tres secciones:

<script>
  // JavaScript logic goes here
</script>

<!-- HTML markup goes here -->

<style>
  /* CSS styles go here */
</style>

Veamos cada una.

La Sección Script

La etiqueta <script> contiene el JavaScript de tu componente. Aquí es donde defines variables, importas otros componentes y escribes lógica.

<script>
  import ServiceCard from '$lib/components/ServiceCard.svelte'
  
  let name = 'BookIt'
  let serviceCount = 5
</script>

Las variables definidas aquí están disponibles en tu marcado. Agregaremos reactividad a estas variables en el Módulo 4, pero por ahora, piénsalas como variables JavaScript regulares.

La Sección de Marcado

La sección de marcado es HTML con superpoderes. Se ubica entre las etiquetas <script> y <style> (o puede ser el archivo completo si no necesitas las otras).

Puedes usar llaves {} para insertar valores de JavaScript:

<script>
  let name = 'BookIt'
</script>

<h1>Welcome to {name}</h1>
<p>We have {5 * 2} services available</p>

Esto renderiza:

Bienvenido a BookIt
Tenemos 10 servicios disponibles

Cualquier cosa dentro de {} es JavaScript — variables, expresiones, llamadas a funciones. El compilador se encarga de actualizar el DOM cuando los valores cambian.

La Sección de Estilos

La etiqueta <style> contiene CSS que se aplica automáticamente con alcance limitado a este componente. Los estilos aquí no se filtrarán ni afectarán otras partes de tu aplicación.

<script>
  let name = 'BookIt'
</script>

<h1>Welcome to {name}</h1>

<style>
  h1 {
    color: #2563eb;
    font-size: 2rem;
  }
</style>

Ese estilo h1 solo se aplica al <h1> de este componente. Si otro componente tiene un <h1>, no se verá afectado. Este alcance es automático — no necesitas inventar nombres de clases únicos ni usar módulos CSS.

Un Ejemplo Real

Veamos cómo estas secciones trabajan juntas en un componente que construiremos para BookIt. Aquí hay una vista previa de una tarjeta de servicio:

<!-- filename: src/lib/components/ServiceCard.svelte -->
<script>
  let { name, price, duration } = $props()
</script>

<article class="card">
  <h3>{name}</h3>
  <p class="price">${price}</p>
  <p class="duration">{duration} minutes</p>
</article>

<style>
  .card {
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
  }
  
  h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
  }
  
  .price {
    font-weight: 600;
    color: #059669;
  }
  
  .duration {
    color: #6b7280;
    font-size: 0.875rem;
  }
</style>

Observa cómo todo lo relacionado con este componente vive en un solo archivo:

Script: Recibe name, price y duration como props (cubriremos $props() en el Módulo 7)
Marcado: Usa esos valores en la estructura HTML
Estilo: Define cómo se ve la tarjeta, con alcance limitado solo a este componente

El Orden de las Secciones No Importa

Puedes organizar las secciones en cualquier orden. Todas estas son válidas:

<!-- Script first (most common) -->
<script>...</script>
<div>...</div>
<style>...</style>

<!-- Style first -->
<style>...</style>
<script>...</script>
<div>...</div>

<!-- Markup first -->
<div>...</div>
<script>...</script>
<style>...</style>

La mayoría de los desarrolladores ponen <script> primero porque generalmente quieres ver los datos y la lógica antes que el marcado que los utiliza. Pero es cuestión de preferencia.

Las Secciones Son Opcionales

Solo necesitas incluir las secciones que uses:

<!-- Just markup — valid -->
<h1>Hello</h1>

<!-- Markup and style, no script — valid -->
<h1>Hello</h1>
<style>
  h1 { color: blue; }
</style>

<!-- Script and markup, no style — valid -->
<script>
  let name = 'World'
</script>
<h1>Hello {name}</h1>

Comienza con lo que necesitas. Agrega secciones a medida que tu componente crece.

Por Qué Funciona la Colocalización

Mantener el script, el marcado y los estilos en un solo archivo puede sentirse inusual si estás acostumbrado a separar HTML, CSS y JavaScript. Pero hay una buena razón por la que Svelte (y el React y Vue modernos) lo hacen de esta manera.

Un componente es una unidad de UI. Todo sobre esa unidad — su lógica, estructura y apariencia — pertenece junto. Cuando necesitas cambiar cómo se ve una tarjeta de servicio, abres un solo archivo, no tres.

Esto es especialmente poderoso a medida que tu aplicación crece. BookIt tendrá docenas de componentes. Encontrarlos y actualizarlos es sencillo cuando cada componente es autocontenido.

Errores Comunes

Olvidar las Llaves

<script>
  let name = 'BookIt'
</script>

<!-- ❌ Wrong — displays literal text "name" -->
<h1>Welcome to name</h1>

<!-- ✅ Correct — displays "BookIt" -->
<h1>Welcome to {name}</h1>

Si ves los nombres de las variables apareciendo literalmente en tu página, olvidaste las llaves.

Usar Palabras Clave de JavaScript como Nombres de Variables

<script>
  // ❌ Wrong — "class" is a reserved word
  let class = 'premium'
  
  // ✅ Correct — use a different name
  let tier = 'premium'
</script>

Resumen

Los componentes Svelte viven en archivos .svelte con tres secciones opcionales: <script> para la lógica JavaScript, marcado para la estructura HTML y <style> para CSS con alcance limitado. Las llaves {} te permiten insertar valores de JavaScript en tu marcado.

Puntos clave:

El script contiene lógica, el marcado contiene estructura, el estilo contiene apariencia
Usa {variable} para insertar valores de JavaScript en HTML
Los estilos tienen alcance automáticamente limitado al componente
Las tres secciones son opcionales — usa lo que necesites

Próximos Pasos

Ya entiendes la estructura de un componente Svelte. En la próxima lección, Ejecuta Tu Primer Servidor de Desarrollo, nos aseguraremos de que tu entorno de desarrollo esté configurado para un flujo de trabajo sin inconvenientes mientras construimos BookIt.

Ver También

Documentación de Svelte: Formato de componentes