Exercícios 05 - Componentização 🧩

🟢 Básicos

1. Conceito: Por que dividir uma aplicação em componentes é melhor do que ter um único arquivo gigante?
2. Importação: Escreva a linha de código necessária para importar um componente chamado Header.svelte que está dentro da pasta lib.

🟡 Intermediários

1. Props: Como você declara uma variável em um componente filho para que o componente pai possa enviar um valor para ela?
2. Slots: Imagine que você criou um componente Moldura.svelte. Como você faria para que qualquer conteúdo colocado dentro dele (como um texto ou outra imagem) apareça em um lugar específico do seu HTML?

🔴 Desafio

1. Pai e Filho na Prática:
   • Crie um componente chamado Produto.svelte.
   • Ele deve receber 3 props: nome, preco e disponivel (booleano).
   • No seu App.svelte, use o componente Produto três vezes, passando dados diferentes para cada um.
   • No componente Produto, adicione um estilo que mude a cor do nome para cinza caso o produto não esteja disponivel.

📚 Gabarito e Soluções Comentadas

// Solução de referência para: Importação
function solucaoExercicio() {
    console.log("Executando validação de: Componentização");
    return true;
}

solucaoExercicio();