Dominando o React
Um guia completo para aprender os fundamentos do React
Descrição do livro
Maximilian Schwarzmüller é um instrutor de grande destaque que já ajudou mais de 3 milhões de alunos em todo o mundo a aprender a codificar. Campeão de vendas, seu curso em vídeo sobre o React, intitulado React – The Complete Guide, tem mais de novecentos mil alunos na Udemy.
Max escreveu este guia como referência rápida para iniciantes e explora os principais conceitos do React. Explicações simples, exemplos relevantes e derivações pormenorizadas fazem deste guia o recurso ideal para desenvolvedores atarefados. Nesta segunda edição, Max mostra as mudanças trazidas pelo React 19, tais como o novo hook use() e ações de formulários e como pensar sobre o React no servidor.
Este livro ajudará você em seus próximos projetos do React ao mostrar os bastidores dos frameworks – tenha você acabado de fazer o curso de Max em vídeo e esteja procurando uma referência prática, ou usando uma variedade de outros materiais didáticos e precisando de um único guia de estudo que junte todas essas informações.
No repositório GitHub do livro, você encontrará soluções completas para todos os testes e exercícios apresentados no final dos capítulos.
Você aprenderá a:
• Criar aplicativos web modernos, reativos e fáceis de usar
• Criar componentes e utilizar props para transmitir dados entre eles
• Manipular eventos, realizar atualizações de estado e gerenciar conteúdo condicional
• Adicionar estilos de forma dinâmica e condicional para interfaces de usuário modernas
• Usar técnicas avançadas de gerenciamento de estado como a API de contexto do React
• Utilizar o React Router para renderizar diferentes páginas para diferentes URLs
• Entender as melhores práticas e oportunidades de otimização
• Usar Componentes do Servidor do React e ações do servidor
Ver menos ▲Sumário
- Sobre o autor
- Sobre os revisores
- Prefácio
- Capítulo 1: React – O que e por quê
- Introdução
- O que é React?
- O problema do “JavaScript vanilla”
- O React e os códigos declarativos
- Como o React manipula o DOM
- Introdução a SPAs
- Como criar um projeto React com o Vite
- Resumo e principais conclusões
- O que vem a seguir?
- Teste seus conhecimentos!
- Capítulo 2: Entenda os componentes do React e o JSX
- Introdução
- O que são componentes?
- Por que componentes?
- Anatomia de um componente
- O que exatamente são funções de componentes?
- O que o React faz com todos esses componentes?
- Componentes integrados
- Convenções de nomenclatura
- JSX x HTML x JavaScript puro
- Como usar o React sem JSX
- Elementos JSX são tratados como valores JavaScript regulares
- Elementos JSX precisam ter uma tag de fechamento
- Além do conteúdo estático
- Como gerar conteúdo dinâmico
- Como renderizar imagens
- Quando dividir componentes?
- Resumo e principais conclusões
- O que vem a seguir?
- Teste seus conhecimentos!
- Aplique o que aprendeu
- Atividade 2.1: criação de um aplicativo React para se apresentar
- Atividade 2.2: criação de um aplicativo React para registrar suas metas para este livro
- Capítulo 3: Componentes e props
- Introdução
- Os componentes podem fazer mais?
- Como usar props em componentes
- Como transmitir props para componentes
- Como aplicar props em um componente
- Componentes, props e reusabilidade
- O prop especial “children”
- Quais componentes precisam de props?
- Como lidar com vários props
- Como espalhar props
- Prop chains/prop drilling
- Resumo e principais conclusões
- O que vem a seguir?
- Teste seus conhecimentos!
- Aplique o que aprendeu
- Atividade 3.1: criação de um aplicativo para gerar suas metas para este livro
- Capítulo 4: Como trabalhar com eventos e estado
- Introdução
- Qual é o problema?
- Como não resolver o problema
- Uma melhor solução incorreta
- Como melhorar a solução ao reagir adequadamente a eventos
- Como atualizar o estado corretamente
- Um olhar mais atento sobre useState()
- Como trabalhar com vários valores de estado
- Como usar vários slices de estado
- Como gerenciar objetos de estado mesclados
- Como atualizar corretamente o estado com base no estado anterior
- Binding bidirecional
- Como derivar valores a partir do estado
- Como trabalhar com formulários e envio de formulários
- Elevação de estado
- Resumo e principais conclusões
- O que vem a seguir?
- Teste seus conhecimentos!
- Aplique o que aprendeu
- Atividade 4.1: construa uma calculadora simples
- Atividade 4.2: aprimore a calculadora
- Capítulo 5: Como renderizar listas e conteúdo condicional
- Introdução
- O que são conteúdos condicionais e dados de listas?
- Como renderizar conteúdo condicionalmente
- Diferentes maneiras de renderizar conteúdo condicionalmente
- Como definir tags de elementos condicionalmente
- Como gerar dados de listas
- Como mapear dados de listas
- Como atualizar listas
- Um problema com itens de listas
- Resumo e principais conclusões
- O que vem a seguir?
- Teste seus conhecimentos!
- Aplique o que aprendeu
- Atividade 5.1: mostre uma mensagem de erro condicional
- Atividade 5.2: gere uma lista de produtos
- Capítulo 6: Como estilizar aplicativos React
- Introdução
- Como funciona a estilização em aplicativos React?
- Como usar estilos embutidos
- Como definir estilos por meio de classes CSS
- Como definir estilos dinamicamente
- Estilos condicionais
- Como combinar várias classes CSS dinâmicas
- Como mesclar vários objetos de estilos embutidos
- Como construir componentes com estilos personalizáveis
- O problema dos estilos sem escopo
- Estilos com escopo com módulos CSS
- Biblioteca styled-components
- Como usar a biblioteca Tailwind CSS para estilização
- Como usar outras bibliotecas e frameworks de estilização CSS ou JavaScript
- Resumo e principais conclusões
- O que vem a seguir?
- Teste seus conhecimentos!
- Aplique o que aprendeu
- formulário
- Atividade 6.2: use módulos CSS para definir o escopo do estilo
- Capítulo 7: Portais e refs
- Introdução
- Um mundo sem refs
- Refs versus estado
- Como usar refs para mais do que obter acesso ao DOM
- Refs em componentes personalizados
- Componentes controlados versus não controlados
- React e posicionamento final no DOM
- Portais ao resgate
- Resumo e principais conclusões
- O que vem a seguir?
- Teste seus conhecimentos!
- Aplique o que aprendeu
- Atividade 7.1: extraia valores de entradas do usuário
- Atividade 7.2: adicione uma gaveta lateral
- Capítulo 8: Como lidar com efeitos colaterais
- Introdução
- Qual é o problema?
- O que são efeitos colaterais?
- Efeitos colaterais não têm a ver apenas com solicitações HTTP
- Como lidar com efeitos colaterais com o hook useEffect()
- Como usar useEffect()
- Efeitos e dependências
- Dependências desnecessárias
- Limpeza depois dos efeitos
- Como lidar com vários efeitos
- Funções como dependências
- Como evitar que o efeito seja executado desnecessariamente
- Efeitos e código assíncrono
- Regras de hooks
- Resumo e principais conclusões
- O que vem a seguir?
- Teste seus conhecimentos!
- Aplique o que aprendeu
- Atividade 8.1: construa um blog básico
- Capítulo 9: Como lidar com entradas e formulários de usuários com ações de formulários
- Introdução
- Como lidar com envios de formulários sem ações
- Como extrair entradas de usuários
- Qual é a melhor solução?
- Como lidar com envios de formulários com ações
- Ações síncronas versus assíncronas
- Nos bastidores: ações são transições
- Como gerenciar o estado com base no envio de formulários
- Como atualizar o estado da IU com useActionState()
- Como lidar com estados da IU pendentes com useFormStatus()
- Como executar atualizações otimistas
- Resumo e principais conclusões
- O que vem a seguir?
- Teste seus conhecimentos!
- Aplique o que aprendeu
- Atividade 9.1: gerencie um formulário de feedback
- Capítulo 10: Nos bastidores do React e oportunidades de otimização
- Introdução
- Recapitulando avaliações e atualizações de componentes
- O que acontece quando uma função de componente é chamada
- DOM virtual versus DOM real
- Agrupamento de estados
- Como evitar avaliações desnecessárias de componentes filhos
- Como evitar computações dispendiosas
- Como utilizar useCallback()
- Como usar o React Compiler
- Como evitar o download desnecessário de códigos
- Modo estrito
- Como depurar código e ferramentas de desenvolvedor do React
- Resumo e principais conclusões
- O que vem a seguir?
- Teste seus conhecimentos!
- Aplique o que aprendeu
- Atividade 10.1: otimize um aplicativo existente
- Capítulo 11: Como trabalhar com um estado complexo
- Introdução
- Um problema referente ao estado entre componentes
- Como usar o contexto para gerenciar estados de vários componentes
- Como fornecer e gerenciar valores de contexto
- Como usar o contexto em componentes aninhados
- Como alterar o contexto a partir de componentes aninhados
- Como usar a API de contexto com eficiência
- Como obter um melhor preenchimento automático de códigos
- Contexto ou elevação do estado?
- Como “terceirizar” a lógica do contexto para componentes separados
- Como combinar vários contextos
- Limitações de useState( )
- Como gerenciar o estado com useReducer( )
- Entenda funções redutoras
- Como despachar ações
- Resumo e principais conclusões
- O que vem a seguir?
- Teste seus conhecimentos!
- Aplique o que aprendeu
- Atividade 11.1: migre um aplicativo para a API de contexto
- Atividade 11.2: substitua useState() por useReducer()
- Capítulo 12: Como construir hooks personalizados no React
- Introdução
- Introdução aos hooks personalizados
- Por que criar hooks personalizados?
- Um primeiro hook personalizado
- Hooks personalizados: um recurso flexível
- Hooks e parâmetros personalizados
- Hooks personalizados e valores de retorno
- Um exemplo mais complexo
- Como criar uma primeira versão do hook personalizado
- Como retornar valores para que o hook tenha utilidade
- Como aceitar um parâmetro de entrada para melhorar a reusabilidade
- Como usar hooks personalizados para acesso ao contexto
- Resumo e principais conclusões
- O que vem a seguir?
- Teste seus conhecimentos!
- Aplique o que aprendeu
- Atividade 12.1: crie um hook personalizado para entradas no teclado
- Capítulo 13: Aplicativos de várias páginas com React Router
- Introdução
- Uma única página não é suficiente
- Primeiros passos no React Router e definição de rotas
- Como adicionar navegação à página
- Como trabalhar com layouts e rotas aninhadas
- Do link para o NavLink
- Componentes de rota versus componentes “normais”
- De rotas estáticas a dinâmicas
- Como extrair parâmetros da rota
- Como criar links dinâmicos
- Como navegar programaticamente
- Como redirecionar
- Como lidar com rotas indefinidas
- Carregamento “preguiçoso”
- Resumo e principais conclusões
- O que vem a seguir?
- Teste seus conhecimentos!
- Aplique o que aprendeu
- Atividade 13.1: crie um site básico composto de três páginas
- Capítulo 14: Como gerenciar dados com o React Router
- Introdução
- A forte conexão entre busca de dados e roteamento
- Como enviar solicitações HTTP sem o React Router
- Como carregar dados com o React Router
- Como obter acesso a dados carregados
- Como carregar dados para rotas dinâmicas
- Loaders, solicitações e código do lado cliente
- Um novo olhar sobre layouts
- Como reutilizar dados entre rotas
- Como tratar erros
- Envio de dados
- Como trabalhar com action() e dados de formulário
- Como retornar dados em vez de redirecionar
- Como controlar qual <Form> aciona qual ação
- Como refletir o status de navegação atual
- Como enviar formulários programaticamente
- Busca e envio de dados nos bastidores
- Como adiar o carregamento de dados
- Resumo e principais conclusões
- O que vem a seguir?
- Teste seus conhecimentos!
- Aplique o que aprendeu
- Atividade 14.1: um aplicativo de tarefas
- Capítulo 15: Renderização do lado servidor e construção de aplicativos fullstack com Next js
- Introdução
- O que há de errado com os aplicativos React do lado cliente?
- O que é renderização do lado servidor (SSR)?
- Como adicionar SSR a um aplicativo React
- A busca de dados no lado servidor não é trivial
- Introdução ao Next js
- Como criar projetos do Next js
- Como trabalhar com rotas baseadas em arquivos
- Renderização do lado servidor com Next js
- Como trabalhar com layouts
- Como gerenciar a navegação interna
- Como criar e usar componentes regulares
- Como lidar com rotas dinâmicas
- Outras convenções de nomenclatura de arquivos
- Aprofundando-se no Next js
- Resumo e principais conclusões
- O que vem a seguir?
- Teste seus conhecimentos!
- Aplique o que aprendeu
- Atividade 15.1: migre um aplicativo React Router baseado no Vite
- Capítulo 16: Componentes do Servidor do React e ações do servidor
- Introdução
- O problema da busca de dados no lado servidor
- Introdução aos RSCs
- Entenda os RSCs
- Como criar e usar RSCs
- Como usar RSCs em projetos do React
- Não é possível usar RSCs e ações do servidor em todos os projetos
- RSCs versus renderização no lado servidor
- RSCs versus componentes do cliente
- Busca avançada de dados com Next js
- Da busca de dados à mutação de dados
- Como lidar com mutações de dados com ações do servidor
- Como usar ações do servidor em projetos do React
- Como definir e acionar ações do servidor
- Como lidar com entradas de usuários e atualizar a IU
- Ações do servidor e useActionState()
- Como armazenar ações do servidor em arquivos separados
- Resumo e principais conclusões
- O que vem a seguir?
- Teste seus conhecimentos!
- Aplique o que aprendeu
- Atividade 16.1: crie um miniblog
- Capítulo 17: Entenda o React Suspense e o hook use()
- Introdução
- Como usar o Suspense para mostrar conteúdo de fallback mais refinado
- Como usar o Suspense para busca de dados com Next js
- Como usar o Suspense em outros projetos do React – possível, mas complicado
- Padrões de uso do Suspense
- Como revelar conteúdo junto
- Como revelar conteúdo o mais rapidamente possível
- Como aninhar conteúdo suspenso
- Buscar dados com Suspense ou useEffect()?
- Resumo e principais conclusões
- O que vem a seguir?
- Teste seus conhecimentos!
- Aplique o que aprendeu
- Atividade 17.1: implemente o Suspense no miniblog
- Capítulo 18: Próximos passos e recursos adicionais
- Introdução
- Como proceder?
- Torne-se um desenvolvedor fullstack do React
- Problemas interessantes a explorar
- Bibliotecas do React comuns e populares
- Uso de TypeScript
- Outros recursos
- Além do React para aplicativos da web
- Palavras finais
- Índice remissivo
Sobre o autor
Maximilian Schwarzmüller é desenvolvedor web profissional e instrutor de cursos campeões de vendas on-line. Na Udemy, é um dos instrutores on-line mais populares e de maior destaque, com mais de 3 milhões de alunos em todo o mundo. Para se tornarem desenvolvedores, os alunos podem explorar os mais de 40 cursos oferecidos por ele, a maioria dos… Ver perfil completo ▶
Livros relacionados
Recursos
Opinião dos leitores
Angel A G M
Excelente.