Pois é, vamos falar sobre o mínimo que vc precisa saber de JavaScript pra que seja confortável codar e aprender qualquer Framework Front End (React, Vue, Svelte, Angular, Ember, etc). Recentemente compartilhei isso no twitter e foi uma thread de muito sucesso, então vou deixar aqui também:

Eu vou partir do princípio que vc já sabe os fundamentos - HTML, CSS, JS Básico - e consegue criar páginas simples (como landings). O ideal é que vc seja capaz de fazer alguns CRUDS simples, mas senão tudo bem também, segue o fio e foco no estudo.

1. Fundamentos de JS

PRECISA saber coisas fundamentais como functions, tipos primitivos, operações básicas, loops e condicionais. Vc precisa ter passado pelo ensino fundamental do JS e isso tem que está claro na sua cabeça, não tem conversa.

2. Terminal Básico + Git

Seja qual for o S.O da sua escolha vc precisa saber se virar num Terminal (ou prompt), e precisa estar Ok com o básico de Git (push, pull, merge, rebase). Eu sei, isso não é JS, mas vale a menção né, rs.

3. Imports, Exports e NPM

Aprenda o que é e pra que servem Imports e Exports. Aprenda o que é, pra que serve, a instalar e a manter o Node e o NPM, bem como instalar, importar e desinstalar pacotes através dele. Isso é básico.

4. SASS - (Opcional)

"Ah mas isso não é JS". Pois é, o problema é que em frameworks vc pode lidar bastante com CSS in JS ou com coisas como "Styled Components", e geralmente a notação pra esses estilos é SASS. É fácil de aprender o básico e vai agregar muito, believe me.

5. Loops e Array Iterators

Entenda Loops e iteradores de Arrays, Objetos e outras estruturas. Busque entender iteradores mais profundamente e pra além básico, busque treinar coisas com: map, every, forEach, some, reduce, filter, for of, keys, entries, etc.

6. HttpRequests/Fetch

Entenda o conceito de fetch, ajax e requisições web. Se a coisa ficar muito esquisita nesse passo pode ser o momento de pausar e estudar o básico de arquitetura web: Protocolos, Client Side X Server Side, Requests e XhrRequests.

7. ES6 Basics

Const, Destructuring, Arrow Functions e Contexts. Claro que ES6 vai além desses pontos, mas esses são os que vc DEVE saber para tirar um bom proveito de um Framework JS.

We're good

Com um bom entendimento desses 7 pontos vc deve estar confortável pra aprender qualquer framework Front End sem grandes problemas. E sim, isso é BASTANTE coisa, e nem todo mundo pode parar completamente pra estudar isso, mas não perca esses pontos do seu horizonte.

Se vc é um Heavy Learner e curte/pode/consegue levar um ritmo de estudo mais intenso, vc pode ainda querer ver os pontos abaixo:

Extras

• Hoisting e Conceitos de Runtime no JS - Sim, entender como o JS funciona por baixo dos panos e a lógica de máquina aplicada na hora de rodar seu código é mara. Sugiro ler o "You dont know JS" e começar do básico. Fist things first :D

• Promises - Pois é Promises. Não tem muito o que falar, estude Promises e sua vida será mais fácil.

• Design Patterns, Estrutura de Dados e Algoritmos - por fim, se vc não vem de um background fortemente academico, não deixe de ver esses pontos, vai ajudar muito na sua jornada com qualquer linguagem.

Conclusão

Eu sei que parece bastante coisa e que muitas vezes não dá pra estudar isso tudo antes de começar a codar num framework. O que sugiro aqui é vc não perder esses pontos de vista e ir complementando sua batalha prática com eles sempre que possível.

Após dominar estes pontos tenho certeza que vc estará confortável pra aprender qualquer framework JS sem nenhum percalço, e até iniciar em drogas mais pesadas como SSR, Tree Shaking, Code Spliting, Hybrid Apps, PWAs, Web Workers, etc

Cover Image by Stanley Dai @ Unsplash
Thats all folks.