Fundamentos do JavaScript para aprender React!

Você quer aprender React, mas não sabe por onde começar? Então seu primeiro passo precisa ser dominar os fundamentos do JavaScript!

Antes de aprender React, entenda os conceitos mais importantes que vão te ajudar a construir aplicações mais eficientes e bem estruturadas.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

O que é React? Por que aprender os fundamentos do JavaScript antes?

O React é uma biblioteca que utiliza JavaScript ou TypeScript para construir interfaces dinâmicas e reativas. Por isso, antes de aprender React, é essencial ter uma base sólida em JavaScript.

O motivo principal é que o React não é uma linguagem separada, mas funciona como uma extensão do JavaScript, utilizando conceitos como variáveis, funções, objetos e arrays (veremos tudo isso aqui).

Além disso, o React usa recursos do JavaScript como desestruturação, arrow functions e o conceito da imutabilidade (também veremos aqui!), que é essencial para entender o funcionamento do código no React.

Quanto mais você souber de JavaScript antes de mergulhar no React, melhor será sua experiência! Se você ainda não tem familiaridade com JavaScript, confira nossos conteúdos sobre a linguagem, incluindo um curso básico e um minicurso!

Como executar JavaScript no VS Code

Para praticarmos os conceitos de JavaScript, vamos utilizar o VS Code como editor e o Node.js para executar os códigos diretamente no terminal. Se você ainda não configurou seu ambiente de desenvolvimento, nós temos um conteúdo bem direto ao ponto que te ensina sobre VS Code e Node.js, pra deixar tudo pronto para começar a programar.

Sobre o Node, diferente do que acontece no navegador, onde o JavaScript roda dentro da estrutura HTML da página, ele permite executar arquivos JavaScript diretamente no terminal, sem precisar de um navegador. Vamos pra prática.

Com os arquivos da aula em mãos, abra o arquivo 1 – variáveis.js e insira o seguinte código:

console.log("Olá, mundo");

Agora, para executar o código, abra o terminal do VS Code e digite:

node "./1 – variáveis.js"

Se tudo estiver configurado corretamente, a mensagem “Olá, mundo” será exibida no terminal. Com isso, já conseguimos entender como os arquivos JavaScript podem ser executados de forma independente utilizando o Node.js.

Variáveis

No JavaScript, trabalhamos com dois principais tipos de variáveis:

1. Variáveis de tipo primitivo – armazenam valores simples diretamente na memória.
2. Variáveis de tipo de referência – armazenam referências a estruturas de dados complexas, como objetos e arrays.

No React, tanto os tipos primitivos quanto os tipos de referência são amplamente utilizados, então é importante conhecê-los bem.

Tipos primitivos

Os tipos primitivos armazenam valores simples, como números ou textos, e são imutáveis (não podem ser alterados diretamente). Aqui estão alguns exemplos:

const numero = 5;
const texto = "Texto";

Essas variáveis contêm os valores diretamente na memória. Quando você faz uma cópia de uma variável primitiva, o novo valor é independente do original.

let a = 10;
let b = a; // Aqui, 'b' recebe uma cópia do valor de 'a'
a = 20;
console.log(a); // 20
console.log(b); // 10 (b não foi alterado)

Tipos de referência

Já os tipos de referência armazenam estruturas complexas, como arrays e objetos. Em vez de guardar o valor diretamente, eles armazenam um endereço de memória onde os dados estão localizados.

Arrays

Os arrays são listas que podem conter qualquer tipo de dado:

const array = [5, 25, "texto1", "texto2"];

Objetos

Os objetos armazenam informações na forma de pares chave: valor:

const objeto = {
  chve1: "valor1",
  chave2: "valor2",
  chave3: "valor3"
};

A principal diferença entre os tipos primitivos e os tipos de referência é que, quando copiamos um objeto ou array, ele não gera uma cópia independente, mas sim uma referência para o mesmo local na memória.

let obj1 = { nome: "Lucas" };
let obj2 = obj1; // Ambos apontam para o mesmo endereço de memória
obj1.nome = "Mariana";
console.log(obj2.nome); // "Mariana" (obj2 também foi alterado)

No React, isso se torna extremamente importante, pois o estado dos componentes não pode ser modificado diretamente. Precisamos criar cópias para evitar mutações indesejadas.

Acessando Itens em Arrays e Objetos

Ao trabalhar com arrays e objetos, podemos acessar elementos individuais utilizando índices ou chaves.

Acessando itens de um array

Os arrays usam índices numéricos, começando do 0. Para acessar um item específico, utilizamos colchetes []:

console.log(array[2]); // "texto1"

Acessando propriedades de um objeto

Nos objetos, podemos acessar valores de duas maneiras:

1. Notação de ponto (.) – usada quando a chave não contém espaços ou caracteres especiais.
2. Notação de colchetes ([]) – usada quando a chave é dinâmica ou contém caracteres especiais.

console.log(objeto.chave3);      // "valor3"
console.log(objeto["chave3"]);   // "valor3"

A diferença entre essas formas de acesso pode ser crucial ao trabalhar com dados dinâmicos no React, onde frequentemente precisamos lidar com objetos e arrays obtidos de APIs.

Desestruturação

A desestruturação em JavaScript é uma forma prática de extrair valores de objetos e arrays e armazená-los em variáveis individuais. Isso facilita o acesso e manipulação de dados sem precisar referenciar a estrutura completa.

Abra o arquivo 2 – desestruturacao.js para praticar com o que vamos ver a seguir.

Desestruturando Objetos

Sabemos que podemos acessar as propriedades de um objeto utilizando notação de ponto. Um exemplo seria:

const valorChave3 = object.chave3;

Isso extrai o valor da chave chave3 do objeto e o armazena na variável valorChave3.

No entanto, podemos fazer isso de uma maneira mais eficiente utilizando desestruturação:

const { chave3 } = object;

Também é possível desestruturar várias chaves ao mesmo tempo:

const { chave1, chave2, chave3 } = object;

Dessa forma, cada variável recebe automaticamente o valor correspondente dentro do objeto, tornando o código mais limpo e legível.

Desestruturando Arrays

Para arrays, o conceito é semelhante. Vamos utilizar o seguinte array:

const array = [5, 25, "texto1", "texto2", [5, 97]];

Podemos extrair todos os valores individuais com:

const [valor1, valor2, valor3, valor4, valor5] = array;

Ou selecionar apenas elementos específicos:

const [valor1, valor4] = array;
console.log(valor1); // 25
console.log(valor4); // [5,97]

Dessa forma, podemos ignorar valores e acessar apenas os necessários.

Spread Operator (Operador de Espalhamento)

O spread operator (…) permite copiar ou mesclar objetos e arrays de forma eficiente, sem modificar as estruturas originais.

Spread para Arrays

No arquivo 3 – spread.js, temos o seguinte array:

const array = [5, 25, "texto1", "texto2", [5, 97]];

Se quisermos criar uma cópia exata desse array, fazemos:

const array2 = [...array];

Agora array2 contém todos os elementos de array, mas como uma nova referência. Isso significa que qualquer alteração em array2 não afetará array.

Caso queiramos modificar algum elemento específico, podemos fazer assim:

array2[0] = 13513;

Isso substitui o primeiro valor, sem alterar o array original.

Se tivéssemos simplesmente atribuído array2 = array, estaríamos apenas copiando o endereço de memória, e qualquer alteração em array2 afetaria array, o que pode gerar problemas no React.

Spread para Objetos

Para objetos, a lógica é semelhante. Podemos copiar um objeto inteiro para outro usando spread:

export const object2 = { ...object };

Isso cria uma cópia independente de object. Também podemos adicionar ou modificar propriedades ao fazer a cópia:

const object3 = { ...object, novaChave: "Novo Valor" };

O spread operator é amplamente utilizado no React para atualizar estados sem modificar diretamente o original.

Estruturas Condicionais (if e else)

O if é uma estrutura condicional que permite executar um bloco de código somente se uma condição for verdadeira.

if (5 == 5) {
    console.log("Sim, é igual!");
} else {
    console.log("Não, é diferente!");
}

Se colocarmos aspas em um dos números (“5” == 5), a comparação ainda retornaria true, pois o operador == não verifica o tipo de dado, apenas o valor.

Se quisermos garantir que os tipos também sejam iguais, utilizamos o operador estrito (===):

if (5 === "5") {
    console.log("Não, é diferente!");
} else {
    console.log("Sim, é igual!");
}

Aqui, a condição não será atendida, pois 5 é um número e “5” é uma string.

Operador Ternário

O operador ternário (? 🙂 permite criar condicionais de forma mais curta e direta:

5 === "5" ? console.log("Sim, é igual!") : console.log("Não, é diferente!");

Ele verifica a condição antes do ?. Se for verdadeira, executa o código antes dos dois pontos (:); caso contrário, executa o código depois.

Isso é muito utilizado em bibliotecas como React para definir comportamentos de forma concisa.

Funções

As funções permitem agrupar blocos de código reutilizáveis. Elas podem receber parâmetros e retornar valores.

Criando uma Função

function nomeDaFuncao(param1, param2) {
    // Descrição da função
    return;
}

Se não precisarmos de parâmetros ou retorno, a função pode apenas executar uma ação:

function consoleLogOi() {
    console.log("Oi");
}

Para chamar a função e executá-la:

consoleLogOi();

Também podemos armazenar o retorno de uma função em uma variável:

function retornaOi() {
    return "Oi de novo";
}
const mensagem = retornaOi();
console.log(mensagem); // "Oi de novo"

Arrow Functions

As arrow functions (=>) são uma forma mais curta de escrever funções.

const segundaFuncao = () => console.log("Segunda função");
segundaFuncao(); // Output: Segunda função

A principal diferença é que a função agora está armazenada dentro da variável segundaFuncao, tornando a sintaxe mais compacta.

Além disso, se a função tiver um único retorno, podemos omitir as chaves {} e a palavra return:

const soma = (a, b) => a + b;
console.log(soma(3, 4)); // 7

As arrow functions são amplamente utilizadas no React, pois tornam o código mais legível e reduzem a necessidade de linhas de código longas.

Import e Export

O import e export são fundamentais para organizar o código JavaScript, permitindo dividir funcionalidades em arquivos separados e reutilizá-las conforme necessário. No desenvolvimento com React, isso se torna essencial, pois os projetos são organizados em componentes, cada um em seu próprio arquivo.

Por exemplo, se temos um objeto object2 no arquivo 3 – spread.mjs e queremos utilizá-lo no arquivo 7 – importExport.mjs, primeiro precisamos exportá-lo:

export const object2 = { ...object };

Depois, no arquivo onde ele será utilizado, fazemos a importação:

import { object2 } from "./3 - spread.mjs";

Aqui, usamos a desestruturação no import para trazer apenas o que precisamos do arquivo original. Caso tivéssemos várias exportações, poderíamos importar todas ao mesmo tempo.

Importante: Para que o import e export funcionem corretamente, os arquivos devem ser módulos JavaScript. Para isso, basta renomeá-los de .js para .mjs.

Criando Arquivos de Configuração

Ao trabalhar com JavaScript, é importante definir arquivos de configuração para padronizar o ambiente.

Podemos criar rapidamente um arquivo package.json para gerenciar o projeto com o Node Package Manager (npm). Basta executar o seguinte comando no terminal:

npm init -y

Isso gera um arquivo package.json com configurações padrão. Se dentro desse arquivo adicionarmos a seguinte linha:

"type": "module"

O Node.js entenderá que estamos utilizando módulos JavaScript, e não será necessário alterar a extensão dos arquivos para .mjs.

Map e Filter

Quando trabalhamos com arrays, os métodos map() e filter() são extremamente úteis para manipulação de dados. Ambos percorrem os elementos de um array e executam operações neles, mas cada um com um propósito diferente.

Map

O método map() cria um novo array do mesmo tamanho, modificando cada um dos elementos conforme a função que passamos.

const array = [5, 25, "texto1", "texto2"];
const array2 = array.map((elementoAtual) => elementoAtual + " Diego");
console.log(array2);

Saída:

["5 Diego", "25 Diego", "texto1 Diego", "texto2 Diego"]

Aqui, adicionamos ” Diego” a cada elemento do array original. Isso não altera array, pois map sempre retorna um novo array.

Filter

O método filter() percorre os elementos de um array, mas retorna apenas aqueles que atendem a uma condição específica.

const array3 = array.filter(
  (elementoAtual) => typeof elementoAtual !== "number"
);
console.log(array3);

Neste caso, estamos filtrando o array original para remover todos os elementos que são do tipo number, ou seja, ele mantém apenas os elementos que são strings.

Saída:

["texto1", "texto2"]

Esse método é amplamente utilizado no React para filtrar listas de elementos renderizados na interface de usuário.

Conclusão – O que aprendemos?

Agora temos uma base sólida em JavaScript, cobrindo conceitos essenciais como desestruturação, spread, import/export, manipulação de arrays com map e filter, além de organização de arquivos e configuração de projetos.

Com esse conhecimento, estamos prontos para mergulhar no React! Todos esses fundamentos serão utilizados no desenvolvimento de componentes, gerenciamento de estado e na construção de aplicações dinâmicas e eficientes.

Pedro Surreaux

Redator de conteúdo na Hashtag Treinamentos. Produzo textos didáticos sobre tecnologia, buscando informar e engajar o público de forma acessível e descomplicada.