React do Básico ao "Badass" — ECMA6 para a Todos Governar

11 min readSep 28, 2017

Fala galera, tudo bom? Demorei bastante para lançar a continuação dessa série, um dos motivos é que dei uma reestruturada no nosso roadmap, acredito que da forma que organizei agora, será mais natural o aprendizado. Nesse artigo, não vamos falar de React, será apenas sobre javascript (ES6), acredito que esse conhecimento é necessário para você conseguir utilizar 100% do React, porém, não vou me atentar muito aos detalhes (não é o meu objetivo), para se aprofundar existem vários artigos bons sobre o assunto na internet (inclusive alguns citados aqui), meu objetivo é levar o conhecimento suficiente para que você possa continuar o aprendizado em React. Enfim, vocês devem estar bastante ansiosos, não é mesmo? então vamos nessa.

Para aqueles que caíram de paraquedas aqui, é bom saber que é só o segundo artigo de uma série sobre React que estou escrevendo "React do Básico ao 'Badass'". Segue o novo roadmap da série, para aqueles que querem acompanhá-la do princípio.

Introdução
ECMA6 para a Todos Governar (artigo atual)
JSX e Dumb Components (Componentes Burros)
Lifecycle e Smart Components (Componentes Inteligentes)
Proptypes (Verificação de Tipos)
TODO List com React (Simplesmente porque é clássico)

Senta que lá vem a História (ECMA6 ou ES6)

Não parem de ler, por favor, juro que não vou contar a história de como o javascript surgiu (afinal, todos devem estar cansados de ouvir isso), para aqueles que ainda não conhecem e se interessam pelo assunto recomendo a leitura desse breve artigo Javascript — 20 anos de História e Construção da Web.

Resumindo o resumo dá história do javascript, na década de 90 foi desenvolvido uma linguagem baseada em scripts com um simples objetivo, rodar em um negócio chamado browser, o browser servia para renderizar informações trafegadas na web, inicialmente essas informações eram estáticas, sem qualquer forma de interação do usuário, você requisitava as informações, e o seu servidor te enviava o conteúdo, simples assim. Porém, o javascript veio para revolucionar o mundo (ou pelo menos a forma como você interagia com o mundo na web), com sua tipagem dinâmica, rapidez e flexibilidade o javascript trouxe mais vida aos websites, transformou a forma como os usuários interagiam com o sistema, facilitando a usabilidade e melhorando a performance. Porém, nem tudo na vida é tão legal quanto um ursinho de pelúcia contando historinha de ninar para um bebê pônei.

Afinal, é bem difícil ficar melhor que isso, fala sério né…

Como citei anteriormente, o javascript é uma linguagem flexível, sendo pouco opinativa em como você deve ou não fazer alguma coisa, isso significa que você tem várias maneiras de resolver o mesmo problema, ou seja, entregar o javascript nas mãos de um desenvolvedor, é a mesma coisa que dar uma arma e um bom número de balas nas mãos de pessoas cuja a estabilidade emocional e paciência regrada por um nível de cafeína não recomendado a usuários comuns, estão longe de serem consideradas normais.

O resultado é simples, CAOS!

Cada um define suas funções da forma que quiser, cada um passa contexto para a função da forma que achar correto, ou até mesmo, calcula a massa do sol vezes a aceleração das partículas estratosférica intangíveis do planeta da forma que quiser (não tente entender, acabei de bolar isso na minha cabeça e eu não sou muito normal). Devido essa anarquia generalizada na web, as pessoas que tinham um bom conhecimento de conceitos básicos da linguagem resolveram criar/adaptar e ensinar padrões de projetos que funcionavam bem para soluções específicas em javascript, vulgo o excelente livro (livre) do Addy Osmani — Javascript Patterns ou até mesmo o livro do mentor de todo bom desenvolvedor Javascript (Douglas Crockford) Javascript-The Good Parts, que é considerado uma bíblia, (minúsculo no tamanho mas gigantesco no valor). Assim como os livros, a comunidade também se movimentou com guias de melhores práticas para se utilizar na linguagem no excelente (e livre também) JsTheRightWay. Foram criadas ferramentas para auxiliar durante o desenvolvimento como JSHint e JSLint.

Ou seja, houve um grande esforço para mostrar que javascript não era tão bagunçado como todos imaginavam e que você poderia ter bons resultados se utilizando de uma forma coerente. A ECMA International, (empresa responsável pela padronização da linguagem javascript) vendo todo esse movimento em torno da linguagem resolveu depois de muito tempo lançar uma mega atualização da linguagem, prometendo deixar a linguagem mais flexível, enxuta e fácil de se trabalhar e aprender, conceitos e funcionalidades que já existiam em outras linguagens como java, phyton etc, foram adicionados para somar na estrutura da nossa querida linguagem.

Algumas das funcionalidades presentes na nova versão:

classes e herança de classe;
funções get e set;
declaração de variáveis const e let;
arrow functions;
operações de estruturação e desestruturação de objetos e arrays, dentre outras;
template strings;
import e export;

Essa atualização conhecida como ECMA6 ou mais popularmente conhecido como ES6, veio para impor respeito junto as empresas. Grandes players do mercado, como a Google e o Facebook, decidiram dedicar o valioso tempo dos seus engenheiros na construção de arquiteturas e frameworks para adaptar o uso da linguagem as suas necessidades. Dito isso, acredito que você deve estar convencido de que o ES6 não está para brincadeira, as funcionalidades entregues, facilitam e dão um poder gigantesco ao próprio React.

Espero que esteja tão empolgado quanto eu, não vou me estender mais, vamos falar sobre algumas funcionalidades que essa belezinha nos oferece e que iremos utilizar no decorrer da nossa série sobre react.

Classes e suas Heranças

O ES6 trouxe a idéia de classes como forma de encapsular funções e atributos (variáveis). Nas versões antigas do javascript conseguíamos esse feito utilizando closures e padrões como o IIFE (caso queira entender um pouco mais sobre esses conceitos escrevi um artigo sobre o assunto nesse link).

Basicamente é essa a declaração de uma classe, junto a ela podemos adicionar uma função constructor que basicamente será invocada quando quisermos utilizar a classe Pessoa.

Duas coisa importante para se observar. Na linha 2 definimos uma função sem a palavra reservada function que não se faz necessária dentro de uma classe. Na linha 3 e 4 declaramos "variáveis de instancia" que serão inicializadas ao se invocar a classe pessoa com a palavra reservada new. Faça o teste você mesmo.

No console do seu browser declare a classe Pessoa como foi feito no exemplo anterior, agora tente acessar a variável que declaramos da seguinte maneira

new Pessoa(‘Legolas’).nomePessoa //saída => Legolas

Para quem está acostumado com linguagens orientadas a objeto, o que aconteceu é bem óbvio, já para aqueles que não entenderam, calma que eu vou explicar. A palavra reservada new, invoca o construtor de uma classe, nesse caso nosso construtor recebe dois parâmetros, porém passamos apenas um argumento "Legolas", isso faz com que o nomePessoa seja iniciado com a string que passamos, e a variável idadePessoa fica com o valor undefined como é esperado.

Conseguimos definir funções além de constructors, para que possamos determinar comportamentos específicos a Pessoa.

Definimos duas funções fazCoisa, que apenas imprime uma frase fixa, e dorme, que recebe um nome e mostra uma mensagem baseada no nome recebido. Nada muito estranho certo? Para acessar a função também é bem simples.

new Pessoa().dorme('Legolas') //saída => Legolas está dormindo

Também podemos utilizar um mecanismo bastante conhecido na orientação a objetos, a famosa herança de classes. A herança nada mais é do que fazer com que uma classe herde comportamentos (funções) de outras classes.

-Certo cara, entendi! Mas… para que serve isso?? Não seria só declarar as funções dentro da classe que eu quiser que tenha aquele comportamento!?

Bem, sim e não… Imagine o seguinte cenário, vocês tem a classe Pessoa que tem o comportamento de dormir, mas seu cliente falou que não existiriam só pessoas, você também teria que criar uma classe animal que também teria o comportamento de dormir, se quisermos que ambas as classes tenham esse comportamento nós poderíamos copiar e colar o código em ambas, porém como já diria o seu professor de orientação a objetos da faculdade, duplicação de código não é legal amiguinhos. Um cenário bom utilizando a herança de classes seria, criar uma classe SeresVivos com os comportamentos compartilhados entre Pessoas e Animais e fazer com que elas herdem os seus comportamentos.

Vamos ver o exemplo de como funcionaria a herança de classes na prática no o ES6:

Atentar para a palavra reservada super() na linha 13. A especificação do ES6 te obriga a utilizar a chamada super, que nada mais é que uma chamada ao construtor default "implícito" da classe que ela está herdando, nesse caso SeresVivos se você estiver usando o contexto this dentro de uma subclasse, no caso Pessoa herda de SeresVivos, logo, ela é subclasse de SeresVivos, logo, ela é obrigada a chamar super na primeira linha do seu construtor.

Para testarmos o comportamento da herança basta fazermos chamadas a função dorme, tanto a partir de Animal como de Pessoa.

new Pessoa().dorme(‘Legolas’) //saída => Legolas está dormindo
new Animal().dorme(‘Spike’) //saída => Spike está dormindo

Funções Get e Set

As funções get e set são meio que um padrão da orientação a objetos, basicamente são meios de acesso e alteração as variáveis de instancia:

get: função responsável por retornar algum valor (geralmente variável de instancia)

set: função responsável por alterar algum valor (geralmente variável de instancia)

Em javascript essas funções funcionam da seguinte forma (vamos alterar o código anterior da classe Pessoa)

Você deve prefixar uma função com as labels get ou set dependendo da sua necessidade, agora você deve estar se perguntando, o que tem de diferente dessas funções para as funções que definimos anteriormente? Sua pergunta faz todo sentido "científico", já que ainda não mostrei como acessamos as mesmas. Vamos lá

Para acessarmos a função get precisamos apenas chamá-la da seguinte forma:

var Pessoa1 = new Pessoa('Legolas')
Pessoa1.getNome //saída => "Meu nome é Legolas"

Já a função set funcionaria da seguinte maneira:

var Pessoa2 = new Pessoa('Legolas')
Pessoa1.setNome = 'Gandalf' 
Pessoa1.getNome //saída => "Meu nome é Gandalf"

Legal, não é mesmo? ;)

Declaração de Variáveis const e let

Antes do const e let isso tudo aqui era só mato…

Tá ok, memes a parte, antes de se poder utilizar o const e o let você tinha apenas a opção de utilizar o var. A declaração var é polêmica por N motivos, hoisting é um deles (você pode aprender sobre hoisting neste outro artigo). A grande diferença dessas novas declarações para a declaração antiga é que as novas variáveis tem um escopo de bloco, isso significa que, se declararmos uma variável como const ou let dentro de um for loop, ele só vai existir até aquele bloco terminar a execução dele, da mesma forma se eu declarar dentro de um if ou até mesmo de uma função, terminando a execução essas variáveis não existem mais.

Não tem muito a se dizer sobre as declarações de let, elas funcionam exatamente como as declarações var, exceto que possuem o escopo de bloco, como explicado anteriormente. Já as variáveis declaradas como const possuem uma característica específica, elas não podem ser alteradas em sua raíz, isso significa que…

const nome = "Legolas"
nome = "Gandalf" //I'm sorry Dave I'm afraid I can't do that

Agora se quisermos alterar uma propriedade de dentro de um objeto

const pessoa = {nome: "Legolas"}
pessoa.nome = "Gandalf"
console.log(pessoa.nome) //saída => "Gandalf"

Caso queira conhecer um pouco mais sobre as novas declarações do ES6 recomendo ler "Quando usar const, let e var? JavaScript ES6" que explica muito mais detalhado o assunto.

Arrow Functions

As arrow functions além de simplificar a maneira como declaramos uma função em javascript, nos ajuda com um dos maiores problemas que a maioria dos desenvolvedores iniciantes tem com a linguagem, contexto. Vamos entender melhor

Antiga forma de se declarar uma função:

Com arrow function:

O que mudou basicamente foi que removemos a palavra reservada function e adicionamos uma seta (arrow) "=>" antes do início do bloco da função. Podemos inclusive diminuir mais ainda, removendo os blocos já que a arrow function entende a primeira linha sem bloco como retorno da sua função (podemos omitir o próprio return inclusive).

Lindo não é mesmo? Mas nem só de beleza vive as arrow functions, como eu disse anteriormente as arrow functions tratam o this de uma maneira diferente, o this de uma arrow function se refere a um contexto de execução léxico, ou seja o contexto em que se está definido, vamos entender isso na prática.

Veja essa função, é uma simples função que retorna outra função, quando executamos a função fazExercicio de dentro da fazAlgumaCoisa, ela vai pegar o contexto this para encontrar a variável alguem e imprimir no console, porém a saída não é bem a que estávamos esperando.

fazAlgumaCoisa().fazExercicio() //saída => undefined está dormindo

Isso acontece porque não conseguimos acessar o contexto de fora da função faz exercício, já que ela está em um contexto diferente. Agora se usarmos as arrow functions:

fazAlgumaCoisa().fazExercicio() //saída => Legolas está dormindo

Para mais detalhes sobre arrow functions ler o artigo ES6 arrow functions, syntax and lexical scoping.

Estruturação e Desestruturação de Objetos e Arrays

Uma das funcionalidades bem úteis que o ES6 nos proporciona é a desestruturação de array e objetos, na prática aposto que você já fez bastante disso:

Porém hoje você vai ficar feliz em saber que conseguirá ter o mesmo resultado com bem menos esforço… como?

O ES6 já te dá a liberdade de desmembrar seu array ou objeto no parâmetro ou seja lá onde quiser, você pode fazer coisas como essa:

ou essa:

Outras funcionalidades fantásticas merecem espaço aqui, assim como spread e rest operators.

rest operator é a capacidade de capturar todo o resto da desestruturação de um array por exemplo:

spread operator é a capacidade de “espalhar” os valores em uma outra variável por exemplo:

Sinceramente não acredito que tenha muito o que explicar nessa aqui, o código fala bastante por si só, agora se quiser algo mais detalhado acredito que na própria documentação da mozilla esteja bem claro, caso esteja procurando pelo link, vou adiantar o seu trabalho, clique aqui.

Import Export

O import e export surgiu de uma necessidade antiga do javascript, a necessidade de trabalharmos com módulos reutilizáveis que pudessem ser importados e exportados em todo o projeto. Algumas bibliotecas implementaram algo parecido para se utilizar no javascript vulgo Require.js. Porém o ES6 veio com uma solução para isso. A sintax segue a seguinte estrutura básica

para import

import membroPadrao from "nome-do-modulo"

para export

export default membroPadrao

Podemos inclusive importar sub-módulos dos nosso módulos seguindo a mesma sintax, porém com chaves circundando.

import { subMembro } from "nome-do-modulo"

Se quisermos utilizar tanto membro como subMenbro dentro do nosso arquivo podemos fazer algo bem lógico como:

import membroPadrao, { subMembro } from "nome-do-modulo";

Em relação ao import e export acredito que ficará mais claro a medida que for lendo os próximos artigos, por agora basta saber que o ES6 te permite importar e exportar seus javascript como módulos para serem reutilizados em outros lugares.

Template Strings

Esse tópico é bem breve porém não se deixe enganar, é bastante importante e interessante. Template strings surgiu como um facilitador para podermos concatenar strings até porque:

var frase = "é muito chato" + palavra1 + "concatenar" + palavra2 + "strings dessa forma"

todos concordamos que não é uma maneira muito amigável de se fazer a concatenação de strings, então o ES6 surge chutando bundas

var frase = `${expressaoJavaScript} blablalba`

dentro de `${}` você pode inserir qualquer variável ou expressão javascript que vai executar como um código normal e ainda dentro das ``você poderá escrever sua string ;)

Conclusão

Galera, é isso aí, agradeço a paciência e espero que estejam tão ansiosos quanto eu para a continuação da série, estou à preparar os artigos seguintes, e agora sim, será foco total no react, vou tentar repassar o conhecimento que tenho e ajudar a galera que está apenas no começo dos estudos, um abraço no coraçãozinho de vocês e até a próxima :D