Pular para conteúdo

Aula 03 - Estrutura de Projeto e Sintaxe Básica 📜

Objetivo

Objetivo: Entender a anatomia de um componente Svelte, aprender como organizar seu código unindo lógica, estrutura e estilo em um só lugar, e dominar a exibição de dados dinâmicos.

1. Anatomia de um Componente Svelte 🧬

Diferente de outros frameworks onde você mistura HTML e JavaScript de forma complexa, um arquivo .svelte é extremamente organizado e intuitivo. Ele se divide em três partes principais:

1.1 O Script (<script>)

Onde fica toda a lógica JavaScript do seu componente (variáveis, funções, imports).

1.2 O Markup (HTML)

O corpo do seu componente. É HTML puro, com alguns "superpoderes" do Svelte.

1.3 O Style (<style>)

Onde você coloca o CSS. Importante: Por padrão, o CSS no Svelte é escopado, o que significa que ele só afeta o componente atual.

2. Visualizando a Estrutura (Mermaid) 📊

graph TD
    A[Arquivo .svelte] --> B["script (Lógica)"]
    A --> C["Markup (Estrutura HTML)"]
    A --> D["style (Aparência)"]

    subgraph "Exemplo Prático"
        B1["let nome = 'Mundo';"]
        C1["h1 Olá {nome} /h1"]
        D1["h1 { color: orange; }"]
    end

    B --- B1
    C --- C1
    D --- D1

3. Interpolação de Variáveis {} ✏️

Para exibir um valor do seu JavaScript no HTML, usamos as chaves {}. Isso é chamado de interpolação.

<script>
  let framework = "Svelte";
  let versao = 5;
</script>

<h1>Aprendendo {framework} na versão {versao}!</h1>

Conceito

Tudo o que estiver dentro das chaves é tratado como JavaScript puro. Você pode até fazer cálculos: {2 + 2} resultará em 4 na tela.

4. O Cinto de Utilidades: Estrutura do Projeto 📂

Ao abrir seu projeto no VS Code, você verá muitos arquivos. Vamos focar no essencial:

$ ls -F
node_modules/
public/
src/
  ├── assets/
  ├── lib/
  ├── App.svelte
  └── main.js
index.html
package.json
vite.config.js
  • src/App.svelte: É o coração da sua aplicação no início.
  • vite.config.js: Configurações da ferramenta que compila seu código.

5. Atributos Dinâmicos 🔗

Você também pode usar as chaves para definir atributos HTML, como o src de uma imagem ou o href de um link.

<script>
  let imagemSrc = "logo.png";
  let altText = "Logo do Svelte";
</script>

<img src={imagemSrc} alt={altText} />

6. Mini-Projeto: Perfil de Usuário Dinâmico 🚀

Sua missão agora: 1. No seu projeto, limpe o conteúdo de App.svelte. 2. No <script>, crie variáveis para nome, idade e urlFoto. 3. No markup, crie um card simples que exiba essas informações usando as chaves {}. 4. No <style>, adicione uma cor de fundo ao card.

Dica de Ouro

Se o nome da variável for o mesmo do atributo, você pode usar o atalho: <img {src} /> em vez de <img src={src} />.

7. Exercício de Fixação 📝

  1. Quais são as três seções principais de um arquivo .svelte?
  2. O que acontece com o CSS definido dentro de um componente Svelte?
  3. Como exibimos o resultado da soma de duas variáveis no HTML do Svelte?

Próxima Aula: Vamos aprender sobre o coração do Svelte: a Reatividade! ⚡