Artigo original: How to Learn React — A roadmap from beginner to advanced

Olá, pessoal!

Este guia é para pessoas que estão começando com React. Selecionei cuidadosamente os melhores vídeos e artigos em cada seção para facilitar o aprendizado.

Observação: não estou associado com qualquer dos sites mencionados abaixo. É puramente minha visão.

Pré-requisitos

  1. Conhecimento básico de HTML, CSS e JavaScript.
  2. Compreensão básica dos recursos do ES6. Aqui está meu artigo (em inglês) explicando alguns deles.
    Para começar, você deve conhecer pelo menos os seguintes recursos:
    1. Let
    2. Const
    3. Arrow functions
    4. Imports e Exports
    5. Classes
  3. Compreensão básica de como usar o npm.

Começando

Você pode usar editores de código on-line para praticar ou pode usar o Create React App.

Eu configurei um ambiente de desenvolvimento no JSFiddle e no Codepen.

Para entender todos os fundamentos do React, você pode começar com os seguintes tutoriais:

Documentação oficial do React (em inglês), da equipe do React

Guia para iniciantes em React (em inglês), de Kent C. Dodds

Fundamentos do React (em inglês), de Samer Buna

Até este momento, você já deve ter uma ideia básica dos fundamentos do React. É o suficiente para começar a desenvolver aplicativos para a web simples em React.

Agora, dê uma olhada no tutorial oficial do React:

Tutorial oficial do React (em inglês), da equipe do React

É um artigo bem escrito, cobrindo os fundamentos do React. Ele também explica os tópicos específicos com muita clareza.

Por último, porém não menos importante, aprenda a se conectar a APIs com aplicações em React:

Fazendo o fetch de dados de API com React.js (em inglês), de Ethan Jarrell

Comece construindo alguns projetos

  1. Aplicativo de tarefas simples
  2. Aplicativo de calculadora simples
  3. Crie um carrinho de compras
  4. Exiba as estatísticas de usuário do GitHub usando a API do GitHub

React Router

O React Router ajuda você a criar rotas para suas aplicações de página única. É muito poderoso e fácil de usar com sua aplicação em React.

Para começar:

Tutorial do React Router (em inglês), de Paul Sherman

React Router e introdução a SPA (em inglês), da Learn Code Academy

Roteando aplicações em React (em inglês), da Scotch.io

Esses artigos são mais que suficientes para você começar com o roteamento em React.

Projetos

  1. Uma aplicação CRUD simples
  2. Clone do Hacker News

Se você estiver realmente interessado em aprender muito sobre o Router, confira o seguinte guia:

Guia completo do React Router (em inglês), de React Training

Webpack

Webpack é um famoso empacotador de módulos JavaScript. O Webpack ajuda você a manter as dependências como arquivos estáticos para o seu projeto para que os desenvolvedores não precisem fazer isso.

O Webpack também vem com carregadores. Eles ajudam a executar tarefas específicas em seu projeto.

Para aprender mais sobre o Webpack, siga os seguintes tutoriais.

Quando e por que usar o Webpack (em inglês), de Andrew Ray

Tutorial do Webpack (em inglês), da Learn Code Academy

Para configurar seu ambiente React local usando o Webpack, você pode consultar o seguinte repositório do GitHub:

Template de SPA em React, de Hanif Roshan

Acho que os tutoriais acima são o suficiente para começar com o Webpack. No entanto, para obter conhecimento aprofundado, você pode consultar os seguintes guias:

Introdução ao Webpack (em inglês), de SurviveJS

Documentação oficial do Webpack (em inglês)

Renderização do servidor

A renderização do servidor é um dos recursos mais legais do React. Ele pode ser usado com qualquer uma das tecnologias de back-end.

A Server Side Rendering (SSR, ou renderização do lado do servidor, em português) no React ajuda você a criar componentes no servidor e a renderizá-los como HTML em seu navegador. Quando todos os módulos JavaScript são baixados no navegador, o React entra em cena. Simples!

Antes de tudo, dê uma olhada na API do React-DOM:

API do React-DOM (em inglês), da equipe do React

E siga os tutoriais abaixo para obter um conhecimento aprofundado:

Renderização do servidor com React e React Router (em inglês), de Tyler McGinnis

Renderização no lado do servidor com React Router (em inglês), de Roilan Salinas

Guia para renderização no lado do servidor com React (em inglês), de Dennis Brotzky

Redux

Redux é uma biblioteca JavaScript desenvolvida para manter os states (estados, em português) da aplicação. Quando você está construindo uma aplicação complexa, gerenciar estados entre componentes adicionará uma sobrecarga. O Redux ajuda você a armazenar todos os seus states em uma única fonte. E, claro, o React funciona bem com o Redux :)

Para começar:

Tutorial do Redux (em inglês), da Learn Code Academy

Tutorial do Redux para iniciantes (em inglês), de Valentino Gagliardi

React Redux (em inglês), da CSS Tricks

Esses tutoriais são mais que suficientes para começar com o Redux. No entanto, não posso resistir e mencionar o tutorial abaixo também. Ele vale a pena :)

Fundamentos do Redux (em inglês), de Dan Abramov

Recursos

Awesome React

Se você gostou do artigo, não se esqueça de compartilhá-lo :)