Executando verificação de segurança...
4

🗃️ Qual o básico de Javascript preciso saber para aprender um framework

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, onde os principais são: 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

Carregando publicação patrocinada...
2

Acaba que muita gente descobre da pior maneira e estou fazendo o caminho, me aplicando em Javascript, preparando base para o React ... Acaba que o colega citou uma coisa interessante: Claro que o React virou modinha, mas pq não Vue.JS, Angular? Saber quem resolve o problemas ajuda, estou com uma expectativa de aprender melhor o React - que cada vez ganha mais direções e formas. Tenho curiosidade no Vue, mas o ingrato é escolher. Grato pelo artigo.

2

Infelismente o que voce disse sobre o pessoal seguir a tec modinha porque a netflix, google e etc usarem é verdade. O problema é que muitas vezes isso cai no mercado. Sinceramente pra maioria das empresas pequenas e soluções pequenas, React não é necessário. Tipo porque usar React pra fazer landing page ou site institucional? Digo isso porque é algo que vejo com MUITA frequencia.
Ao invés vez de focarem no mais simples, rápido e fácil.
No mais ótimo post :)

2

Exatamente. Por isso eu disse no post: A dica mais importante antes de aprender um framework é entender o problema que ele resolve e de que forma.

Se você não faz isso, aplica esse novo conhecimento para fazer qualquer coisa, até uma landing page básica (como você mencionou) sem necessidade.

1

Muito obrigado por esse conteúdo!

Eu estou estudando por conta própria os materiais que encontro na web sobre HTML, CSS e JS
um pouco indeciso em que focar admito kk

2

Eae Joel, tudo bom ?

Geralmente HTML e CSS são aprendidos juntos. E um tempo depois você começa aplicar o Javascript. O importante é não pular etapas. Eu estudei mais de um ano apenas essas 3 tecnologias, antes de começar aprender o React. Porém hoje eu vejo que o esforço valeu a pena, pois estou conseguindo aprender o React de uma forma muito natural. Todo dia eu agradeço a mim mesmo por ter tido esta paciência no começo, pois percebo os benefícios que me trouxeram.

1