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 🙂