Aguarde...

1 de novembro de 2019

🔥 Svelte Crash Course (em 10 fotos!)

🔥 Svelte Crash Course (em 10 fotos!)

Sempre quis dar uma olhada no Svelte (também conhecido como “a próxima grande novidade no web dev”), mas nunca teve tempo para isso? ⏰

🔥 Eu tenho um curso intensivo de 10 minutos para você! 👇

(Alerta de spoiler: Svelte é tão intuitivo e fácil de usar que você pode sentir que já o conhece! 🥳)

1 – Como o Svelte funciona

  • Compilador: não envia uma “biblioteca” Svelte para os usuários, mas JS simples e otimizado em tempo de construção
  • Componentes: o aplicativo é composto de elementos de interface do usuário composíveis
  • Reativo: a interação evento / usuário desencadeia alterações na cadeia de estado, atualizando automaticamente os componentes em todo o aplicativo
Svelte Crash Course (em 10 fotos!)

2 – A interface do usuário é uma árvore de componentes

Um componente define como seu aplicativo deve interpretar alguns valores abstratos de “estado”, para que possa transformá-los em elementos DOM no navegador e, finalmente, pixels na tela.

Svelte Crash Course (em 10 fotos!)

3 – A anatomia de um componente esbelto

Cada .sveltearquivo contém um único componente, composto por 3 partes:

  • <script> é lógica de componente em JS
  • <style> é um estilo CSS, com escopo definido e aplicado apenas ao componente atual
  • Modelo avançado, baseado em HTML, mas pode usar componentes personalizados e lógica embutida (como JSX)
Svelte Crash Course (em 10 fotos!)

4 – O modelo esbelto

O modelo Svelte nos permite usar nossos próprios componentes personalizados, além dos elementos HTML. A .svelteextensão do arquivo é opcional se não houver ambiguidade, mas a primeira letra de um componente personalizado DEVE estar em maiúsculas.

Podemos usar expressões JS dentro de chaves { }.

Svelte Crash Course (em 10 fotos!)

5 – Configuração de “adereços”

Uma maneira comum de “controlar” como um componente filho se comporta é passar dados para ele como acessórios (propriedades).

Para aceitar um suporte, exponha uma variável com export. É importante usar letporque constnão é reatribuível.

Definir um suporte é como fazer HTML comum.

Svelte Crash Course (em 10 fotos!)

6 – Atualizando estados componentes

As ações do usuário acionam eventos. on:nos permite ouvir eventos e acionar funções para atualizar estados. As alterações de estado atualizarão automaticamente a interface do usuário.

Os dados geralmente fluem de um pai para um filho, mas podemos bind:simplificar a lógica de atualização de estado, permitindo o fluxo de dados bidirecional.

Svelte Crash Course (em 10 fotos!)

7 – $:Declarações Reativas

“Declarações reativas” são aquelas marcadas por $:.

Svelte analisa de quais variáveis ​​elas dependem. Quando qualquer uma dessas dependências mudar, as instruções reativas correspondentes serão executadas novamente. Muito útil para declarar estados derivados ou acionar “efeitos colaterais”.

Svelte Crash Course (em 10 fotos!)

8 – Estado Reativo “Armazenamento”

Uma “loja” reativa facilita o compartilhamento de estados entre vários componentes. Pode existir em um arquivo JS separado. Para criar uma loja, apenas envolva writableum valor.

Em um componente, prefixamos os nomes de lojas com a $para usá-los ou atualizá-los diretamente. Magia do compilador!

Svelte Crash Course (em 10 fotos!)

9 – Renderização condicional e listas

Podemos renderizar condicionalmente elementos com o modelo do Svelte via {#if}e opcionalmente {:else}.

Para renderizar tudo em uma lista, nós temos {#each}.

Lembre-se de fechar sempre um bloco com {/if}ou {/each}!

(Deveria ter usado <ol>no exemplo, mas eu queria mostrar como o acesso ao índice funciona.)

Svelte Crash Course (em 10 fotos!)

10 – Assíncrono elegante / Aguardar

É super fácil fazer coisas assíncronas, como solicitações de API, com o Svelte.

Podemos simplesmente {#await}prometer resolver, exibindo um espaço reservado para “carregamento” antes que o resultado esteja pronto.

Observe que aguardamos a promessa na seção de modelos, portanto, nenhuma awaitpalavra-chave é exibida <script>.

BÔNUS – Transições animadas

Svelte vem com transições animadas organizadas. Tente atribuir uma transition:flypropriedade a seus componentes ! Também existem outros tipos, como fade, slide, etc. Você também pode usar in: out:para definir separadamente intro / outros.

Anexados ao suporte de transição estão os parâmetros.

👆 Isso é tudo, pessoal!

É isso aí – tudo o que você precisa para começar a usar o Svelte! 😁

Abordamos muito este curso intensivo, desde os conceitos mais fundamentais até os tópicos que podem até ser considerados intermediários ou avançados em outras estruturas (por exemplo, solicitações de API e transições animadas).

Agora é sua vez de brincar com o Svelte e criar algo legal. O Svelte REPL é um ótimo lugar para começar!

Diverta-se! 🥳

Postado em Blog
Escreva um comentário