Como aprender ReactJS de maneira efetiva!

O que é React?

React é uma biblioteca de front-end JavaScript gratuita e de código aberto para a construção de interfaces de usuário, dividindo seu aplicativo em componentes. É mantida pelo Facebook e uma grande comunidade de desenvolvedores.

Pré-requisitos para aprender React

Antes de aprender React, você deve se familiarizar com HTML, CSS e JavaScript. Você tem que aprender HTML e CSS, pois eles são usados ​​para criar os layouts para seu aplicativo da web, sem eles seu apr4endizado não estará completo. JavaScript leva algum tempo para aprender, pois é uma linguagem de programação. Passe pelo menos um mês ou dois aprendendo JavaScript. Não apenas aprenda e aprenda, mas também crie pequenos projetos para implementar o conhecimento que você adquiriu. Você pode criar alguns miniprojetos, como to-do lists, calculadora, gerador de piadas aleatórias, etc.

JavaScript

Ao aprender JavaScript, você deve evitar alguns erros geralmente cometidos. Você não precisa se tornar um mestre absoluto em JavaScript para escrever código em React (o que não faz sentido). Não tente aprender conceitos avançados antes de apr4ender o básico, você pode acabar se frustrando e achar que não é bom o suficiente. Você precisa aprender apenas o suficiente para que possa criar projetos básicos/intermediários em JavaScript vanilla. Alguns tópicos para aprender e compreender profundamente são:

• Variáveis
• Condições if / else e switch
• Diferença entre var, let e const
• Funções
• Métodos de array, como filter, map, reduce, etc.
• Conceitos ES6
• Promisses
• Callback
• Async/Await
• Classes e conceitos de OOPs
• Trabalhando com APIs 

Mas não apenas aprenda, APLIQUE!

React

Neste ponto, quando você aprendeu os fundamentos do JavaScript, é hora de mergulhar no React. Você pode começar a aprender o React dando uma olhada na documentação oficial do React ou fazendo o Tutorial Oficial do React para ter uma ideia de como o React funciona. A documentação do React é muito bem escrita, cobrindo os fundamentos do React. Aprenda esses tópicos muito bem para entender o React fundamentalmente:

• JSX
• Componentes (funcionais e baseados em classe)
• Métodos de Ciclo de Vida
• Estado
• Props
• Tratamento de eventos
• Formulários
• Renderização Condicional
• Trabalhar com APIs de terceiros. 

Uma vez que você tenha adquirido a compreensão desses tópicos, é hora de criar projetos para implementá-los. Você pode criar novos projetos ou refazer usando React os que fez enquanto aprendia JavaScript.

React Router

Aprenda mais sobre o React Router. O React Router é uma biblioteca de roteamento para react que o ajudará a navegar por diferentes páginas em seu aplicativo React. Aprenda sobre como carregar o conteúdo de uma página específica, passar parâmetros na URL, redirecionar etc. Além disso, entenda que o React Router não faz parte do React, é uma biblioteca de roteamento feita para o React.

React Avançado

Agora que você tem conhecimentos básicos do React e também criou alguns projetos básicos, é hora de aprender alguns conceitos avançados como Hooks, Context, etc. Dê uma olhada no React Docs e aprenda esses conceitos:

• Context
• Hooks
• Error Boundaries
• Higher Order Components
• Code Splitting
• Refs
• Forwarding Refs
• Render props

Depois de tudo isso você já pode se considerar uma pessoa desenvolvedora React! :)

Agora você só precisa aprimorar suas habilidades criando projetos e visitando o React Docs com frequência e aprendendo coisas novas.

Algumas dicas úteis:

Não tente aprender tudo de uma vez, entenda e aceite o fato de que você é um iniciante e dedique bastante tempo para aprender esses conceitos.

Não tenha medo de escrever códigos ruins. Como mencionei antes, você é um iniciante, em algum momento todo mundo é.

Faça do Google, StackOverflow, artigos e blogs seus melhor amigos. Comece a pesquisar suas dúvidas no Google, é muito provável que seu problema/erro já tenha sido resolvido por outra pessoa na internet.

Alguns links interessantes:

- Documentação do ReactJS em Português

- Como começar - reactjs.org

- Começando com React - MDN Web Docs

Onde me achar:

- Twitter

- GitHub

- Linkedin

E aí, gostaram do artigo? Deixem seus comentários :)