Trilha · Intermediário
React
Componentes, estado e as decisões que aparecem quando a tela começa a crescer.
20 lições em ordem de estudo
Começando
- 01O que é React: componentes, estado e para que serveO que é React, o problema que os componentes resolvem e o que muda em relação ao DOM puro — com o mesmo contador escrito das duas formas.testado
- 02Projeto com Vitenpm create vite, o que cada arquivo do projeto faz, como o main.jsx liga o componente ao HTML e o que dá para apagar antes de começar.testado
Componentes e JSX
- 03JSXComo o JSX vira chamada de função, por que é className e não class, como interpolar valores com chaves e o que não pode aparecer dentro do JSX.testado
- 04PropsComo declarar, receber e desestruturar props, definir valor default, passar função e por que alterar uma prop dentro do filho quebra na hora.testado
- 05Renderização condicionalQuatro formas de mostrar e esconder pedaços da tela no React, o bug do && com zero e quando o early return deixa o componente mais legível.testado
- 06Listas e keyComo transformar um array em elementos com map, o que a key faz por dentro e por que usar o índice quebra a lista assim que um item é removido.testado
Estado e eventos
- 07EventosComo ligar funções a eventos no JSX, por que onClick recebe a função e não a chamada, passar argumento e o que o evento sintético faz.testado
- 08useStateO que o useState devolve, por que a tela não muda quando você altera a variável direto e como usar a forma de função para não perder atualização.testado
- 09Atualizar estado no React sem mutar array e objetoPor que push e atribuição direta não renderizam, como copiar com spread, map e filter, e o que muda quando o estado tem objeto aninhado.testado
- 10Formulário controladoComo ligar input, textarea, select e checkbox ao estado, validar antes do submit e por que aparece o aviso de campo sem onChange.testado
Efeitos e dados
- 11useEffectQuando o efeito roda, o que o array de dependências controla, por que existe a função de limpeza e como o Strict Mode roda tudo duas vezes.testado
- 12Consumir API no React: fetch, carregando e erroComo buscar dados de uma API dentro do componente, tratar carregando e erro, cancelar requisição antiga e lidar com respostas que chegam fora de ordem.testado
Hooks
- 13useRefComo pegar um elemento com ref, dar foco num input, guardar valor entre renders sem provocar renderização e a diferença para o useState.testado
- 14useMemo e useCallbackO que cada um memoriza, por que envolver tudo deixa o app mais lento e a medição que mostra a partir de onde a memorização começa a compensar.testado
- 15Hook customizadoComo transformar lógica com estado em um hook próprio, o que a regra do prefixo use significa de verdade e quando o hook não é a resposta.testado
Estado compartilhado
- 16Context APIComo criar contexto, envolver a árvore com o provider e ler com useContext — e por que todo componente abaixo re-renderiza quando o valor muda.testado
- 17useReducerComo trocar vários useState por um reducer, o formato da action e a linha em que o reducer fica melhor que o useState, com um carrinho real.testado
- 18children e composiçãoComo um componente embrulha outro com props.children, o padrão de slots com props de elemento e por que isso resolve prop drilling sem contexto.testado
Aplicação
- 19React RouterComo configurar rotas no React Router 7, navegar sem recarregar a página, ler parâmetro da URL e proteger uma rota que exige login.testado
- 20CSS no React: módulos, Tailwind ou styled-componentsAs quatro formas de estilizar componente no React, o que cada uma custa no bundle final e a tabela de quando escolher cada uma delas.testado