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, marcação 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, marcação e estilo funcionam juntos
Por que colocar tudo em um único arquivo é poderoso

Abra Seu Primeiro Componente

Vamos dar uma olhada na página inicial gerada pelo SvelteKit. 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 marcação 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 analisar 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 na sua marcação. Adicionaremos reatividade a essas variáveis no Módulo 4, mas por enquanto, pense nelas como variáveis JavaScript comuns.

A Seção de Marcação

A seção de marcação é 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 Estilo

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 se aplica apenas 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 ou 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)
Marcação: Usa esses valores na estrutura HTML
Estilo: 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 da marcação que os utiliza. Mas é uma questão de preferência.

As Seções São Opcionais

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

<!-- 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 Colocalização Funciona

Manter script, marcação e estilos em um único arquivo pode parecer incomum se você está acostumado a separar HTML, CSS e JavaScript. Mas há uma boa razão 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 a aparência de um card de serviço, 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ê ver nomes de variáveis aparecendo literalmente na sua página, você 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, marcação para estrutura HTML e <style> para CSS escopado. As chaves {} permitem inserir valores JavaScript na sua marcação.

Principais conclusões:

Script contém a lógica, marcação contém a estrutura, estilo contém a aparência
Use {variavel} para inserir valores JavaScript no HTML
Os estilos são automaticamente escopados para o 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, garantiremos 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