Aula 05 - Componentização 🧩

Objetivo

Objetivo: Entender o conceito de componentes, aprender a quebrar sua interface em partes menores e reutilizáveis, e descobrir como passar dados entre elas usando Props.

1. O que são Componentes? 🏗️

Componentes são blocos de construção independentes de uma aplicação. Em vez de criar um arquivo HTML gigante, dividimos o site em partes como Navbar, Sidebar, CardProduto e Footer.

Por que usar componentes?

Reutilização: Crie um botão uma vez e use em todo o site.
Organização: Mais fácil de encontrar e consertar bugs em arquivos pequenos.
Manutenção: Alterar o estilo de um componente reflete em todas as suas instâncias.

2. Hierarquia de Componentes (Mermaid) 📊

graph TD
    App[App.svelte] --> Nav[Navbar.svelte]
    App --> Hero[HeroSection.svelte]
    App --> List[ProductList.svelte]
    List --> Item1[ProductCard.svelte]
    List --> Item2[ProductCard.svelte]
    List --> Item3[ProductCard.svelte]
    App --> Foot[Footer.svelte]

3. Criando e Importando Componentes 📥

Para usar um componente dentro de outro, precisamos importá-lo na seção <script>.

<script>
  import Header from './Header.svelte';
  import Button from './lib/Button.svelte';
</script>

<Header />
<main>
  <p>Conteúdo principal aqui.</p>
  <Button />
</main>

$ mkdir src/lib
$ touch src/lib/Card.svelte
$ # Agora seu componente está pronto para ser editado!

4. Passando Dados via Props (Props) 🎁

As Props (propriedades) permitem que o componente pai envie informações para o componente filho. No Svelte, declaramos uma prop usando a palavra-chave export.

No filho (`Card.svelte`):

<script>
  export let titulo = "Título Padrão";
  export let preco;
</script>

<div class="card">
  <h2>{titulo}</h2>
  <p>Preço: R$ {preco}</p>
</div>

No pai (`App.svelte`):

<Card titulo="Sapatilha" preco={50} />
<Card titulo="Tênis" preco={150} />

Conceito

O export let torna a variável "pública", permitindo que quem usa o componente defina seu valor.

5. Slots: Injetando Conteúdo 📥

Às vezes queremos que o componente seja um "container" para outros elementos. Usamos a tag <slot /> para isso.

<!-- Box.svelte -->
<div class="box">
  <slot></slot> <!-- O conteúdo do pai aparecerá aqui -->
</div>

6. Mini-Projeto: Galeria de Cards 🚀

Vamos colocar em prática: 1. Crie um novo arquivo chamado Card.svelte na pasta lib. 2. Defina props para nome, imagem e descricao. 3. No seu App.svelte, importe este componente. 4. Renderize três instâncias do Card com informações de linguagens de programação diferentes.

Dica

Use nomes de arquivos com a primeira letra maiúscula (PascalCase) para componentes, ex: MeuComponente.svelte. Isso é uma convenção forte no mundo Svelte!

7. Exercício de Fixação 📝

Qual o comando no Svelte para transformar uma variável em uma Prop?
Como você importa um componente chamado Footer.svelte que está na mesma pasta?
Para que serve a tag <slot />?

Próxima Aula: Vamos aprender a lidar com listas e condições usando Loops e Condicionais! 🔁