Learn ReactAlém do básico
Este handbook cobriu os fundamentos: configurar um projeto, componentes, JSX, estilização, props, estado, eventos, formulários, effects, e os hooks que os integram, além do processo de pensar em React para transformar um design em uma app funcionando e o trabalho de manter essa app acessível. Esse é o núcleo da biblioteca, e é suficiente para construir interfaces reais e funcionais. Algumas preocupações ficam fora desse núcleo, e quase toda app React em produção acaba usando uma combinação delas mais cedo ou mais tarde. Este capítulo é o mapa: para que cada uma serve, onde se encaixa, e onde aprender sobre ela.
Padrões de componentes reutilizáveis
Depois que você escreve alguns componentes, a pergunta muda de como construir um para como construir um que sobreviva ao seu segundo uso. A resposta do React é composição: um componente envolve conteúdo em vez de receber uma prop nomeada para cada variação que possa precisar. Children e composição começa lá, componentes compostos divide um componente em peças cooperativas que quem chama arranja como markup, render props e componentes headless devolvem o estado interno de um componente para quem o renderiza, e custom hooks na prática puxam lógica com estado completamente para fora dos componentes para que qualquer componente possa compartilhá-la. Juntos, é assim que uma biblioteca de componentes permanece pequena enquanto cobre uma ampla gama de usos.
Roteamento
Roteamento mapeia uma URL para a view que deve ser exibida, mantém a barra de endereços sincronizada conforme o usuário se move, e mantém o botão voltar funcionando, tudo sem um reload completo da página. React Router é a biblioteca que a maioria das apps React usa, e Roteamento cobre completamente, através de layouts aninhados, parâmetros de URL e rotas protegidas.
Estado compartilhado
Estado que várias partes distantes da app leem é a outra coisa que cresce além do que props sozinhas lidam bem. A resposta do React é Context, que entrega um valor para qualquer componente abaixo de um provider sem passá-lo através das camadas intermediárias. Passando de certo tamanho, apps usam uma store dedicada: Redux Toolkit e Zustand são as duas que você vai encontrar com mais frequência. Elas adicionam ferramentas para organizar updates, debugá-los e mantê-los previsíveis conforme o número de escritores cresce. Context é suficiente para um tema, um usuário autenticado, ou o estado aberto de um menu, então comece aí e deixe uma store ganhar seu lugar.
O modelo de renderização
React executa novamente a função do componente quando seu estado muda, e então descobre o que mudar no DOM a partir do que essa função retorna. Conhecer os passos que ela percorre explica por que um componente executa quando executa, por que a maioria dos re-renders custam pouco o suficiente para ignorar, e onde a lentidão de uma app realmente vem quando ela se sente lenta. Como React renderiza percorre esses passos e as ferramentas que as tornam visíveis, StrictMode e o React Profiler.
Performance
O trabalho de performance fica em cima do modelo de renderização, porque a maior parte dele se resume a fazer menos do que um render custa. Memoização cobre useMemo, memo, e useCallback, as três ferramentas para lembrar um resultado entre renders, junto com a regra de igualdade referencial que decide se qualquer uma delas ajuda. Code splitting lida com a outra metade, o tamanho do bundle que um browser baixa antes de qualquer coisa aparecer, carregando partes da app sob demanda com lazy e Suspense. Ambas adicionam complexidade, então use-as assim que você medir um problema que vale a pena consertar.
Meta-frameworks
React por si só apenas renderiza a interface. Ele não traz uma opinião sobre roteamento, como carregar dados antes de uma página aparecer, ou como renderizar uma página em um servidor antes de chegar ao browser, três coisas que quase toda app em produção precisa. Um meta-framework é um framework construído em cima do React que fornece essas peças faltantes, e Next.js é o que a maioria do mundo React usa. É por isso que a maioria das apps React em produção não são React puro: são React rodando dentro de Next.js ou algo parecido. Os tipos de frameworks cobre meta-frameworks com mais profundidade, incluindo como Next.js se relaciona com React.
Ferramentas
Esta parte já tem um capítulo próprio. Configurar um projeto React cobriu por que o JSX usado ao longo deste handbook não é JavaScript válido por si só, e como Vite executa um dev server, compila JSX on the fly, e empacota tudo em arquivos otimizados quando é hora de colocar em produção. Pertence a este mapa porque fica embaixo de todos os outros itens: um router, um meta-framework, e um deploy step todos assumem que uma build tool já está fazendo esse trabalho. Volte ao capítulo de setup quando você quiser os detalhes novamente.
TypeScript
A maioria dos trabalhos com React e a maioria das bases de código existentes usam TypeScript, que adiciona tipos em cima de JavaScript para que o editor e a build possam pegar uma prop digitada errado ou um valor que possa estar faltando antes de a app executar. React funciona da mesma forma de qualquer jeito; o que muda é que componentes, props e estado trazem anotações de tipo. TypeScript em React cobre as partes específicas do React assim que você estiver confortável com os fundamentos aqui.
Deploy
Depois que a app é construída, ela precisa de um lar. Executar um comando de build, vite build para um projeto Vite, produz uma pasta de arquivos HTML, CSS e JavaScript simples: a saída estática da app. Enviar essa pasta para um host, como Netlify, Vercel, ou Cloudflare Pages, é o que coloca a app na internet para outras pessoas usarem.
Onde isso te deixa
Esse é o mapa: padrões de composição para componentes que são usados mais de uma vez, roteamento para mover entre views, context ou uma store para estado que viaja, o modelo de renderização e o trabalho de performance que repousa nele, um meta-framework como Next.js para lidar com o que React deixa de fora, TypeScript para a rede de segurança que a maioria das equipes trabalha com, a build Vite do capítulo de setup transformando o código em arquivos que um browser pode carregar, e um host para colocar o resultado online. Nenhum deles precisa ser aprendido hoje. Escolhendo e aprendendo um framework é o guia para decidir se e quando adicionar uma peça como Next.js, e como pesar as opções assim que esse momento chega. O caminho mais rápido através de tudo isso é a mesma abordagem que te trouxe até aqui: construir um pequeno projeto real. Escolha algo que valha a pena fazer, confie nos fundamentos deste handbook, e traga as peças acima apenas uma vez que o projeto realmente peça por elas. Os capítulos após este vão mais fundo em várias delas: padrões de componentes reutilizáveis construídos em children e context, React Router de ponta a ponta, como React renderiza e o trabalho de performance que repousa nele, e finalmente autenticação e TypeScript.
Vite já está em suas mãos no capítulo de setup, e roteamento, Next.js, e deploy são peças que você vai adquirir naturalmente assim que um projeto realmente precisar delas.
Construa algo pequeno em seguida. Você está pronto para isso.
Próximo: Children e composição, onde componentes reutilizáveis começam permitindo que quem chama coloque conteúdo dentro deles.