Artigo original: How to Learn React in 2023
Nunca houve um ano melhor para aprender React, a biblioteca mais popular do JavaScript para criar aplicações front-end, do que neste ano.
Neste guia, mostrarei os recursos e dicas mais valiosos que, acredito, ajudarão você a aprender React mais rapidamente. Você também economizará muito tempo e energia preciosos no processo.
Precisa aprender JavaScript? Você pode aprender enquanto aprende React
A pergunta que os iniciantes que procuram aprender mais fazem React é: "preciso aprender JavaScript?"
O React é uma biblioteca do JavaScript e geralmente é anunciado como sendo "apenas JavaScript". Isso sugere que, para realmente aprender React, você deve conhecer JavaScript primeiro. A maneira como eu caracterizaria o relacionamento do JavaScript com o React é – quanto melhor você conhecer o JavaScript, melhor desenvolvedor do React você se tornará.
Dito isso, você não precisa aprender tudo sobre JavaScript primeiro. Muitos conceitos de JavaScript podem ser aprendidos ao mesmo tempo em que você aprende React.
Aqui está uma lista de alguns dos conceitos em JavaScript que você precisará entender para poder usar o React de modo eficaz. Eles incluem:
- Variáveis
- Arrays (e a função .map())
- Objetos
- Eventos em JavaScript
- Funções e arrow functions
- Escopos e closures
- Promises e sintaxe de async-await
- Tratamento de erros básico
Esses são todos os conceitos de JavaScript que, na minha experiência, você realmente precisa saber para trabalhar com o React em qualquer nível.
Você encontrará e aprenderá mais conceitos do React ao começar a construir seus próprios projetos e observar o código de outros.
Se você deseja um guia útil para começar a aprender esses conceitos e muito mais hoje, o autor deste artigo criou uma extensa ficha informativa no freeCodeCamp (em inglês), que abrange todo o JavaScript de que você precisa para se sentir confiante com o React.
Procurando por um tutorial? Use a nova documentação do React
Quando você inicia seu caminho de aprendizado do React, sua primeira pergunta provavelmente será: "onde aprendo todas as informações relacionadas ao React de que preciso?" Você pode estar se perguntando se deve assistir a cursos no YouTube ou comprar um curso na Udemy.
Embora existam excelentes (e extensos) cursos de React em muitos sites diferentes, o primeiro e principal site em que você deve confiar é o site oficial de documentação do React: reactjs.org.
O que há de muito especial em aprender React neste ano em contraste com os anos anteriores é que, no ano passado, a documentação do React foi completamente atualizada e aprimorada. Ela está totalmente atualizada com a versão atual do React, tem muitos exemplos práticos e até sandboxes de código interativos para que você possa começar a aprender React no navegador sem precisar criar projetos em sua própria máquina.
Se você quiser criar um novo projeto do React, poderá fazê-lo rapidamente no navegador usando o link react.new. Ele criará um CodeSandbox com uma aplicação do React completa para você utilizar. É muito mais rápido e fácil fazer isso do que criar um projeto no seu próprio computador.
Você pode encontrar a nova documentação do React em beta.reactjs.org. No devido tempo, você poderá encontrá-la simplesmente em reactjs.org.
Outro grande motivo para usar a nova documentação do React é que ela é muito amigável para iniciantes e, na minha opinião, permitirá que você aprenda conceitos muito mais rápido do que faria de outro modo. Se você se sentiu intimidado ao ler a documentação técnica no passado, acho que ficará agradavelmente surpreso.
Você não precisa aprender componentes de classe
Se você está se perguntando se precisa aprender os componentes da classe neste ano, não. Não precisa.
Conforme você começa a aprender React, você ouvirá sobre algo chamado componente de classe, que é baseado em uma classe do JavaScript normal. Não é mais necessário aprender isso para ser um desenvolvedor do React, mas ainda pode ser útil aprender.
Após a introdução de um recurso chamado React hooks, em 2018, os desenvolvedores do React passaram a usar componentes de função, que são feitos com funções do JavaScript.
Os componentes de classe ainda fazem parte do React e ainda são usados no código de produção em várias situações (como em limites de erro). Esteja ciente, porém, de que você não precisa aprendê-los para ser habilidoso no React.
Na verdade, eu raramente os encontrei, a menos que esteja olhando para uma base de código mais antiga. A maioria das classes já foi migrada para componentes de função e hooks do React.
Faça um favor a você mesmo e aprenda React Query
Qualquer aplicação séria precisa de dados. Muitas vezes, os dados de que você precisa existirão fora de sua aplicação, portanto, você precisará de uma estratégia para buscá-los e usá-los em seu projeto.
Quando você chegar ao ponto de buscar dados, eu recomendo fortemente que você aprenda uma biblioteca chamada React Query.
Você pode instalar o React Query através do pacote npm @tanstack/react-query.
O React Query se tornou a biblioteca ideal para buscar e gerenciar dados externos em aplicações do React.
Qual é o benefício de se usar o React Query? Além de ser uma biblioteca com a qual muitos desenvolvedores e empresas do React estão familiarizados e confiam, será muito benéfico para você aprender o React Query porque é, sem dúvida, a maneira mais poderosa de buscar e gerenciar dados externos em suas aplicações do React.
O maior benefício de usar o React Query vem do fato de que ele fornece um cache (um armazenamento) que permite manter o resultado de cada consulta, para que você possa "salvar" os dados que você buscou. Além disso, possui muitas ferramentas para atualizar esse cache exatamente da maneira que você deseja.
Ele também apresenta informações relevantes sobre o status de cada consulta que você faz, como, por exemplo, quando ela está carregando ou quando resultou em um erro.
Eu aprenderia o React Query depois que você se sentir confortável em buscar dados manualmente usando ferramentas como Fetch API, Axios com o hook useEffect. Assim que estiver, você verá o benefício de usar o React Query em todos os seus projetos do React.
Você não precisa aprender Redux
Se você tentou aprender React anos atrás, pode ter ficado com a impressão de que, para aprender React, você finalmente teve que aprender outra biblioteca chamada Redux.
O Redux é uma biblioteca que nos ajuda a gerenciar o estado (do inglês, state) em nossas aplicações do React. Você pode pensar em estado como quaisquer dados que podem mudar em uma aplicação do React. O Redux nos permite gerenciar uma parte do estado (como, por exemplo, se o nosso usuário está logado) em todas as partes de nossa aplicação do React.
Não é mais necessário aprender o Redux como era nos anos anteriores. A primeira razão para isso é o lançamento da API React Context. Em muitos casos, os desenvolvedores do React usaram o Redux apenas para passar dados pelos componentes de suas aplicações. Este é um trabalho que o React Context pode fazer por nós.
Além disso, se você precisar alterar ou atualizar o estado em muitas partes diferentes de sua aplicação (o que é um requisito diferente da simples leitura do seu estado), existem muitos concorrentes para o Redux. Ao contrário do Redux, essas bibliotecas não exigem que você aprenda novos conceitos, como redutores, ações e assim por diante.
Algumas dessas bibliotecas de gerenciamento de estado mais recentes e "mais leves" incluem:
- Zustand
- Jotai
- Recoil
Uma vez que você supere o básico do React e comece a construir aplicações um pouco maiores além da aplicação de tarefas padrão, você entenderá a necessidade de ter uma biblioteca de gerenciamento de estado. O Redux ainda é uma ótima biblioteca, mas primeiro procure uma biblioteca com uma API mais simples, como o Zustand.
O Create React App não é necessário
Assim que estiver no ponto de criar um projeto do React por conta própria que resida em seu computador, saiba que há muitas maneiras de fazer isso.
O desenvolvimento para a web em geral está cada vez mais on-line – nem todo projeto do React precisa ser feito no seu computador. Em muitos casos, você pode criar um projeto no navegador usando ferramentas como CodeSandbox ou StackBlitz totalmente grátis.
Haverá um ponto, no entanto, em que você precisará ou desejará criar um projeto do React em sua máquina local. É fácil buscar uma ferramenta como o Create React App, que permite criar um projeto do React executando um único comando.
O Create React App ainda é uma ótima ferramenta para se fazer projetos em React. Assim como no Redux, surgiram novas alternativas que oferecem todas as conveniências do Create React App, mas em um pacote menor e geralmente mais rápido.
O principal exemplo disso é o Vite. O Vite é uma ferramenta de construção que permite criar um projeto do React, bem como muitos outros tipos de projetos em JavaScript.
O benefício de se usar o Vite em vez do Create React App está no fato de ele oferecer um servidor de desenvolvimento muito mais rápido.
Para desenvolver e fazer alterações em sua aplicação, ele deve ser executado em um servidor de desenvolvimento. O Create React App, em comparação, pode levar um tempo relativamente longo para iniciar e responder às alterações no código que você faz (isso é chamado de hot reloading, em inglês). O Vite fornece uma experiência muito mais rápida, além de exigir muito menos dependências.
Outra ótima alternativa ao Create React App é o Next.js. O Next é, tecnicamente, um framework do React que vem com muitas conveniências para tornar o desenvolvimento muito mais fácil. Ele vem com seu próprio roteador e ferramentas de busca de dados, para citar algumas dessas conveniências.
O benefício de se usar um framework como Next.js é que você simplesmente precisa tomar menos decisões quando se trata de construir seu projeto. Você precisa escolher muito menos dependências das quais seu projeto depende. Quase tudo o que você precisa para criar sua aplicação do React vem embutido no Next.js.
Dito isso, o Next opera de maneira bastante diferente dos projetos normais do React devido ao fato de ser renderizado pelo servidor por padrão. Isso pode vir com seus próprios problemas e possíveis armadilhas a serem evitadas. Se você, contudo, estiver interessado em criar projetos do React sérios e prontos para produção, o Next é indiscutivelmente a melhor escolha.