Skip to content

Latest commit

 

History

History
314 lines (249 loc) · 8.65 KB

topics.md

File metadata and controls

314 lines (249 loc) · 8.65 KB
Raw

O que será ensinado no Passo a Passo de Projetos React JS?

Os tópicos do Passo a Passo de Projetos React JS são os seguintes:

1) Fundamentos do React

  • Por que Frameworks Front-end existem
  • Libraries x Frameworks
  • React x JavaScript puro - Um comparativo
  • Por que usar React JS
  • Como é desenvolver com React puro
  • O que é JSX e qual problema ele resolve
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • Opções modernas para criar um novo projeto React
  • Vite x Next JS - Qual usar
  • Configurando o ambiente de desenvolvimento
  • ES Modules
  • Strict mode e renderização do root component
  • O que é um componente React
  • Como reutilizar componentes do jeito certo
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • Lógica em componentes
  • Separação de responsabilidades
  • CSS em projetos React JS
  • O que são props e como criá-las do jeito certo
  • Imutabilidade e Fluxo de dados em mão única (one-way data flow)
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • As regras do JSX
  • O jeito certo de renderizar listas
  • O que é Renderização condicional e por que criá-las
  • Renderização condicional com &&
  • Renderização condicional com ternário
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • Renderização condicional de classe CSS e conteúdo textual
  • Como extrair JSX para um novo componente do jeito certo
  • Aplicando Destructuring Assignment em props
  • O que é e por que usar React Fragment
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • O jeito certo de manipular eventos no React
  • O que é um Hook e qual problema ele resolve
  • O jeito certo de usar o Hook useState
  • O estado por baixo dos panos (não vou falar de política)
  • Como usar o React Developer Tools do jeito certo
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • Como atualizar o estado baseando-se no estado atual
  • Estado x Props - Quais as diferenças entre eles
  • Uma recapitulação sobre estado
  • Uma introdução a formulários no React
  • O que são componentes controlados e não-controlados
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • Desafio: Projeto 1
  • Visão geral e especificações do projeto
  • Desenvolvendo a marcação estática do projeto
  • Renderizando a lista de itens
  • Construindo o form
  • Fundamentos do gerenciamento de estado no React
  • O jeito certo de elevar um estado
  • Como comunicar de filho pra pai do jeito certo
  • Uma operação complexa com imutabilidade
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • O que é um estado derivado
  • Calculando com estado derivado
  • O jeito certo de ordenar itens de uma lista
  • Como limpar uma lista
  • Organizando componentes em arquivos separados
  • Construindo um componente reutilizável
  • A prop children
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • Desafio: Projeto 2
  • Visão geral e especificações do projeto
  • Desenvolvendo a marcação estática do projeto
  • Renderizando a lista de itens
  • Construindo o form
  • Criando componentes controlados

2) Aprendendo a nadar

  • Projeto 3
  • Visão geral e especificações do projeto
  • Configurando o ambiente
  • O jeito certo de dividir uma UI em componentes React
  • Categorizando componentes
  • Perfuração de props (Prop Drilling)
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • Composição de componentes
  • Solucionando o problema de prop drilling
  • Criando um componente reutilizável através de composição
  • Uma alternativa a children: exposição de múltiplos componentes
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • Como construir um componente reutilizável de avaliação
  • Criando o objeto de avaliação
  • Manipulando eventos de hover
  • Props como API de componente
  • Melhorando a reutilização do componente
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • O ciclo de vida de um componente
  • O jeito errado de executar requisições no React
  • O jeito certo de executar requisições: o Hook useEffect
  • Criando um estado de carregamento
  • Tratando erros
  • O array de dependências do Hook useEffect
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • Sincronizando requisições e dados
  • Selecionando um componente do projeto
  • Renderizando informações da resposta da requisição
  • Fazendo o título da aba reagir a mudanças do estado
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • A função de limpeza do Hook useEffect
  • Aprofundando o conhecimento sobre Hooks
  • A regras dos Hooks
  • Nuances do Hook useState
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • O jeito errado de selecionar elementos do DOM no React
  • O Hook useRef
  • Persistindo dados entre renderizações
  • Quando criar um Hook personalizado
  • O jeito certo de criar um Hook personalizado
  • Bateria de Desafios

3) Mergulhando no React

  • Resolução da Bateria de Desafios anterior
  • Criando um Hook personalizado para manipular adição e remoção de um evento
  • O Hook useReducer
  • Gerenciando partes relacionadas do estado
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • Projeto 4
  • Visão geral e especificações do projeto
  • Fazendo requests para a API
  • Lidando com os status de requests
  • Renderizando as informações iniciais
  • Implementando a lógica para manipular um novo estado
  • Exibindo o progresso do usuário
  • Desenvolvendo a interface final da aplicação
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • Implementando a lógica de um timer com o Hook useEffect
  • useState x useReducer - Quando usar um Hook ou o outro
  • Projeto 5
  • Visão geral e especificações do projeto
  • Conhecendo o React Router
  • O que é SPA (Single Page Application)
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • Implementando as principais rotas do projeto
  • Opções de estilização CSS em projetos React
  • Construindo as páginas do projeto
  • Desenvolvendo a marcação estática do projeto
  • Renderizando as listas do projeto
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • Implementando rotas dinâmicas
  • Lendo e setando uma query string
  • Usando um Hook personalizado para navegar de forma automatizada
  • Apresentando a Context API
  • Criando e provendo uma context na prática
  • Consumindo uma context na prática
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • Implementando um componente provider e um Hook personalizado
  • Criando um novo context no projeto
  • Finalizando uma view do projeto
  • Criando a adição de um objeto no projeto
  • Criando a deleção de um objeto
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • Criando uma context para mais uma feature da aplicação
  • Implementando o login
  • Protegendo uma rota contra acesso não-autorizado
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • Visão geral sobre otimização de performance: evitando renders desnecessários
  • Como usar o Hook useMemo do jeito certo
  • Conhecendo o Hook useCallback
  • Otimizando re-renders de context
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • Otimizando o tamanho do bundle com code-splitting
  • Como não otimizar de forma prematura
  • Regras e boas práticas no uso do Hook useEffect
  • Setando um estado baseado na atualização de outro estado
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • O que é React Query e qual problema ela resolve
  • Configurando a React Query
  • Fazendo requisições com a React Query
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • Uma visão geral de padrões avançados em React
  • Bateria de Desafios

  • Resolução da Bateria de Desafios anterior
  • Fazendo deploy no Netlify
  • Fazendo deploy na Vercel

4) Bônus: Aprenda Next JS (v14)

  • O que é o Next JS e qual problema ele resolve
  • Quando usar ou não usar Next JS
  • Criando uma aplicação Next.js
  • Roteamento baseado em arquivos e params
  • Agrupamento de rotas
  • Criando layouts reutilizáveis com Layout Components
  • Como funciona a navegação por baixo dos panos no Next JS
  • O Hook useRouter
  • Server Components x Client Components - Quando usar um ou outro
  • Renderizando Server Components
  • Requisição de dados com Server Components
  • Criando API Routes
  • Gerando static params para rotas dinâmicas
  • Lidando com erros - Error Boundaries
  • Mutação de dados
  • Opções de estilização CSS em projetos NextJS