Artigos React Fundamentos básicos de JavaScript necessários para aprender React

Se você já conhece ou procurou saber algo sobre React, provavelmente se deparou muito com a seguinte frase: React é uma biblioteca JavaScript para construção de interfaces de usuário.

Antes de se aprofundar e cair de cabeça na biblioteca, é preciso ter em mente que React JS é JavaScript. Por isso é importante bater na tecla que para você aprender React você precisa ter uma boa base em JavaScript – além de conhecimentos sólidos de HTML e CSS.

Neste artigo será passado alguns conceitos básicos de JavaScript para, caso ainda não esteja dominando ou não tenha conhecimento de alguns dos tópicos, vocês possam reforçar essa base e com isso conseguirem seguir com o aprendizado do React.

Operador Ternário

O operador condicional (ternário) é frequentemente usado com um atalho para o if.

Ele funciona verificando uma condição, se essa condição for verdadeira (true) ele retorna uma expressão, já se for falsa (false), retorna a outra. Nos Códigos 1 e 2 temos exemplos de como utilizar o operador ternário.

let salario = 1000;
let bonus = 0.0;

if (salario > 1000) {
  bonus = salario * 0.10;
} else {
  bonus = salario * 0.15;
}

console.log(bonus)
Código 1. Exemplo de código utilizando o operador condicional if/else

let salario = 1000;
let bonus = 0.0;

salario > 1000 ? bonus = salario * 0.10 : bonus = salario * 0.15

console.log(bonus)
Código 2. Exemplo de código utilizando o operador ternário

Operador Spread

O operador Spread é usado com bastante frequência no React devido à imutabilidade, ou seja, quando criamos um array ou objeto ele não pode ser alterado, sendo assim, precisamos criar um objeto ou array novo a partir do já existente, como vemos no Código 3.

A sintaxe do operador spread é:

[...]
const arr = [0, 1, 2]
const novoArr = [...arr, 3]
console.log(novoArr)
Código 3. Exemplo de código utilizando o operador spread

Eventos de usuário

Os eventos são ações ou ocorrências que acontecem quando o usuário (por exemplo: clique em botão) ou o navegador (por exemplo: página carregada) manipula uma página. Os eventos são essenciais, pois com essas ações é possível responder da forma adequada.

Um exemplo prático: um usuário clica em um botão em uma página web com o intuito de “ver mais”, o evento identifica esta ação e disparará uma função que mostra uma caixa de informações.

Os eventos que serão mais utilizados:

  • onclick - Quando o usuário clica em determinado elemento;
  • onChange - Quando o conteúdo de um elemento é alterado - por exemplo o usuário digita algo dentro de um input.
  • onSubmit - Quando o usuário envia dados através de formulários.

Template String

Template String é utilizado para fazer a interpolação de strings com expressões de JavaScript, sem necessidade de concatenar as expressões.

Para escrever um template string é utilizado duas vezes o acento grave (` `) ao invés da comumente utilizada aspas duplas (“ ”).

Para fazer a interpolação num template string será utilizado a seguinte sintaxe:

${...}

Nos Códigos 4 e 5 vemos um exemplo de concatenação de strings, respectivamente sem e com template string.

let nome = "João";
let sobrenome = "José";
let texto = "Bem-vindo " + nome + " " + sobrenome + "!";
console.log(texto)
Código 4. Exemplo de concatenação de strings (sem template string)
let nome = "João";
let sobrenome = "José";
let texto = `Bem-vindo ${nome} ${sobrenome}!`;
console.log(texto)
Código 5. Exemplo de interpolação de strings (com template string)

Arrow Functions

A arrow function ( => ) é uma sintaxe alternativa, mais compacta quando comparada a uma expressão de função tradicional do JavaScript, como vemos nos Códigos 6 e 7.

function total (a, b) {
     return a + b
}
console.log(total(5, 5))
Código 6. Exemplo de função com a sintaxe tradicional
const total = (a, b) => {
     return a + b;
};
console.log(total(5, 5));
Código 7. Exemplo de função com a sintaxe arrow function

É importante ressaltar que essa expressão possui variações da sintaxe, por exemplo, usar o return ou retornar de uma forma implícita, como mostra o Código 8. 

const total = (a, b) => a + b;
console.log(total(5, 5));
Código 8. Variação da sintaxe

No exemplo podemos notar que ao retirarmos as chaves não é mais necessário a utilização do return para encerrar a função.

Métodos de array

Utilizando o React, será muito comum utilizarmos métodos de array, principalmente o map, filter, reduce e find. Eles são métodos puros, que recebem um valor e retornam outro da forma desejada.

Vejamos a seguir mais sobre os métodos de array e alguns exemplos.

Map

Esse método possibilita listar ou retornar os valores de um array, como mostra o Código 9.

const frutas = ["maçã", "banana", "laranja"];

export const ListaDeFruta = () => {
  return (
    <ul>
      {frutas.map((fruta, index) => (
        <li key={index}>{fruta}</li>
      ))}
    </ul>
  );
};
Código 9. Map

Filter

Esse método possibilita aplicar um filtro para retornar apenas o parâmetro desejado de um array como mostra o Código 10.

const numeros = [1, 2, 3, 4, 5];

export const ListarNumeroImpar = () => {
  return (
    <div>
      {numeros
        .filter((numero) => numero % 2 !== 0)
        .map((numeroFiltrado, index) => (
          <p key={index}>{numeroFiltrado}</p>
        ))}
    </div>
  );
};
Código 11. Filter

Reduce

Este método possibilita retornar o resultado da soma de todos os valores inteiros de um array como mostra o Código 12.

const numeros = [1, 2, 3, 4, 5];

export const SomaDosNumeros = () => {
  return (
    <p>{numeros.reduce((acumulador, valorAtual) => acumulador + valorAtual)}</p>
  );
};
Código 12. Reduce

Find

Este método possibilita retornar apenas o valor do array que queremos encontrar através de uma comparação, como mostra o Código 13.

const numeros = [1, 3, 4, 5, 6];

export const PrimeiroNumeroPar = () => {
  return (
    <p>{numeros.find((numero) => numero % 2 === 0)}</p> // 4
  );
};
Código 13. Find

Funções Callbacks

Funções Callback é um tipo de função que só é executada após o processamento de outra função.

O jeito de criar uma função de callback é passá-la como um parâmetro para outra função, chamando-a novamente em seguida, logo após alguma condição ou a conclusão de alguma tarefa.

No Código 14 temos um exemplo de uma função callback.

function saudacao(nome) {
  alert('Olá ' + nome);
}

function inputDoUsuario(callback) {
  var nome = prompt('Por favor insira seu nome.');
  callback(nome);
}

inputDoUsuario(saudacao);
Código 14. Função callback

Desestruturação de dados

A desestruturação é uma expressão de JavaScript que possibilita extrair dados de arrays ou objetos em variáveis distintas. Ele visa diminuir a repetição de códigos, facilitando a compreensão e manutenção, como vemos nos Códigos 15 a 17.

const aluno = {
  nome: "Jorge",
  idade: "23",
  email: "jorge@gmail.com"
};

const { nome, idade, email } = aluno;
console.log(nome);
console.log(idade);
console.log(email);
Código 15. Exemplo de código JavaScript desestruturado
export default function App() {
  const users = { Jane: "Jane", Joe: "Joe", Patrick: "Patrick" };

  return (
    <div className="App">
      <div className="App-header">
        <PersonCard name={users.Jane} />
        <PersonCard name={users.Joe} />
        <PersonCard name={users.Patrick} />
      </div>
    </div>
  );
}
Código 16. Exemplo de código React
export default function PersonCard({ name }) {
  return (
    <div className="UserCard">
      <span>
        <p>Olá, {name}</p>
      </span>
    </div>
  );
}
Código 17. Exemplo de código React com o uso da desestruturação