O objetivo deste post é listar os principais conceitos de Javascript necessários para que a aprendizagem em um framework/biblioteca (React, Angular, Vue, etc.) seja uma experiência agradável, e para que você não fique perdido quando for aprender. Utilizarei o React para demonstrar exemplos, mas a maioria das dicas vale para qualquer framework/biblioteca.
🥇 Antes de tudo: Qual problema esse framework resolve ?
Para mim, essa dica se tornou uma regra: Eu não posso aprender algo novo (biblioteca, um framework, uma linguagem) sem entender qual problema ela resolve, e de que maneira ela faz isso. Geralmente o pessoal pula esta etapa, e já começa a utilizar (porque está na moda ou porque a Netflix, AirBnB utilizam) sem entender porque essa tecnologia foi criada. Entender isso vai destravar sua mente para aprender o framework.
Artigos e vídeos explicando sobre React:
Artigo: https://kenzie.com.br/blog/react/
Vídeo: https://www.youtube.com/watch?v=NhUr8cwDiiM
🌿 Document Object Model (DOM)
Este item é essencial, pois é ele que permite que o navegador entenda a sua página, e quais elementos ela possui. Ou seja, quando você cria uma página e carrega ela no navegador, este navegador vai abstrair seu código em uma “árvore” de elementos, onde existe um elemento principal, e suas ramificações (por isso o nome de árvore). Exemplo: Cada sessão do seu HTML (section, header, main, footer, div) é um galho dessa árvore. Dentro de cada galho, terão outros, que se conectam a outros, assim por diante.
É através dessa árvore que o navegador sabe qual elemento ele deve modificar com base na ação do usuário. Essas ações do usuário já estão mapeadas na DOM, e são chamados de eventos (usuário clicou em um elemento, passou o mouse por cima, colocou foco em um campo, etc.). São esses eventos que você vai manipular no dia a dia, e entende-los é muito importante para criar a interação na sua página da melhor maneira possível.
Artigo: https://www.hostinger.com.br/tutoriais/dom-o-que-e
Vídeos: https://www.youtube.com/watch?v=WWZX8RWLxIk
https://www.youtube.com/watch?v=wWnBB-mZIvY
👨🔬 Funções
Uma função armazena um trecho de código, e tem como objetivo executar uma determinada tarefa. A grande vantagem da utilização de uma Função é que ela permite o reaproveitamento de código (uma determinada tarefa precisa ser executada em diferentes partes da aplicação), além de ajudar na manutenção do código, já que a função abstraiu um pedaço do seu código, e ela é encarregada (ou deveria ser) de executar uma única tarefa.
O que você deve aprender é que existem diversos tipos de funções: Funções com ou sem retorno. Funções com ou sem parâmetro. Funções assíncronas.
Você deve saber identificar qual tipo de função se encaixa melhor para executar determinada tarefa.
Artigo: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Functions
Vídeo: https://www.youtube.com/watch?v=mc3TKp2XzhI
📄 Arrays e seus métodos
Pense no array como uma gaveta do seu guarda-roupas (se ele for organizado). O array tem como objetivo armazenar dados do mesmo tipo, assim como no guarda-roupas existe uma gaveta para pijamas, outra para camisetas, outra para calças, etc. Sabendo disso, é extremamente importante você saber manipular esse conjunto de dados, e o Javascript possui alguns métodos para isso, e vou listar os principais: map, filter, reduce, forEach, find. A grande sacada para entender estes métodos é saber o que eles retornam.
Artigo: https://www.treinaweb.com.br/blog/javascript-metodos-de-arrays-que-voce-precisa-conhecer
Vídeo: https://www.youtube.com/watch?v=-f5E5Lhocuo
Como eu disse, estes são os principais tópicos. Claro que existem outros assuntos que também são muito importantes de se aprender antes de estudar um framework, mas na minha opinião estes 4 são o ponto-chave.
Vou deixar também alguns vídeos que me ajudaram a começar aprender um Framework, e espero que te ajude também. Deixe seu comentário sobre outro recurso que você considera importante antes de partir para um framework. Abraços.
Tudo que você deve estudar antes do React – Rocketseat
https://www.youtube.com/watch?v=37SwqREHRGI
3 coisas que você precisa dominar no JS para se dar bem no React – Rocketseat
https://www.youtube.com/watch?v=a2ni_JNvJYQ
Novo jeito de aprender React- Filipe Deschamps
https://www.youtube.com/watch?v=aJR7f45dBNs