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)
let salario = 1000;
let bonus = 0.0;
salario > 1000 ? bonus = salario * 0.10 : bonus = salario * 0.15
console.log(bonus)
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)
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)
let nome = "João";
let sobrenome = "José";
let texto = `Bem-vindo ${nome} ${sobrenome}!`;
console.log(texto)
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))
const total = (a, b) => {
return a + b;
};
console.log(total(5, 5));
É 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));
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>
);
};
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>
);
};
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>
);
};
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
);
};
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);
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);
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>
);
}
export default function PersonCard({ name }) {
return (
<div className="UserCard">
<span>
<p>Olá, {name}</p>
</span>
</div>
);
}
