O que você precisa saber de JavaScript antes de começar com React?
Tags: react, es6, javascript, básico
Published: 2019-04-06 16:27:03

---
title: O que você precisa saber de JavaScript antes de começar com React?
published: true
description: Básico do ES6 para escrever um bom código no React
tags: react, es6, javascript, básico
---

Está vindo de outra linguagem ou sabe o básico de **JavaScript** e quer começar a brincar com **React**?  
Esse post é pra você!

![JavaScript for React](https://i.imgur.com/D23fjwp.jpg)

Nesse texto iremos ver o básico do ES6 que você precisa saber pra escrever um bom código. Os tópicos que serão abordados aqui:

- Declarando Variáveis (VAR/CONST/LET)
- Arrow Functions
- Spread Operator
- Destructuring Object/Array
- Template String
- Classes
- *~Promises~*

Se você já sabe algum dos tópicos sinta-se a vontade pra pular para outro.

------

### **Introdução**

Antes de começar vamos explicar o que é o ES6.

> **ECMAScript** é uma linguagem de script que forma a base do JavaScript. ECMAScript é padronizado pela ECMA International Standards Organization nas especificações **ECMA-262 e ECMA-402**

> *(developer.mozilla.org)*

O ES6, ECMAScript 6, é a versão que foi lançada em 2015 e introduziu varias novidades ao JavaScript (JS) que tornaram a linguagem muito mais completa e confiável. Como Classes, Arrow Functions, Variáveis com Escopo e muitas outras novidades. Se você quer utilizar JavaScript em qualquer tipo de ambiente hoje em dia você TEM que saber o básico do ES6.

------

### **Declarando Variáveis (VAR/CONST/LET)**
No JS o básico que você tem para criar uma variável é utilizando a palavra reservada **var**. Porém ela tem um problema, ela não é restrita ao escopo na qual ela foi declarada.

```js

function exibeMensagem() {
  var msgForaDoIf = "olá";
  if (msgForaDoIf == "olá") {
    var msgDentroDoIf = "JS";
  }
  
  console.log(msgForaDoIf);
  console.log(msgDentroDoIf);
}

exibeMensagem();
```

Quando eu executo a função **exibeMensagem** o que vocês acham que acontece? Se você acha que só a **msgForaDoIf** foi imprimir no console e a **msgDentroDoIf** deu alguma mensagem de erro você… ERROU. Nessa caso ao rodar a função as duas mensagens aparecem na tela, mesmo a **msgDentroDoIf** ter sido declarada em outro escopo ela se mantém acessível fora dele.

Para resolver isso, no ES6 foi introduzido o **let**.

```js
function exibeMensagem() {
  let msgForaDoIf = "olá";
  if (msgForaDoIf == "olá") {
    let msgDentroDoIf = "JS";
  }
  
  console.log(msgForaDoIf);
  console.log(msgDentroDoIf);
}

exibeMensagem();
```
Nesse segundo caso, assim que você chamar a função ela ira imprimir na tela a mensagem "**olá**" porém quando ele chega no segundo console.log ele joga um erro na tela informando que a variável **msgDentroDoIf** não foi definida.

Um outro tipo de declarar variável no ES6 é o **const**, porém antes vou mostrar mais um exemplo com **let**.

```js
function exibeMensagem() {
  let msgForaDoIf = "olá";
  if (msgForaDoIf == "olá") {
    msgForaDoIf = "JS";
  }
  
  console.log(msgForaDoIf);
}

exibeMensagem();
```

Assim que ele entra no **if** a variável fora do if tem seu conteúdo alterado para "**JS**" e imprime a mesma no console. O **const** vem para dar uma alternativa a esse tipo de declaração.

```js
function exibeMensagem() {
  const msgForaDoIf = "olá";
  if (msgForaDoIf == "olá") {
    msgForaDoIf = "JS";
  }
  
  console.log(msgForaDoIf);
}

exibeMensagem();
```

Assim que tentamos alterar o valor de uma variável que foi declarada como **const** você recebe uma mensagem de erro que está tentando reatribuir um valor à uma variável constante. No meu uso normal eu sempre tento me manter utilizando **const** em todos os casos, alguns eu recaio para o **let**, pois assim você consegue um código mais conciso e que é facilmente testável depois. Mas uma coisa que acho legal é evitar ao máximo o uso de var, não faz sentido utilizar ele com o **let** e **const** fazendo muito mais sentido.

Outro detalhe pequeno do const é que assim que você declara uma variável constante você já tem que inicializar ela com alguma coisa.

```js
const a = "olá"; // Declaração correta

const b; // Irá jogar um erro
```

Obs: *Todos esses códigos acima você pode testar abrindo o console do seu navegador e colando ele* 😁

------

### **Arrow Function**
Esse item tem algumas nuances que o fazem ser mais interessantes de se utilizar em alguns casos. Mas antes, vamos mostrar uma comparação de declarações de função no JS.

```js
function fn1(x) {
  console.log("Função 1:", x);
}

const fn2 = function (x) {
  console.log("Função 2:", x);
}

const fn3 = (x) => {
  console.log("Função 3:", x);
}

const fn4 = x => console.log("Função 4:", x);

fn1(1);
fn2(2);
fn3(3);
fn4(4);
```

Todas as declarações de funções acima funcionam. A primeira (**fn1**) é o modo mais comum de você declarar uma função em seu código. As outras 3 declarações que são atribuídas à uma variável são chamadas de função anónima, pois ela não possui um nome. As funções **fn3** e **fn4** são as que chamamos de Arrow Functions, nesse caso elas só estão diferindo pela maneira de escrever mas funcionam 100% da mesma maneira.

Vantagens de utilizar Arrow Functions:

- Sintaxe menos verbosa que a declaração tradicional de função;
- A variável this, que indica o escopo que a função está sendo **executada**, na Arrow Function já é preenchida com o this do escopo que ela foi **criada**. Com uma função normal você teria que utilizar um .bind() ou passar o this como um parâmetro para o próximo escopo.

Vamos ver alguns exemplos:

```js
function Exemplo(param) {
  this.param = param;
}

Exemplo.prototype.exemploArray = function () {
  const vetor = ["M", "u", "n", "d", "o"];
  
  return vetor.map(function(elemento) {
    return this.param + " " + elemento
  })
};

const instanciaExemplo = new Exemplo("Olá");

instanciaExemplo.exemploArray();
```
O resultado esperado com o código acima é que ao executar o **exemploArray** seja retornado ["Olá M", "Olá u", …, "Olá o"] mas nesse exemplo o que ocorre é que o valor de this na função que está sendo executada é o this da função **vetor.map** e dentro dele não existe **param** assim retornando *["undefined M", "undefined u", …, "undefined o"]*.

Para resolver isso, o modo mais fácil é substituir a função que estamos passando para o .map() por uma Arrow Function.

```js
function Exemplo(param) {
  this.param = param;
}

Exemplo.prototype.exemploArray = function () {
  const vetor = ["M", "u", "n", "d", "o"];
  
  return vetor.map((elemento) => {
    return this.param + " " + elemento
  })
};

const instanciaExemplo = new Exemplo("Olá");

instanciaExemplo.exemploArray();
```

Você vai utilizar bastante isso para passar funções de um componente pai para um filho dentro do React.

------

### **Spread Operator**

O **spread operator** (…), esses 3 pontinhos ai mesmo, é muito utilizado na hora de escrever a sua função para receber parâmetros que não foram definidos. No React tem um caso interessante de uso para quando vc está fazendo o seu componente com base em outro você pode definir as funcionalidades extras do seu componente e receber todos os outros possíveis do componente base utilizando o **spread operator**.

A seguir alguns casos genérico que você vai poder utilizar o **spread operator** com arrays e funções:

```js
function fn(x, y, z) {
  console.log(x, y, z);
}

const args1 = [0, 1, 2];
fn(...args1);

const args2 = [1, 2];
fn(0, ...args2);

fn(0, ...[1], 2);

// Concatenando Arrays
const a = [1];
const b = [0, ...a, 2];
fn(...b);
```

Agora alguns casos com objetos:

```js
const pessoaA = {nome: "Matheus", idade: 23};

const githubA = {usuario: "matAlmeida"};

const pessoaAcomGithubA = {...pessoaA, ...githubA};

console.log(pessoaA);
console.log(githubA);
console.log(pessoaAcomGithubA);

const pessoaAVelha = {...pessoaA, idade: 83};
console.log(pessoaAVelha);
```

No exemplo acima é possível perceber que você consegue juntar 2 objetos e modificar um objeto sem destruir o registro anterior dele utilizando o **spread operator**, esses são os principais usos dele.

------

### **Destructuring Object/Array**

A desestruturação é uma das operações mais úteis e que deixa o seu código muita mais enxuto e você olha para ele e consegue entender rapidamente o que está acontecendo ali.

Abaixo um exemplo de uso da desestruturação na criação de funções:

```js

function fn1(objeto) {
  console.log(objeto.nome, objeto.idade);
}

const pessoaA = {nome: "Matheus", idade: 23};

fn1(pessoaA);

function fn2({nome, idade}) {
  console.log(nome, idade);
}

fn2(pessoaA);
```

Como você consegue ver no código acima a **fn2** é muito mais concisa e é só bater o olho para saber o que o objeto que você está passando precisa conter.
Agora outros exemplos declarando variáveis utilizando desestruturação:

```js
const pessoaA = {nome: "Matheus", idade: 23};

const { nome } = pessoaA;

console.log(nome);

const alfabeto = ["a", "b", "c", "d"];

const [letraA, letraB, ...outrasLetras] = alfabeto;
const [letraC, letraD] = outrasLetras;

console.log(letraA, letraB, letraC, letraD);
```

Você vai usar bastante isso pra simplificar o seu código quando estiver recebendo algum objeto/array mas só vai precisar de certos elementos.

------

### **Template String**

Agora outra adição muito interessante do ES6 é o **Template String**, com ele você consegue "concatenar" variáveis em uma string de um jeito muito mais elegante do que o de "somar" uma string com uma variável.

```js
const myName = "Matheus";

console.log(`O seu nome é: ${myName}!`); // "O seu nome é: Matheus!"
```

Como você pode notar a sintaxe é um pouco diferente, no lugar da utilização de aspas, simples ou dupla, é utilizado o *backtick* também conhecido como crase indicando que aquela string é uma **Template String** e em adição temos a sintaxe de **${nome_da_variável}** que é onde você adiciona a sua variável.
Outro ponto interessante de prestar atenção é que ele mantém quebras de linha que você escreve na declaração da string.

```js
console.log("
  Oi
  Meu
  Nome
  É
  Matheus
");
// Console: ERRO DE SINTAXE
            
console.log(`
  Oi
  Meu
  Nome
  É
  Matheus
`);
// Console:
// "Oi
//  Meu
//  Nome
//  É
```

Acredito que só isso seja necessário pra entender o que é ***Template String***.

------

### **Classes**

Classes acredito que seja bem rápido, é praticamente igual em todas linguagens OO, a única novidade aqui é que antes dessa versão do ES não existia esse conceito no JavaScript. Vale lembrar que praticamente tudo que você trabalha no JS é um "objeto", porém não existiam classes, a galera trabalhava um conceito parecido fazendo o uso dos **Prototypes**, não é mais utilizado na maioria dos casos, ele funcionava de forma parecida aos **Extensions** no Kotlin.

```js
class Pessoa {
  outroNome = "Venkman";

  constructor(name) {
    this.name = name;
  }
  
  printName() {
    console.log(this.name);
    console.log(this.outroNome);
  }
  
  printNameAF = () => {
    console.log(this.name);
    console.log(this.outroNome);
  };
}
```

Nesse código você consegue ver que é possível ter um construtor, propriedades da classe que podem ser declaradas em qualquer parte do código e fora de funções também. Temos o this para acessar as propriedades locais da classe.

Um ponto importante de falar é que não existem classes privadas no JavaScript, uma convenção que a comunidade em geral toma é declara funções/propriedades que deveriam ser privadas com um **underline "_"** na frente da declaração, se você estiver utilizando alguma classe e tiver algo com esse **underline** na frente tente não mexer pois pode causar comportamentos indesejáveis.

------

### **Promises**

Eu ia escrever sobre Promises, mas tem um post muito melhor explicado sobre o assunto feito pelo mestre [**Roberto Achar**](https://twitter.com/RobertoAchar), nele é explicado um pouco sobre Promises e o foco é explicar o Async/Await. Vale a leitura:

> [**Entenda tudo sobre Async/Await**](https://showmethecode.com.br/async-await/)

------

Tem muitos mais outros pontos que poderíamos abordar aqui nesse post mas ele ficaria muito extenso. Tentei colocar somente o básico mesmo, se você já tem uma pequena base de javascript acredito que dê pra pegar pelo menos a ideia de cada uma das funcionalidades apresentadas.

Qualquer dúvida sinta-se à vontade para me chamar no [twitter](https://twitter.com/mat_almeida) ou procurar pelo google, existe muito material muito explicativo, recomento o site da documentação do JS feito pela [**Mozilla**](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript).

Vou tentar escrever pelo menos um post por mês durante esse ano, não prometo nada rs.