B�sico de JavaScript necess�rio 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 $ $!`;
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=></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=></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�, </p>
        </span>
      </div>
    );
  }

C�digo 17. Exemplo de c�digo React com o uso da desestruturaç�o

Fundamentos b�sicos de JavaScript necess�rios para aprender React

Neste artigo você saberemos quais os conceitos básicos na linguagem JavaScript você precisará ter para começar a aprender a biblioteca React JS.