10 Dicas para se Tornar Ninja em JavaScript!
Tags: beginners, javascript, webdev, showdev
Published: 2019-09-04 20:26:56

---
title: 10 Dicas para se Tornar Ninja em JavaScript!
published: true
description: Artigo dando 10 dicas infalíveis para que você se torne ninja em Js.
tags: beginners, javascript, webdev, showdev
---

[![javascript](https://miro.medium.com/max/1440/1*ahpxPO0jLGb9EWrY2qQPhg.jpeg)](https://miro.medium.com/max/1440/1*ahpxPO0jLGb9EWrY2qQPhg.jpeg)

No **[último artigo](https://medium.com/womakerscode/top-5-linguagens-para-2019-28df8aee7d10)**, vimos que JavaScript tem ganhado o coração de muitos desenvolvedores(as) e está em 1° lugar das linguagens de programação que devemos ficar de olho pelos proximos anos.

E, de fato não é à toa. Pois encontramos JavaScript em diferentes esferas da tecnologia e desenvolvimento: **[Back-End](https://code.visualstudio.com/tutorials/static-website/getting-started?wt.mc_id=javascript-36257-gllemos)**, **[Front-End](https://code.visualstudio.com/tutorials/static-website/getting-started?wt.mc_id=javascript-36257-gllemos)**, **[Mobile](https://docs.microsoft.com/pt-br/azure/app-service-mobile/app-service-mobile-html-how-to-use-client-library?wt.mc_id=javascript-36257-gllemos)**, **[I.A](https://docs.microsoft.com/en-us/azure/cognitive-services/computer-vision/tutorials/javascript-tutorial?wt.mc_id=javascript-36257-gllemos)**, **[Machine Learning](https://docs.microsoft.com/learn/browse/?term=machine%20learning&WT.mc_id=javascript-36257-gllemos)**, **[Big Data](https://docs.microsoft.com/learn/browse/?term=big%20data&WT.mc_id=javascript-36257-gllemos)** e a lista não pára por aqui! Por isso que encontramos tantas vagas de emprego, sejam elas aqui no Brasil ou no exterior caçando sempre algum Dev que saiba programar em JavaScript.

Porém, logo vem inúmeras perguntas: 'Como eu posso me tornar ninja em JavaScript? É difícil de aprender? Conseguirei entender JavaScript em pouco tempo? Onde encontrar bons materiais para conseguir ser um(a) excelente desenvolvedor(a) em JavaScript?'

Bom, com respeito a essas e muitas outras perguntas, vocês terão hoje aqui as respostas nesse artigo com **10 dicas infalíveis que te ajudarão a se tornar ninja em JavaScript**.

Vamos nessa?!

## Dica # 1: Estude e Aprenda os Conceitos Básicos

Essa dica é interessante, pois todos nós sabemos que, para aprender qualquer coisa, precisamos aprender os conceitos básicos. Porém, muita gente acaba pulando essa parte que é tão importante.

Vamos comparar um estudo de uma nova linguagem de programação em aprender um novo idioma. Quando vamos aprender um novo idioma, procuramos sempre aprender coisas básicas, para depois, de muita prática, conseguirmos aprender coisas mais avançadas sobre aquele idioma.

O mesmo acontece quando queremos aprender uma nova linguagem de programação. Não adiantará de nada querer aprender um framework/lib novo em JavaScript, seja ele: React, Angular ou Vue, se não soubermos a base do JavaScript. (essa dica serve para qualquer outra linguagem de programação que você deseja aprender!!). Se pularmos os conceitos básicos, não entenderemos o escopo principal da linguagem e por consequência, não prosseguiremos com os estudos.

O que engloba os conceitos básicos? Envolve aprender: variáveis, tipos de dados, funções, estruturas de repetição (for, for in, while) - como e quando usar cada um deles, estruturas de decisão, escopos locais e globais, entender a estrutura do ES5 e ES6 entre outros assuntos básicos.

Outro ponto importante a mencionar, procurar entender como a Web funciona, entender como funciona as requisições HTTP e entender como a internet funciona. Por que? Porque JavaScript é uma linguagem voltada para WEB e de fato você vai precisar entender esses conceitos também.

Mas, onde eu posso encontrar materiais para aprender esses conceitos básicos de JavaScript e WEB?

Um ótimo lugar para aprender, desde o básico ao avançando sobre JavaScript e WEB é a documentação do developer mozilla. Para quem não conhece, super recomendo o link abaixo:

👉 **[Documentação JavaScript - Mozilla](https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript)**

O mais legal dessa documentação é que ela está toda em português!! Não tem como não aprender!

E para aqueles que não curtem ler, mas preferem aprender por vídeo, recomendo um curso que nós aqui na Microsoft, criamos com a intenção de desmitificar e ajudar àquelas pessoas que queiram aprender JavaScript de uma forma: simples, prática e direta! Esse conteúdo aborda desde conceitos simples à intermediários. E, é um excelente "ponta pé" para dar um starter na linguagem! 
Você pode encontrar os mais de 40 vídeos no link abaixo. Pois no repositório, procurei ordenar e organizar da melhor forma possível a vocês e melhor: contendo os próximos passos para aprimorar no mundo JS!

{% github glaucia86/js-101-beginners-ms %}

{% youtube SXBNpzjusgY %}

E por último, uma dica muito legal e que cheguei a compartilhar no meu **[twitter](https://twitter.com/glaucia_lemos86)** é um site onde você pode aprender JavaScript de maneira dinâmica e melhor: online. O legal é que, conforme você for passando de lição, há inúmeros exercícios para você fazer. Vejam como é legal:

[![1_GBagbM5BjtXbZevmz0ZrzA.md.gif](https://s3.gifyu.com/images/1_GBagbM5BjtXbZevmz0ZrzA.md.gif)](https://gifyu.com/image/h85J)

👉 **[Link do Site](https://learnjavascript.online/)**

## Dica # 2: Pratique, pratique e pratique!

Não tem jeito. A melhor maneira de você se tornar bom, independente da linguagem que você estiver estudando é praticar. Novamente fazendo analogia em aprender um novo idioma, a gente só começa a se sentir mais confortável e mais confiantes ao falar com um estrangeiro se começarmos a praticar, certo?

Da mesma forma acontece quando estamos aprendendo uma nova linguagem de programação. E com JavaScript não será diferente.

O que eu recomendo nessa segunda dica? Depois de entender a sintaxe e os conceitos básicos do JavaScript, agora é o momento de aprender algoritmo e estrutura de dados.

Talvez vocês podem falar: ‘Ah Glaucia… mas são tantos os algoritmos…” Sim é verdade e tenho que confirmar. Mas, assim como aprender um novo idioma você precisa ter paciência, da mesma foram será com uma nova linguagem.

O que eu recomendo a todos fazer é: dedique 1h/dia para estudar ou fazer algum desafio de algoritmo em JavaScript. Não parece, mas podem ter certeza que no final fará toda a diferença para você.

Ah… e lembrem-se de uma coisa: qualidade é melhor que quantidade. Assim que, não adianta ficar estudando, tipo um dia, 8 horas seguidas em JavaScript e depois não pegar mais naquele assunto. O que vale mesmo é a qualidade de seus estudos. Estudem poucas horas por dia. Mas, procurem manter a rotina! _#ficaadica_
Mas, onde eu posso encontrar recursos para aprender algoritmo e estrutura de dados em JavaScript?

Recomendo o vídeo abaixo que já aborda: Estrutura de Dados e Algoritmos em JavaScript:

{% youtube t2CEgPsws3U %}

E dois sites que eu super recomendo também são:

- **[CodeWars](https://www.codewars.com/)**
- **[HackerRank](https://www.hackerrank.com/)**

Ambos trabalham com desafios diários em diferentes linguagens, incluso JavaScript. Vale a pena dar uma olhada!

## Dica #3: Estude Javascript com um Livro

Para muitos, ler um livro pode parecer tedioso. Mas, chega uma hora que vamos precisar dele. Da mesma forma que, quando aprendemos um novo idioma vamos precisar recorrer ao dicionário ou algum livro de gramática daquele idioma.

Mesma coisa acontece quando estamos aprendendo uma nova linguagem de programação. Temos que sair do ‘leitinho’ e começar a ‘comer coisas mais sólidas’. E o que seriam essas ‘coisas mais sólidas’? Seriam os livros! Há inúmeros livros que são extremamente recomendados para aqueles que estão aprendendo JavaScript. Para citar alguns aqui:

{% github braziljs/eloquente-javascript %}

👉 **[You Don’t Know JS (gratuito)](https://github.com/getify/You-Dont-Know-JS)**

👉 **[Segredos do Ninja JavaScript (pago)](https://www.amazon.com.br/Segredos-Ninja-Javascript-John-Resig/dp/8575223283)**

Leia o livro e só passe para o próximo capítulo depois que você realizar os exercícios e de fato entender o que estudou. Se não entendeu, não passe a frente. Tente entender, pesquise e depois que entender, aí sim, prossiga para o próximo capítulo. _#ficaadica_

## Dica #4: Entenda Programação Assíncrona em JS & DOM

É de extrema importância entender a programação assíncrona, uma vez que JavaScript usa e abusa em uso de funções assíncronas.

Para esse tipo de tema recomendo os três links abaixo:

👉 **[Funções assíncronas](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/funcoes_assincronas?source=post_page-----31a963ad17a1----------------------)**

{% youtube 7Bs4-rqbCQc %}

{% youtube PoRJizFvM7s %}

São materiais simples e que não demandam tanto tempo. Porém, de grande ajuda a todos!

E com respeito ao DOM?! Também é muito importante ter o domínio do DOM, se você deseja se tornar ninja em JavaScript. Por que? Pois o DOM (Document Object Model) é a melhor maneira para manipular páginas em HTML, especialmente para aqueles que trabalham como Front-End é fundamental saber o DOM.

Alguns materiais interessantes para aprender bem o DOM:

{% youtube 0ik6X4DJKCc %}

👉  **[JavaScript HTML DOM](https://www.w3schools.com/js/js_htmldom.asp?source=post_page-----31a963ad17a1----------------------)**

## Dica #5: Mãos na Massa — Desenvolva Projetos

Depois de passar pelas dicas anteriores, agora você estará mais apto para poder desenvolver projetos pessoais que estejam relacionados a JavaScript.

O que eu sempre recomendo nas minhas palestras é que toda Pessoa Desenvolvedora criem uma conta no **[GitHub](https://github.com/)**. Por que? Há empresas, principalmente do exterior, logo que acabam de ver o seu currículo, em seguida já olham o seu portfólio no GitHub. Com qual objetivo eles fazem isso? Para verem o que você tem desenvolvido, quais os cuidados que você tem em desenvolver um projeto e se você apoia algum projeto open source.

Se você, que está lendo esse artigo aqui, ainda não possui uma conta no GitHub. Não tem problema. Crie ela hoje! Abaixo vou deixar o link para vocês:

👉 **[GitHub Page](https://github.com/)**

E o melhor lugar para você hospedar os seus projetos pessoais é justamente no GitHub. Mas, talvez você fale: “Ah, Glaucia, mas eu não tenho conhecimento em Git.” Não tem problema também. Há excelentes cursos gratuitos sobre Git e GitHub que vocês podem fazer. Abaixo recomendo alguns muito bons!

👉 **[Curso Grátis de Git - Microsoft Learn](https://docs.microsoft.com/learn/paths/intro-to-vc-git/?WT.mc_id=javascript-36257-gllemos)**

👉 **[Curso Grátis de GitHub: Complete - Microsoft Learn](https://docs.microsoft.com/learn/paths/manage-project-lifecycle-github/?WT.mc_id=javascript-36257-gllemos)**

👉 **[Curso: Git & GitHub para Iniciantes ~ William Justen](https://www.udemy.com/git-e-github-para-iniciantes/)**

👉 **[Criar um site simples usando HTML, CSS e JavaScript](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=javascript-36257-gllemos)**

Desenvolver projetos é a melhor maneira de você mostrar ao mundo o que você aprendeu e vai te ajudar também a melhorar cada vez mais as suas habilidades com JavaScript. Sem contar que é a melhor maneira de praticar.

Assim que, mãos na massa e comece a desenvolver muitos projetos.

## Dica #6: Aprenda POO para JavaScript

Outro ponto muito importante e que com certeza em algum momento quando estiver programando em JavaScript você vai se deparar é com Programação Orientada a Objetos com JavaScript.

Procure entender, o que é, como funciona e como fazer. Por que? Pois POO em JavaScript é totalmente diferente do conceito de POO, por exemplo em C#, Java, PHP, Python e outras linguagens que possuem conceito de POO. Pois como JavaScript é uma linguagem de multiparadigma (funcional + imperativa + scripts), acaba sendo bastante diferente das demais outras linguagens que conhecemos.

Mas, se ela possui suporte à programação funcional, por que então devo aprender POO para JavaScript? É uma excelente pergunta. Mas, devido ao JavaScript moderno, sem contar depois do ES5/6, começamos a ver paradigmas de POO sendo adotadas em JavaScript.

Onde eu posso aprender POO com JavaScript? Abaixo alguns links que podem te auxiliar nesse estudo:

👉 **[Introdução ao JavaScript Orientado a Objeto](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript?source=post_page-----31a963ad17a1----------------------)**

{% youtube vDJpGenyHaA %}

O vídeo acima é excelente e são apenas 1h de vídeo explicando como aprender POO com JavaScript e melhor com os conceitos de ES5 & ES6.

## Dica #7: Aprenda Programação Funcional

Como dito na dica #6, JavaScript é uma linguagem de programação de multiparadigma e que possui suporte à programação funcional. Logo, também é de extrema importância aprender a programação funcional.

Quando você aprende a programação funcional, você aprende a codar e entender melhor os conceitos principais das linguagens, pois a programação funcional te ajuda a evitar fazer uso de mudança de estados e dados mutáveis. E sem contar que, a Programação Funcional enfatiza funções matemáticas e com isso ela acaba se tornando de grande ajuda em casos quando precisa desenvolver um determinado projeto que precisa fazer uso de cálculos e alocação demasiado de memória.

Abaixo listo alguns links importantes para aprender Programação Funcional com JavaScript

👉 **[An introduction to Functional Programming with JavaScript](https://flaviocopes.com/javascript-functional-programming/?source=post_page-----31a963ad17a1----------------------)**

{% youtube FYXpOjwYzcs %}

{% youtube bRlvGoWz6Ig %}

Já estamos chegando na reta final da nossa lista. Quais seriam os Top 3?! Vamos ver agora!

## Dica #8: Aprenda Padrões de Projetos em JavaScript

Se você chegou até aqui é porque você está terminando o seu treinamento e está perto de se tornar um Ninja em JavaScript.

Padrões de Projetos (Design Patterns) é muito importante em qualquer contexto de linguagem que você esteja se especializando ou trabalhando.

Pois, quando você tem arraigado os principais conceitos de Padrões de Projetos, você saberá definir a melhor arquitetura do projeto para uma determinada situação.

Querem aprender Padrões de Projetos (Design Patterns) em JavaScript? Abaixo listo alguns links bastante interessantes e que valem dar uma bela olhada:

{% youtube MqddY6Ochkc %}

👉 **[The Facade Pattern](https://addyosmani.com/resources/essentialjsdesignpatterns/book/?source=post_page-----31a963ad17a1----------------------#facadepatternjavascript)**

👉 **[JavaScript Design Patterns](https://www.udacity.com/course/javascript-design-patterns--ud989?source=post_page-----31a963ad17a1----------------------)**

👉 **[Build A Simple Javascript App The MVC Way](https://www.awwwards.com/build-a-simple-javascript-app-the-mvc-way.html?source=post_page-----31a963ad17a1----------------------)**

## Dica #9: Aprenda um Framework/Lib JavaScript

Agora que você está chegando ao final e já aprendeu tudo o que de fato precisa para ser um Ninja em JavaScript, agora sim, você pode aprender um framework/lib em JavaScript.

Há vários frameworks/lib do mercado. Entre eles: Angular, React & Vue.js. Não faça a besteira de querer aprender todos de uma vez! Procure aprender e se especializar em um framewrok/lib! Pois, estudando um dos 3 principais do mercado, você terá facilidade em aprender ou fazer migração (se for o caso) para um outro framework ou lib.

Abaixo estarei listando os principais cursos de: Angular, React & Vue.Js

### Cursos de Angular

{% youtube tPOMG0D57S0 %}

{% github glaucia86/tutorial-crud-mean %}

👉 **[Documentação do Angular](https://angular.io/?source=post_page-----31a963ad17a1----------------------)**

👉**[Aprenda a Depurar uma Aplicação Angular no Vs Code](https://code.visualstudio.com/docs/nodejs/angular-tutorial?WT.mc_id=javascript-36257-gllemos)**

### Cursos de React

👉 **[Documentação do React](https://reactjs.org/docs/getting-started.html?source=post_page-----31a963ad17a1----------------------)**

👉 **[Aprenda a Depurar uma Aplicação React no Vs Code](https://code.visualstudio.com/docs/nodejs/angular-tutorial?WT.mc_id=javascript-36257-gllemos)**

👉 **[Curso Grátis de React - Microsoft Learn](https://docs.microsoft.com/learn/paths/react/?WT.mc_id=javascript-36257-gllemos)**

{% youtube iHqa6ojKnHI %}

### Cursos de Vue.js 

👉 **[Curso Grátis Vue.Js - Microsoft Learn](https://docs.microsoft.com/learn/paths/vue-first-steps/?WT.mc_id=javascript-36257-gllemos)**

{% github glaucia86/vuejs-workshop %}

{% youtube 78tNYZUS-ps %}

👉 **[Documentação do Vue.js](https://br.vuejs.org/v2/guide/?source=post_page-----31a963ad17a1----------------------)**

👉 **[Aprenda a Depurar uma Aplicação Vue.Js no Vs Code](https://code.visualstudio.com/docs/nodejs/vuejs-tutorial?WT.mc_id=javascript-36257-gllemos)**

Já no lado do Back-End (ou até mesmo no lado do Front-End) eu recomendaria fortemente também aprenderem TypeScript. Se desejarem, eu estou criando uma super playlist sobre TypeScript e elaborada em conjunto e ajuda do próprio time do TypeScript! Confiram aqui abaixo:

{% github glaucia86/curso-typescript-zero-to-hero %} 

{% youtube u7K1sdnCv5Y %}

## Dica #10: Apoie Projetos Open Source

A melhor maneira de você dar continuidade e não ficar parado no tempo é justamente por procurar apoiar Projetos Open Source.
Além do que, você estará em contato com os grandes feras do mundo JavaScript e melhor: poderá ajudar em algum Pull Request enviando alguma feature. Você irá aprender com eles, você aprenderá consigo mesmo e melhor: ajudará a Comunidade técnica.

Outro ponto a ser mencionado aqui: você não precisa ser um gênio para poder ajudar ou apoiar um projeto open source. Eu por exemplo, tenho ajudado nas traduções do Nodejs.org & do Reactjs.org. Claro que, se você se sentir à vontade e deseja enviar um PR de alguma feature que precisa ser melhorada de alguma lib, ótimo! Mas, se não for o caso, não se hesite em ajudar!

Mas, onde eu posso apoiar Projetos Open Source em JavaScript? Abaixo deixarei um curso como você pode ajudar uma determinada biblioteca open source em JavaScript e uma lista de diversos projetos Open Source que você pode ajudar:

👉 **[50 popular JavaScript open-source projects on GitHub in 2018](https://hackernoon.com/50-popular-javascript-open-source-projects-on-github-in-2018-469c11b48b8d?source=post_page-----31a963ad17a1----------------------)**

## Palavras Finais

Ufa! Chegamos ao fim da nossa lista! Lembre-se: Qualidade é melhor que quantidade. Sei que há muita coisa aqui para estudar. Mas, se você se dedicar, por exemplo **1 hora por dia** para estudar os materiais que postei aqui, num prazo de **15 a 18 meses**, você com certeza se tornará um(a) Ninja em JavaScript.

Só uma última ressalva: estou preparando uma série de artigos sobre Algoritmos e Estrutura de Dados em JavaScript. Onde cada semana, estarei explicando detalhadamente, em exemplos, cada um deles. Querem ficar por dentro dessa nova série?! Se sim, me seguem no twitter, pois esse ano vai vir muitas novidades e estarei atualizando todos vocês por meio do meu twitter. Não querem perder nenhuma nova notificação? Então… me sigam lá no twitter, beleza?! 😃

[![Twitter](https://code4coders.files.wordpress.com/2019/05/image-12.png)](https://twitter.com/glaucia_lemos86)

Ah! Já ia esquecer de falar aqui! Não deixem de se inscrever no meu Canal do Youtube! Estou criando inúmeras séries incríveis lá no meu canal! 

Só como spoiler, teremos:

* 😃 **Uma série incrível de Vs Code**
* 😃 **Curso Gratuito de TypeScript**
* 😃 **Tutoriais semanais de Node.js & JavaScript**
* 😃 **E muitos Live Codings**

Se são conteúdos que você curte, então não deixa de se inscrever e ative o sininho para ficar sabendo quando teremos vídeo novo! Essa semana já teremos um baita tutorial para todos vocês!

[![Screen-Shot-12-31-20-at-01-06-AM.png](https://i.postimg.cc/pr3TL4Pd/Screen-Shot-12-31-20-at-01-06-AM.png)](https://bit.ly/youtube-canal-glaucialemos)

Até a próxima pessoal! ❤️ ❤️ ❤️