import Face from "./Face.svelte";

=)

com a turma Container nos permite colocar quantos elementos quisermos no componente:

Os elementos recém-colocados são filhos do componente:

  
Say: {say}

  
  
  

Templating

A sintaxe de modelo Svelte nos permite adicionar instruções if e loops ao nosso HTML. É isso mesmo, para o nosso HTML!

Uma declaração if se parece com isso:

    {#if say}
        

            Hi!
        

    {/if}

Enquanto um loop for se parece com isso:

{#each [2,1,0] as faceIndex}
        
    {/each}

Neste desafio, usamos o que acabamos de aprender sobre o modelo Svelte para adicionar um cabeçalho ao nosso aplicativo. Confira o curso experimente você mesmo e verifique sua resposta.

Manipulação de eventos

Em seguida, Noah nos mostra um manipulador de eventos embutido simples, que permite ao usuário mostrar o cabeçalho do aplicativo com o clique de um botão.

 {
    showHeader = true;
  }}
>
  show

No entanto, se usarmos um componente em vez de um botão HTML nativo, esse tipo de on:click manipulador não vai funcionar. Podemos consertar isso com encaminhamento de evento, ou seja, adicionar uma planície on:click para o nativo no arquivo de componente:

Despacho de Eventos

O envio de eventos permite que um componente emita mais de um tipo de evento, por exemplo, o mesmo O componente pode ser usado para mostrar um elemento e ocultá-lo.

Criamos um distribuidor de eventos como este:

Em seguida, o adicionamos ao HTML nativo

como isso:

dispatch('show')}> Show dispatch('hide')}> Hide

Finalmente, definimos o opções de funcionalidade do App.svelte arquivo como este:

 {
    showHeader = true;
  }}
  on:hide={() => {
    showHeader = false;
  }}
/>

O mesmo resultado também pode ser alcançado passando valores (neste caso true e false) até o envio. Os valores podem ser acessados ​​através da variável de evento e.

dispatch('click', true)}> Show dispatch('click', false)}> Hide

   {
      showHeader = e.detail;
    }}
  />

Botões - Desafio 3

Nosso terceiro desafio está mais envolvido do que os dois anteriores e coloca nosso novo conhecimento dos despachantes de eventos à prova. Para nos ajudar, Noah divide o desafio em pedaços pequenos:

Vá para o curso agora para tentar e ver a solução.

Reatividade

As instruções reativas são um recurso exclusivo do Svelte, que informa a um pedaço de código para executar novamente cada vez que uma variável dentro desse código é atualizada. Por exemplo, o código abaixo será executado sempre que a variável score for alterada (observe que declaramos uma declaração reativa com $:)

let score = 0;
$: smileySays = "Hi there, your score is: " + score;

Também podemos executar instruções if dentro de instruções reativas:

let score = 0;
$: smileySays = "Hi there, your score is: " + score;
$: if (score < -4) smileySays = "Wow your score is low!";

Desafio Reativo - Desafio 4

Agora podemos testar nossas novas habilidades ao concluir o Desafio Reativo, que nos aproxima um passo de estarmos prontos para o projeto final.

Mais uma vez, Noah divide o desafio em partes menores para nos ajudar no nosso caminho:

Clique para o curso para experimentar e verificar sua resposta.

Um pouco mais de reatividade

Em seguida, Noah nos dá outro exemplo do uso de Declarações Reativas, um rosto emoji que muda de acordo com a atual happyScore variável:

const faceList = [
  "🤬",
  "😡",
  "😭",
  "🙁",
  "😕",
  "😐",
  "🙂",
  "😀",
  "😄",
  "😊",
  "😘",
];
$: index = happyScore + 5;

Da mesma forma que nos exemplos anteriores, o código é executado sempre que a variável 'happyScore' é alterada, portanto, uma Declaração Reativa é a ferramenta certa para o trabalho.

Obrigatório

A ligação permite que um usuário atualize uma variável (nesse caso, chamada name) inserindo um valor em um campo. Como a ligação é um processo bidirecional, a alteração da variável também atualiza o valor de:

Vinculamos valores como este:

    
    
    
    // ligação declarada abaixo:
    
    
{name}, {smileySays}

Além de vincular variáveis, também é possível vincular valores de objetos, listas ou componentes.

Projeto final

Clique na imagem para acessar o projeto final.

Bem feito para fazer o curso! Encerramos as coisas com um projeto final que une todas as habilidades que aprendemos ao longo do caminho. Mais uma vez, Noé divide em pedaços menores para nos ajudar a:

Confira o elenco para testar suas novas habilidades no Svelte e ver a solução.

Outro

Isso nos leva ao final do curso. Ótimo trabalho para terminar! E se você deseja aprender mais sobre o Svelte, consulte os documentos oficiais em svelte.dev para tópicos como: Context, Stores, Lifecycle methods, Actions, Sapper e mais.

Você também pode seguir o meu Canal do SvelteMaster no Youtube e inscreva-se no Scrimba Svelte Bootcamp para ser o primeiro a saber sobre o lançamento e quaisquer descontos.

Espero que você tenha achado útil e possa usar seu conhecimento totalmente novo em breve.

Enquanto isso, por que não cabeça para Scrimba para ver quais outros cursos estão sendo oferecidos para ajudar você a atingir suas metas de codificação?

Se você também quiser sair com seus colegas alunos ou conversar com pessoas mais experientes e com os criadores dos cursos Scrimba, junte-se ao nosso Servidor Scrimba Discord

Feliz aprendizado 🙂