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