A Anatomia de um Componente

Todo componente Svelte vive em um arquivo .svelte. Esses arquivos têm uma estrutura simples que mantém sua lógica, markup e estilos juntos em um só lugar. Entender essa estrutura é fundamental para tudo que construiremos no BookIt.

O Que Você Aprenderá

As três seções de um arquivo .svelte
Como script, markup e style funcionam juntos
Por que colocar tudo em um único arquivo é poderoso

Abra Seu Primeiro Componente

Vamos ver a página inicial que o SvelteKit gerou. Abra 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 é o componente Svelte mais simples possível — apenas markup HTML. Mas a maioria dos componentes tem três seções.

As Três Seções

Um componente Svelte completo pode ter até três seções:

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

<!-- HTML markup goes here -->

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

Vamos ver cada uma delas.

A Seção Script

A tag <script> contém o JavaScript do seu componente. É aqui que você define variáveis, importa outros componentes e escreve a lógica.

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

Variáveis definidas aqui ficam disponíveis no seu markup. Adicionaremos reatividade a essas variáveis no Módulo 4, mas por enquanto, pense nelas como variáveis JavaScript comuns.

A Seção de Markup

A seção de markup é HTML com superpoderes. Ela fica entre as tags <script> e <style> (ou pode ser o arquivo inteiro se você não precisar das outras).

Você pode usar chaves {} para inserir valores JavaScript:

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

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

Isso renderiza:

Bem-vindo ao BookIt
Temos 10 serviços disponíveis

Qualquer coisa dentro de {} é JavaScript — variáveis, expressões, chamadas de função. O compilador cuida de atualizar o DOM quando os valores mudam.

A Seção de Style

A tag <style> contém CSS que é automaticamente escopado para este componente. Os estilos aqui não vazarão e não afetarão outras partes do seu app.

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

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

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

Aquele estilo de h1 só se aplica ao <h1> deste componente. Se outro componente tiver um <h1>, ele não será afetado. Esse escopo é automático — você não precisa inventar nomes de classe únicos nem usar módulos CSS.

Um Exemplo Real

Vamos ver como essas seções funcionam juntas em um componente que construiremos para o BookIt. Aqui está uma prévia de um card de serviço:

<!-- 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>

Observe como tudo relacionado a este componente vive em um único arquivo:

Script: Recebe name, price e duration como props (abordaremos $props() no Módulo 7)
Markup: Usa esses valores na estrutura HTML
Style: Define a aparência do card, escopado apenas para este componente

A Ordem das Seções Não Importa

Você pode organizar as seções em qualquer ordem. Todas estas são 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>

A maioria dos desenvolvedores coloca o <script> primeiro porque geralmente você quer ver os dados e a lógica antes do markup que os utiliza. Mas é uma questão de preferência.

As Seções São Opcionais

Você só precisa incluir as seções que usar:

<!-- 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>

Comece com o que você precisa. Adicione seções conforme seu componente cresce.

Por Que a Colocação Conjunta Funciona

Manter script, markup e estilos em um único arquivo pode parecer incomum se você está acostumado a separar HTML, CSS e JavaScript. Mas há um bom motivo para o Svelte (e o React e Vue modernos) fazerem dessa forma.

Um componente é uma unidade de UI. Tudo sobre essa unidade — sua lógica, estrutura e aparência — pertence junto. Quando você precisa mudar como um card de serviço aparece, você abre um arquivo, não três.

Isso é especialmente poderoso conforme seu app cresce. O BookIt terá dezenas de componentes. Encontrá-los e atualizá-los é simples quando cada componente é autocontido.

Erros Comuns

Esquecer as Chaves

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

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

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

Se você vir nomes de variáveis aparecendo literalmente na sua página, é porque esqueceu as chaves.

Usar Palavras-chave do JavaScript como Nomes de Variáveis

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

Resumo

Componentes Svelte vivem em arquivos .svelte com três seções opcionais: <script> para lógica JavaScript, markup para estrutura HTML e <style> para CSS escopado. As chaves {} permitem inserir valores JavaScript no seu markup.

Principais conclusões:

Script contém lógica, markup contém estrutura, style contém aparência
Use {variable} para inserir valores JavaScript no HTML
Os estilos são automaticamente escopados ao componente
As três seções são opcionais — use o que você precisar

Próximos Passos

Você entende a estrutura de um componente Svelte. Na próxima lição, Execute Seu Primeiro Servidor de Desenvolvimento, vamos garantir que seu ambiente de desenvolvimento esteja configurado para um fluxo de trabalho tranquilo enquanto construímos o BookIt.

Veja Também

Documentação do Svelte: Formato de componente