El Corazón de BookIt

Toda aplicación de reservas necesita un formulario — es la forma principal en que los clientes interactúan con tu servicio. Ingresan sus datos, seleccionan lo que quieren, eligen cuándo lo quieren y envían su reserva. Sin este formulario, BookIt sería solo un folleto estático.

En esta lección, construirás este formulario como un componente reutilizable. Los componentes son una de las características más poderosas de Svelte. En lugar de copiar y pegar el mismo HTML del formulario en múltiples páginas, lo escribes una vez y lo usas en cualquier lugar.

¿Qué es un Componente?

Piensa en un componente como una etiqueta HTML personalizada que tú defines. Así como puedes escribir <button> o <input> y funcionan en cualquier lugar, puedes crear una etiqueta <BookingForm> y usarla donde necesites un formulario de reserva.

Los componentes encapsulan:

Estructura (marcado HTML)
Comportamiento (lógica JavaScript)
Estilos (CSS)

Esto hace que tu código sea modular, mantenible y más fácil de comprender.

Lo que Aprenderás

Crear un nuevo archivo de componente
Construir la estructura básica de un formulario con HTML
Importar y usar el componente en una página

Crear el Archivo del Componente

Los componentes en Svelte son simplemente archivos .svelte — eso es todo. Cualquier archivo con extensión .svelte es un componente que puede importarse y reutilizarse en toda tu aplicación.

La Convención de la Carpeta `src/lib`

SvelteKit tiene una carpeta especial llamada src/lib para el código compartido. Aquí es donde colocas:

Componentes reutilizables (como nuestro formulario de reserva)
Funciones utilitarias (formateadores de fechas, validadores, etc.)
Definiciones de tipos (interfaces de TypeScript)
Constantes y configuración

Todo lo que pongas en src/lib puede importarse desde cualquier parte de tu aplicación usando el alias $lib (más sobre esto pronto).

Creando el Componente

Vamos a crear nuestro primer componente de Svelte:

Crea el directorio src/lib/components/ si no existe
Dentro de él, crea un nuevo archivo llamado BookingForm.svelte

src/
├── lib/                          ← Shared code
│   └── components/               ← Reusable UI components
│       └── BookingForm.svelte    ← Create this file
└── routes/                       ← Pages and endpoints
    └── ...

¿Por qué components/? Aunque podrías poner BookingForm.svelte directamente en src/lib, crear una subcarpeta components/ mantiene las cosas organizadas. A medida que tu aplicación crece, podrías tener docenas de componentes, y tenerlos en su propia carpeta evita el desorden.

Convención de nombres: Los archivos de componentes típicamente se nombran en PascalCase (como BookingForm.svelte), coincidiendo con la forma en que los usarás: <BookingForm />. Esto deja claro de un vistazo que es un componente, no una función utilitaria ni una constante.

Construir la Estructura del Formulario

Ahora construyamos el formulario en sí. Empezaremos con HTML semántico puro — sin JavaScript, sin reactividad, solo un formulario bien estructurado. Tener una buena base en HTML es crucial porque afecta la accesibilidad, la experiencia del usuario y lo fácil que será agregar interactividad más adelante.

¿Qué Hace un Buen Formulario?

Antes de escribir código, pensemos en lo que necesita un formulario de reserva:

Etiquetas claras — Los usuarios deben saber para qué es cada campo
Tipos de entrada apropiados — type="email" para correo electrónico, type="date" para fechas, etc.
Placeholders útiles — Ejemplos de qué ingresar
Agrupación lógica — Campos relacionados agrupados juntos
Marcado accesible — Etiquetas asociadas con los inputs para lectores de pantalla

Construyendo el HTML

Agrega esta estructura HTML a tu archivo BookingForm.svelte:

<!-- filename: src/lib/components/BookingForm.svelte -->
<form>
	<h2>Book a Service</h2>

	<div class="field">
		<label for="name">Your Name</label>
		<input type="text" id="name" name="name" placeholder="Jane Smith" />
	</div>

	<div class="field">
		<label for="email">Email Address</label>
		<input type="email" id="email" name="email" placeholder="jane@example.com" />
	</div>

	<div class="field">
		<label for="date">Preferred Date</label>
		<input type="date" id="date" name="date" />
	</div>

	<div class="field">
		<label for="time">Preferred Time</label>
		<select id="time" name="time">
			<option value="">Select a time...</option>
			<option value="09:00">9:00 AM</option>
			<option value="10:00">10:00 AM</option>
			<option value="11:00">11:00 AM</option>
			<option value="13:00">1:00 PM</option>
			<option value="14:00">2:00 PM</option>
			<option value="15:00">3:00 PM</option>
		</select>
	</div>

	<div class="field">
		<label for="notes">Additional Notes</label>
		<textarea id="notes" name="notes" rows="3" placeholder="Any special requests?"></textarea>
	</div>

	<button type="submit">Request Booking</button>
</form>

Entendiendo la Estructura

Analicemos qué hace cada parte:

El contenedor del formulario:

<form>

El elemento <form> envuelve todos los inputs. Cuando los usuarios presionan Enter o hacen clic en el botón de envío, el formulario dispara un evento de envío. Lo manejaremos en lecciones posteriores.

Patrón de contenedor de campo:

<div class="field">
	<label for="name">Your Name</label>
	<input type="text" id="name" name="name" placeholder="Jane Smith" />
</div>

Cada campo está envuelto en un <div class="field">. Esto:

Agrupa la etiqueta y el input juntos
Facilita el estilizado (podemos apuntar a .field en CSS)
Crea secciones semánticas en el formulario

La conexión entre for e id:

El atributo for="name" de la etiqueta coincide con el id="name" del input
Esto asocia la etiqueta con el input
Hacer clic en la etiqueta enfoca el input
Los lectores de pantalla anuncian la etiqueta cuando el input está enfocado

Los tipos de input importan:

type="text" — Input de texto plano para nombres
type="email" — Valida el formato de correo electrónico, muestra el teclado de email en móvil
type="date" — Muestra un selector de fechas en navegadores modernos
<select> — Desplegable para elegir entre opciones predefinidas
<textarea> — Texto multilínea para notas

Por qué esto es HTML puro: Nota que no hay $state, no hay variables reactivas, no hay manejadores de eventos. Esto es intencional. Estamos construyendo la estructura primero, luego agregaremos el comportamiento. Esta es una buena práctica — hacer el HTML bien, luego hacerlo interactivo.

Usar el Componente

Ahora que hemos creado el componente del formulario, vamos a usarlo en la página de detalle del servicio. Aquí es donde los usuarios verán la información del servicio y podrán reservar ese servicio específico.

Cómo Funcionan las Importaciones de Componentes

En Svelte, usar un componente es un proceso de dos pasos:

Importar el componente en tu etiqueta <script>
Usarlo en tu marcado como una etiqueta HTML

El nombre del componente se convierte en una etiqueta HTML personalizada. Si importas BookingForm, lo usas como <BookingForm />. La barra de cierre automático (/>) es importante — los componentes sin hijos deben cerrarse automáticamente.

Agregando a la Página del Servicio

Actualiza src/routes/services/[slug]/+page.svelte:

<!-- filename: src/routes/services/[slug]/+page.svelte -->
<script>
	import BookingForm from '$lib/components/BookingForm.svelte'

	let { data } = $props()
</script>

<nav>
	<a href="/services">← Back to Services</a>
</nav>

{#if data.service}
	<h1>{data.service.name}</h1>
	<p>{data.service.description}</p>

	<dl>
		<dt>Price</dt>
		<dd>${data.service.price}</dd>

		<dt>Duration</dt>
		<dd>{data.service.duration} minutes</dd>
	</dl>

	<BookingForm />
{:else}
	<h1>Service Not Found</h1>
	<p>We couldn't find that service.</p>
	<a href="/services">Browse all services</a>
{/if}

¿Qué Cambió?

Dos adiciones pequeñas pero cruciales:

1. La instrucción de importación:

import BookingForm from '$lib/components/BookingForm.svelte';

Esto le dice a Svelte: "Quiero usar el componente BookingForm del archivo en src/lib/components/BookingForm.svelte."

import BookingForm — El nombre que usarás en tu marcado (puede ser cualquier cosa, pero debería coincidir con el nombre del archivo)
from '$lib/components/BookingForm.svelte' — Dónde encontrar el componente
La extensión .svelte es obligatoria (a diferencia de algunos frameworks donde puedes omitirla)

2. Usando el componente:

<BookingForm />

Esto renderiza el componente en esta ubicación de tu página. Es como colocar el contenido completo de BookingForm.svelte justo aquí, pero de una manera limpia y reutilizable.

El / al final significa que es una etiqueta de cierre automático (sin hijos). Para componentes con hijos, escribirías <BookingForm>contenido</BookingForm>, pero nuestro formulario no necesita eso.

¿Dónde en la Página?

Colocamos <BookingForm /> después de los detalles del servicio:

<h1>{data.service.name}</h1>
<p>{data.service.description}</p>
<dl>...</dl>
<BookingForm /> ← Added here

Esto crea un flujo lógico: los usuarios leen sobre el servicio, luego ven inmediatamente cómo reservarlo.

El Alias `$lib`

Nota que importamos desde $lib/components/BookingForm.svelte, no una ruta relativa como ../../../lib/components/BookingForm.svelte.

SvelteKit proporciona el alias $lib que siempre apunta a src/lib. Esto hace que las importaciones sean más limpias y evita el lío de ../../../ a medida que tu proyecto crece.

<!-- ❌ Fragile — breaks if you move the file -->
import BookingForm from '../../../lib/components/BookingForm.svelte';

<!-- ✅ Stable — always works from anywhere -->
import BookingForm from '$lib/components/BookingForm.svelte';

Probar el Formulario

Verifiquemos que todo funciona. Asegúrate de que tu servidor de desarrollo esté corriendo (npm run dev o pnpm dev) y visita una página de detalle de servicio.

Pasos para Probar

Navega a un servicio:
- Ve a http://localhost:5173/services
- Haz clic en cualquier servicio (p. ej., "Lawn Mowing")
- O visita directamente http://localhost:5173/services/lawn-mowing
Verifica el diseño: Deberías ver (de arriba hacia abajo):
- Nombre del servicio como encabezado
- Descripción del servicio
- Información de precio y duración
- El formulario de reserva con todos los campos
Intenta interactuar con el formulario:
- Escribe en el campo "Your Name" — aparece el texto
- Escribe en el campo "Email Address" — aparece el texto
- Haz clic en el selector de fecha — se abre el calendario
- Selecciona una hora del desplegable — cambia la opción
- Escribe en el campo de notas — aparece el texto
Haz clic en el botón de envío:
- La página se recarga
- Todos los datos que escribiste desaparecen
- Nada se guarda ni se envía a ningún lugar

Qué Funciona y Qué No

✅ Funcionando:

El formulario se muestra correctamente
Todos los campos son visibles y con estilos
Puedes escribir y seleccionar valores
La estructura HTML es correcta

❌ Todavía no funciona:

Los valores escritos no se rastrean en JavaScript
Nada ocurre al enviar el formulario
Sin validación
Sin vista previa de la reserva
Los datos no se guardan en ningún lugar

Por Qué Se Siente "Roto"

El formulario puede sentirse roto porque todavía no hace nada. ¡Esto es esperado! Hemos construido la estructura (el esqueleto HTML), pero no hemos agregado el comportamiento (el JavaScript que rastrea y responde a la entrada del usuario).

Eso es lo que corregiremos en la próxima lección agregando $state para rastrear los campos del formulario.

¿Por Qué Componentes?

Quizás te estés preguntando: "¿Por qué crear un archivo separado? ¿Por qué no poner el HTML del formulario directamente en la página del servicio?"

Esta es una excelente pregunta, especialmente si eres nuevo en el desarrollo basado en componentes. Exploremos los beneficios.

1. Reutilización: Escribe Una Vez, Úsalo en Todas Partes

Imagina que decides mostrar el formulario de reserva también en:

Una página dedicada /book
Un popup modal cuando los usuarios hagan clic en "Reserva Rápida"
Una página de administración para crear reservas de prueba

Sin un componente, copiarías y pegarías el HTML del formulario en todos estos lugares. Ahora tienes cuatro copias del mismo formulario. Si necesitas agregar un nuevo campo, lo cambias cuatro veces. Si encuentras un error, lo corriges cuatro veces. Esto es una pesadilla de mantenimiento.

Con un componente:

<!-- Any page -->
<script>
	import BookingForm from '$lib/components/BookingForm.svelte'
</script>

<BookingForm />

Un componente, usos infinitos. Cámbialo una vez, se actualiza en todas partes.

2. Organización: Separación de Responsabilidades

Las páginas deben enfocarse en aspectos a nivel de página:

Qué datos cargar
Diseño y estructura de la página
Qué componentes mostrar

No deben estar sobrecargadas con los detalles de cada formulario, modal o widget complejo. Los componentes te permiten separar el qué (la página) del cómo (la implementación del componente).

Compara:

<!-- ❌ Page does everything —  hard to scan -->
<h1>Service Details</h1>
<!-- 150 lines of form HTML -->
<!-- 50 lines of form logic -->
<!-- 80 lines of form styling -->

Versus:

<!-- ✅ Page delegates to component — easy to understand -->
<h1>Service Details</h1>
<BookingForm />

La segunda versión es más fácil de entender de un vistazo.

3. Aislamiento: Prevenir Errores

Cuando la lógica del formulario vive en el mismo archivo que la lógica de la página, pueden interferirse entre sí. Los nombres de variables pueden entrar en conflicto. Los manejadores de eventos pueden afectar accidentalmente a los elementos equivocados.

Los componentes crean límites. La lógica del formulario permanece en BookingForm.svelte. La lógica de la página permanece en +page.svelte. Se comunican a través de interfaces bien definidas (props y eventos), no compartiendo estado global.

4. Facilidad de Prueba

¿Necesitas probar el formulario de reserva? Si es un componente, puedes:

<script>
	import BookingForm from '$lib/components/BookingForm.svelte'
	import { mount } from 'svelte'

	// Test the form in isolation
	const form = mount(BookingForm, { target: document.body })
</script>

Si está incrustado en una página, tendrías que probar toda la página, la carga de datos del servicio, el enrutamiento y todo lo demás solo para probar el formulario.

Paralelo con el Mundo Real

Piensa en cocinar. Podrías escribir una receta como un párrafo gigante que describa todo, desde las compras hasta el emplatado. O podrías dividirla en secciones: ingredientes, preparación, cocción, servicio.

Los componentes son como esas secciones — dividen interfaces de usuario complejas en piezas manejables y con nombre.

Cuándo Crear Componentes

Como regla general, crea un componente cuando:

Lo usarás en múltiples lugares
Es lo suficientemente complejo como para saturar el archivo padre
Representa un concepto de UI distinto (como un formulario, tarjeta o modal)
Quieres probarlo de forma independiente

Por ahora, solo ten en cuenta que el pensamiento basado en componentes es fundamental para el desarrollo web moderno. Exploraremos esto en profundidad en el Módulo 7: Componentes.

La Estructura de Tu Proyecto

src/
├── lib/
│   └── components/
│       └── BookingForm.svelte    ← New component
└── routes/
    └── services/
        └── [slug]/
            ├── +page.js
            └── +page.svelte      ← Uses BookingForm

Errores Comunes

Ruta de Importación Incorrecta

<!-- ❌ Missing file extension -->
import BookingForm from '$lib/components/BookingForm';

<!-- ✅ Include .svelte extension -->
import BookingForm from '$lib/components/BookingForm.svelte';

Las importaciones de componentes Svelte requieren la extensión .svelte.

Componente Fuera de `src/lib`

Técnicamente puedes poner componentes en cualquier lugar, pero src/lib es la convención. Si creas componentes en src/components en su lugar, el alias $lib no funcionará — necesitarías importaciones relativas.

Resumen

Has creado el formulario de reservas de BookIt como un componente reutilizable. Vive en src/lib/components y puede importarse desde cualquier lugar usando el alias $lib. El formulario se renderiza pero todavía no es interactivo.

Conclusiones clave:

Los componentes son archivos .svelte que importas y usas como etiquetas HTML
Coloca los componentes reutilizables en src/lib/components
Usa el alias $lib para importaciones limpias

Próximos Pasos

El formulario se muestra pero no rastrea lo que escriben los usuarios. Continúa con Rastrear Campos del Formulario con $state para hacer el formulario reactivo.