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. funções de seta permitem que você crie funções com uma sintaxe mais curta.
Vamos ilustrar isso nos exemplos a seguir:
função regular
funçãosaudações() {
retornar'olá'
}
console.log (saudação()) //helloFunção de seta
deixar saudação = () =>'olá'
console.log (saudação()) //helloAs 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:
importar Reagir de'reagir'const livro = () => {
retornar (
Livro</div>)
}
exportarpadrão Livro
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 funções de seta em Mozilla documentação dos desenvolvedores.
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 aluno = {'nome': 'Mary',
'endereço': 'South Park, Belém',
'idade': 15
}
Desestruturando:
console.log (aluno.nome) // saída MariaNo 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 matriz comumente usados são mapa(), filtro(), e reduzir(). Você deve estar familiarizado com o métodos de matriz para entender quando aplicar cada um.
Por exemplo, o mapa() O método itera sobre todos os itens em uma matriz. Ele atua em cada elemento do array para criar um novo array.
const números = [9, 16, 25, 36];
const squaredArr = números.map(Matemática.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:
funçãoTempo de abertura(dia) {
se (dia == DOMINGO) {
retornar12;
}
outro {
retornar9;
}
}Código com operador ternário:
funçãoTempo de abertura(dia) {
retornar dia == DOMINGO? 12: 9;
}Aprender sobre diferentes tipos de condicionais com foco especial em condicionais curtas. Estes são amplamente utilizados em React.
5. Modelo Literais
Template Literais usam acentos graves (``) 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:
deixar primeiroNome = "Jane";deixar últimoNome = "Corça";
deixar texto = `Bem-vindo ${firstName}, ${lastName}!`; // Bem-vindo, 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 nomes = ['Mary', 'Jane'];
const membros do grupo = ['Fred', ...nomes, 'Ângela']; // ["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.