6 conceitos importantes de JavaScript para iniciantes em React
Como a biblioteca de front-end mais popular, todos querem aprender React. ReactJS é fundamentalmente JavaScript. Mas isso não significa que você deve aprender tudo em JavaScript para migrar para o ReactJS. Compreender os conceitos fundamentais do JavaScript ajudará você a entender os conceitos do React com mais facilidade e, por fim, acelerará sua capacidade de trabalhar em projetos.
Vamos esboçar conceitos essenciais que você deve saber sobre JavaScript antes de mudar para ReactJS.
1. Funções de seta
As funções de seta são amplamente usadas no React. A partir da versão 16.8, o React mudou de componentes baseados em classe para componentes funcionais. As funções de seta permitem criar funções com uma sintaxe mais curta.
Vamos ilustrar isso nos exemplos a seguir:
função normal
function greeting() {
return 'hello'
}
console.log(greeting()) //hello
Função de seta
let greeting = () => 'hello'
console.log(greeting()) //hello
As duas funções acima têm a mesma saída, embora a sintaxe seja diferente. A função de seta parece mais curta e mais limpa do que a função normal. Normalmente, os componentes React possuem a seguinte estrutura:
import React from 'react'
const Book = () => {
return (
<div>Book</div>
)
}
export default Book
As funções de seta não têm nomes. Se você deseja nomeá-lo, atribua-o a uma variável. A diferença entre uma função regular e uma função de seta é mais do que apenas a sintaxe. Saiba mais sobre as funções de seta na documentação dos desenvolvedores do Mozilla .
2. Desestruturando
A desestruturação é usada para obter dados de estruturas de dados complexas. Em JavaScript, arrays e objetos podem armazenar muitos valores. Você pode manipular os valores e usá-los em diferentes partes do aplicativo.
Para obter esses valores, você deve desestruturar a variável. Dependendo da estrutura de dados com a qual você está lidando, você pode usar a notação de ponto (.) ou a notação de colchetes. Por exemplo:
const student = {
'name': 'Mary',
'address': 'South Park, Bethlehem',
'age': 15
}
Desestruturando:
console.log(student.name) // output Mary
No exemplo acima, a notação de ponto acessa o valor da chave ‘name’. No ReactJS, você usará o conceito de desestruturação para obter e compartilhar valores em seu aplicativo. A desestruturação ajuda a evitar a repetição e torna seu código mais legível.
3. Métodos de Matriz
Você encontrará arrays várias vezes enquanto trabalha em projetos React. Uma matriz é uma coleção de dados. Você armazena dados em arrays, para que possa reutilizá-los quando necessário.
Os métodos de matriz são usados principalmente para manipular, recuperar e exibir dados. Alguns métodos de array comumente usados são map() , filter() e reduce() . Você deve estar familiarizado com os métodos de matriz para entender quando aplicar cada um.
Por exemplo, o método map() itera sobre todos os itens em uma matriz. Ele atua em cada elemento do array para criar um novo array.
const numbers = [9, 16, 25, 36];
const squaredArr = numbers.map(Math.sqrt) // 3,4,5,6
Você usará muito métodos de array no ReactJS. Você os usará para converter arrays em strings, juntar, adicionar itens e remover itens de outros arrays.
4. Condicionais curtos
Condicionais são instruções que o JavaScript usa para tomar decisões no código. Condicionais curtos incluem && (e), II (ou) e o operador ternário. Essas são expressões mais curtas de condições e as instruções if/else.
O exemplo a seguir mostra como usar um operador ternário.
Código com instrução if/else:
function openingTime(day) {
if (day == SUNDAY) {
return 12;
}
else {
return 9;
}
}
Código com operador ternário:
function openingTime(day) {
return day == SUNDAY? 12: 9;
}
Aprenda sobre diferentes tipos de condicionais com foco especial em condicionais curtas. Estes são amplamente utilizados em React.
5. Modelo Literais
Literais de modelo usam crases (“) para definir uma string. Os literais de modelo permitem que você manipule dados de string, tornando-os mais dinâmicos. Os literais de modelo marcados permitem que você execute operações dentro de uma string. Essas são expressões mais curtas de condições e as instruções if/else.
Por exemplo:
let firstName = "Jane";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`; // Welcome Jane Doe!
6. Operadores de spread
O operador Spread (…) copia os valores de um objeto ou array para outro. Sua sintaxe consiste em três pontos seguidos do nome da variável. Por exemplo (…nome). Ele mescla as propriedades de duas matrizes ou objetos.
O exemplo a seguir mostra como usar o operador spread para copiar os valores de uma variável para outra.
const names = ['Mary', 'Jane'];
const groupMembers = ['Fred',. ..names, 'Angela']; // ["Fred", "Mary", "Jane", "Angela"]
Você pode usar o operador de spread para fazer várias operações. Isso inclui copiar o conteúdo de um array, inserir um array em outro, acessar arrays aninhados e passar arrays como argumentos. Você pode usar o operador spread no ReactJS para lidar com as mudanças de estado nos componentes.
Por que aprender ReactJS?
O ReactJS é popular por um bom motivo. Tem uma curva de aprendizado curta, confiável e renderiza rapidamente para o DOM. Ele oferece suporte a componentes autônomos e possui ótimas ferramentas de depuração.
O ReactJS incorpora novos conceitos de JavaScript do ECMAScript 6 (ES6). Aprender conceitos fundamentais em JavaScript facilitará o desenvolvimento de projetos em ReactJS.
Acima de tudo, o ReactJS tem uma grande comunidade que está constantemente lançando novas atualizações. Se você quiser aprender uma biblioteca JavaScript, o ReactJS seria uma ótima escolha. A estrutura Next.js complementa as limitações do ReactJS. Uma combinação dos dois torna o ReactJS uma poderosa biblioteca de front-end.
Deixe um comentário