[PT-BR] Aprendendo ReactJS - Guia de Estudos

Este artigo tem como objetivo ser um pequeno guia para quem nunca estudou ReactJS. O objetivo é realmente um primeiro passo, uma visão geral sobre o framework.

Antes de tudo

É interessante que, antes de começar com ReactJS, você tenha, pelo menos, conhecimentos básicos sobre HTML, CSS e VanillaJS (o Javascript puro). Também é interessante que conheça as features do ES6+ antes de começar. Por último, é legal que se tenha alguma familiaridade com o NPM (ou Yarn).

O começo

Você precisa preparar seu ambiente React. Considerando que já tem o Node.JS configurado em sua máquina, pode começar com [create-react-app].(https://github.com/facebook/create-react-app). Se preferir, pode usar um ambiente online para começar (eu criei um aqui no codepen, basta forkar e usar!).

Com o ambiente criado, pode ser interessante dar uma lida na documentação oficial do React. Também recomendo este artigo do Thiago Reis e o tutorial oficial feito pelo time do Facebook. Caso consuma conteúdo em inglês, também tem este artigo escrito pelo Kent Dodds.

Até aqui já temos uma idéia bem consistente sobre os fundamentos do React, certo? Então está na hora de tentar criar alguns pequenos projetos em React.

Sugestões de projetos até aqui:

1. Todo-list
2. Pomodoro Timer
3. Calculadora

Já criamos um app simples, então talvez seja a hora de aprender a consumir uma API com React. Aqui tem um artigo excelente escrito pelo Alefe Souza. Tente fazer um pequeno projeto consumindo uma API pública.

Dicas de API públicas para estudo:

1. Nasa Open API
2. Marvel API
3. Harry Potter API
4. MakeUp API
5. Star Wars API

Agora que já somos incríveis em apps single pages, está na hora de aprender a usar o React Router. Aqui tenho este artigo incrível do Mario Souto. O tipscode também tem um material incrível sobre isso. O melhor material, infelizmente, está em inglês. Mas se for tranquilo para você, está aqui o link para o guia completo do React Training.

E agora?

Bem, agora é hora de treinar bastante o que já foi estudado até aqui. Vou deixar mais algumas dicas de projetos para serem desenvolvidos:

1. Um blog simples
2. Um e-commerce
3. Uma aplicação simples envolvendo um CRUD

Em breve volto com a segunda parte, um pequeno guia para as features e livrarias do React.