render_macros: false

Aula 05 - Componentização 🧩

Dividir para Conquistar

Agenda de Hoje 📅

1. O que é um Componente?
2. Criando o Componente Filho
3. Propriedades (Props)
4. Valores Padrão
5. Conteúdo Flexível com Slots
6. Prática: Card Modular

1. O que é um Componente? 🧱

• É um pedaço autônomo da interface.
• Possui seu próprio HTML, CSS e JS.
• Pode ser reutilizado em diferentes partes do site.

2. Por que usar Componentes? 🤔

• Manutenção: Corrija em um lugar, atualize em todos.
• Legibilidade: O arquivo App.svelte fica limpo.
• Colaboração: Diferentes pessoas trabalham em arquivos diferentes.

3. Criando um Componente Filho 🐣

Passo 1: Criar o arquivo

No VS Code, crie src/lib/Botao.svelte:

<button>Clique aqui!</button>

<style>
  button { background: blue; color: white; }
</style>

Passo 2: Importar no Pai (App.svelte)

<script>
  import Botao from './lib/Botao.svelte';
</script>

<h1>Meu Site</h1>
<Botao />

4. O que são Props? 🎁

• São "variáveis externas" que o componente recebe.
• Permitem que o componente Pai configure o componente Filho.

4.1 Declarando Props (export)

No Svelte, usamos a palavra export let para dizer: "Esta variável pode ser preenchida de fora".

<!-- Item.svelte -->
<script>
  export let texto;
</script>

<li>{texto}</li>

4.2 Passando Props

<!-- App.svelte -->
<Item texto="Estudar Svelte" />
<Item texto="Comprar café" />

5. Valores Padrão (Fallback) 🛡️

• E se o pai esquecer de enviar a prop?
• Podemos definir um valor default na declaração.

<script>
  export let cor = "gray"; // Padrão é cinza
</script>

<div style="background: {cor}"> ... </div>

6. Sincronização de Dados 📦

graph TD
    P[Componente Pai] -->|Envia Dados| F1[Filho A]
    P -->|Envia Dados| F2[Filho B]
    F1 -->|Props| UI1((Tela))
    F2 -->|Props| UI2((Tela))

7. O Poder do <slot /> 🕳️

• E se quisermos passar HTML inteiro para dentro do componente?
• O <slot /> serve como um "espaaço reservado".

7.1 Exemplo de Slot

<!-- Card.svelte -->
<div class="card">
  <slot />
</div>

<!-- App.svelte -->
<Card>
  <h3>Título do Card</h3>
  <p>Conteúdo qualquer aqui dentro.</p>
</Card>

8. Organização Profissional 📂

• Guarde componentes em src/lib/components/.
• Use nomes em PascalCase (Ex: MenuNav.svelte).
• Diferencie tags HTML (minúsculas) de Componentes (Maiúsculas).

9. Prática: Lista de Frutas 🍎

• Crie um componente Fruta.
• Ele deve receber nome e cor via props.
• No App.svelte, chame o componente 3 vezes com frutas diferentes.

10. Resumo da Aula ✅

• Componentes são blocos reutilizáveis.
• export let declara uma Prop (entrada de dados).
• <slot /> permite injetar conteúdo no meio do componente.

Próxima Aula: Lógica e Loops 🔁

• O bloco {#if}.
• O bloco {#each}.
• Listas dinâmicas.

Dúvidas? 🤔

"Componentização não é sobre tecnologia, é sobre organização do pensamento."