Além do básico da linguagem JavaScript como lógica, variáveis, condicionais, repetições você deve se preparar antes em como manipular o Document Object Model (DOM), programação assíncrona, estrtura de dados etc.
Manipulação do DOM
O DOM é a representação em árvore de uma página HTML. O JavaScript permite que você crie, modifique e interaja com elementos HTML dinamicamente. Assim você pode criar interfaces interativas e responsivas.
Com exemplos o entendimento costuama ser mais fácil. Assim, ao clicar em um botão, ele pode mudar a cor do texto em um parágrafo. Com o JavaScript, você captura o clique do botão, seleciona o parágrafo e altera sua propriedade CSS color.
const button = document.querySelector('button');
const paragraph = document.querySelector('p');
button.addEventListener('click', () => {
paragraph.style.color = 'red';
});
Assincronismo e Promises
No dia a dia, nem sempre as coisas nem sempre acontecem na mesma ordem. O JavaScript permite que você lide com operações assíncronas, como carregar dados de APIs ou realizar tarefas mais demoradas, sem que a tela do usuário seja bloqueada.
Promises
As promises ou promessas são ferramentas usadas para gerenciar operações assíncronas. Elas representam o valor futuro de uma ação e permitem que você lide com seus resutlados de um jeito organizado. Ao você fazer uma busca de dados em uma API para popular uma lista em sua tela, a promise lhe permite esperar pela resposta da API antes de fazer a atualização da interface.
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => {
const list = document.querySelector('ul');
data.forEach(post => {
const listItem = document.createElement('li');
listItem.textContent = post.title;
list.appendChild(listItem);
});
});
Estrutura de Dados
Com estrutura de dados eficientes você organiza e manipula melhor as informações de seus aplicativos. Veja as principais tipos usados em React.
Objetos
Objetos são coleções de chave-valor que armazenam dados de forma estruturada. Para representar um usuário, um objeto pode ter propriedades como nome, e-mail, e idade.
const usuario = {
nome: 'Manoel Roberto',
email: 'manoelroberto@email.com',
idade: 26
};
Vetores
Vetores ou arrays armazenam uma lista ordenada de valores. Um vetor pode conter os nomes dos produtos de uma loja de comércio eletrônico.
const produtos = ['Camisa', 'Calça', 'Tênis'];
Funções de Alta Ordem
Funções de alta ordem são funções que podem receber outras funções como argumentos ou retornar novas funções. Elas te permitem processar vetores e objetos de forma poderosa e flexível.
Map
O map aplicar uma função a cada elemento de um vetor e retorna um novo vetor como os resultados.
const precos = [10, 20, 30];
const precosDescontos = precos.map(precos => preco * 0.9);
console.log(precosDescontos); // [9, 18, 27]
Filter
O filter cria um novo vetor contendo apenas os elementos que passam em um teste definido pela função.
const usuarios = [
{ nome: 'João', idade: 25, cidade: 'Belo Horizonte' },
{ nome: 'Maria', idade: 21, cidade: 'São Paulo' },
{ nome: 'Pedro', idade: 30, cidade: 'Belo Horizonte' },
{ nome: 'Ana', idade: 17, cidade: 'Ouro Branco' },
];
const usuariosSelecionados = usuarios.filter(usuarios => usuario.idade > 18 && usuario.cidade === 'Belo Horizonte');
const paragrafoUsuariosSelecionados = document.querySelector('.usuarios-selecionados');
paragrafoUsuariosSelecionados.innerHTML = ' ';
usuariosSelecionados.forEach(usuario => {
const paragrafoElemento = document.createElement('p');
paragrafoElemento .textContent = `${usuario.nome} - ${usuario.email}`;
paragrafoUsuariosSelecionados.appendChild(paragrafoElemento );
});
Um exemplo prático de aplicação de Map, Filter e Reduce
Nesse vídeo, é mostrado o uso do site shadcn/ui para acelerar a criação de componentes react, como o acordeão ou accordion.
Para entender melhor
Criação do Array de Usuários: No array usuarios há objetos representando cada usuário, com propriedades como nome, idade e cidade.
Seleção com filter: a função filter recebe uma função callback que define o critério de filtragem. Então, ela verifica se o usuário é maior de 18 anos (usuario.idade > 18) e reside em ‘Belo Horizonte’ (usuario.cidade === ‘Belo Horizonte’). Caso as condições forem verdadeiras, o usuário é incluído no novo array UsuariosSelecionados.