🔥 Svelte Crash Course (em 10 fotos!) – Ed Rodrigues
🔥 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
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.
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)
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 { }.
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.
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.
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".
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!
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.)
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!