Svelte 3: Introdução a Reatividade
Tags: ptbr, javascript, webdev, svelte
Published: 2019-05-25 00:56:33

## Aplicativos web aprimorados ciberneticamente

> Nós falamos sobre os primeiros passos para [começar com o Svelte 3](https://dev.to/oieduardorabelo/svelte-3-comecando-com-svelte-3-2em3), mas naquele post inicial eu propositalmente omiti um dos recursos mais importantes do Svelte: reatividade.

A reatividade tem sido a última moda nos últimos anos para estruturas modernas de interface de usuário com JavaScript. Reatividade significa que os valores alterados serão automaticamente refletidos no DOM.

O Angular permite a programação reativa graças ao RxJS e as **Observables**, e o Vue.js permite recomputar valores de forma reativa com [**Compured Properties**](https://alligator.io/vuejs/computed-properties). No Svelte, ele faz uso de um recurso de JavaScript não muito conhecido chamado de [**labels**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label), permitindo **declarações reativas** e **condições reativas**. Isso significa que você pode ter certos valores que serão recalculados automaticamente quando outros valores forem alterados. Isso é realmente poderoso e, como você verá, o Svelte facilita a tarefa. 🥧

# Criando um contador de palavras

Vamos ver como é a reatividade no Svelte construindo um exemplo de contador de palavras.

Aqui está o nosso componente:

```bash
$ touch src/WordCounter.js
```

E colocamos:

```html
<script>
	let text = '';
</script>

<style>
  textarea {
    width: 100%;
    background: aliceblue;
    font-size: 2rem;
  }
</style>

<textarea bind:value={text} rows="10" />
```

Nada muito especial aqui, exceto pela ligação bidirecional entre o valor **text** e o valor do **textarea**.

# Declarações Reativas

Agora vamos adicionar uma declaração reativa para calcular automaticamente o número de palavras e caracteres quando o valor da variável **text** for alterado:

```html
<script>
  let text = '';

  $: characters = text.length;
  $: words = text.split(' ').length;
</script>

<style>
  textarea {
    width: 100%;
    background: aliceblue;
    font-size: 2rem;
  }
</style>

<textarea bind:value={text} rows="10" />

<p>Character Count: {characters}</p>
<p>Word Count: {words}</p>
```

Declaramos duas novas variáveis: **characters** e **words**, que calculam um valor com base no valor interno **text** e que será automaticamente recalculado.

> A parte **‌$**: é um **label** perfeitamente válido em JavaScript. Provavelmente, você não usou **labels** em JavaScript antes, eles são usados ​​para casos extremos com **loops for aninhados**. Svelte dá às declarações rotuladas um significado especial e automaticamente instrumenta a reatividade da declaração.

# Condições Reativas

Essa reatividade usando a sintaxe de rótulo não é válida apenas para declarar novas variáveis, mas também pode ser usada para executar instruções de maneira reativa quando um valor é alterado.

Vamos registrar o valor **text** para o console quando ele mudar:

```html
<script>
  let text = "";

  $: characters = text.length;
  $: words = text.split(" ").length;

  $: console.log("your text:", text);
</script>

<style>
  textarea {
    width: 100%;
    background: aliceblue;
    font-size: 2rem;
  }
</style>

<textarea bind:value={text} rows="10" />

<p>Character Count: {characters}</p>
<p>Word Count: {words}</p>
```

Imagine como isso pode ser útil para depurar aplicativos!

#### Múltiplas declarações

Você pode agrupar várias instruções em um bloco usando chaves:

```js
$: {
  console.log("---");
  console.log("your text:", text);
}
```

#### Declarações condicionais

E você pode até usar condicionais como sua declaração:

```js
$: if (text.toLowerCase().includes("see you later alligator")) {
  console.log("Not so soon baboon!");
  text = "";
}
```

Agora toda vez que nossa variável **text** contiver a *string* "**see you later alligator"**, uma mensagem é registrada no console e nós redefinimos o valor da variável **text**.

Com isso, você pode continuar e tornar seus aplicativos Svelte reativos!

# Créditos ⭐️

- [Introduction to Reactivity in Svelte](https://alligator.io/svelte/reactivity-intro), escrito originalmente por [@alligatorio](https://mobile.twitter.com/alligatorio)