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
- Conhecimento básico de HTML, CSS e JavaScript.
- 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 - 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
- Aplicativo de tarefas simples
- Aplicativo de calculadora simples
- Crie um carrinho de compras
- 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
- Uma aplicação CRUD simples
- 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
Se você gostou do artigo, não se esqueça de compartilhá-lo :)