React §

---

Introdução §

• Comando npx
• Ferramenta create-react-app
• Estrutura gerada pelo create-react-app
• Rodando uma aplicação React
• Componentes no React
• Sintaxe JSX
• Processo de build da aplicação React
• Minificação de código
• React não precisa estar na página toda
• Convenções no React
• Extensão do Chrome - React Developer Tool
• Eventos Sintéticos no React
• Virtual DOM

Componentes §

Tipos de componentes §

• Componente Stateful
• Componente Stateless
• Componente Funcional
• Componente de Classe

Lifecycle Methods em componentes de classe §

• Lifecycle Methods
• componentDidMount Lifecycle Method
• componentDidUpdate Lifecycle Method
• componentWillUnmount Lifecycle Method

Propriedades e Estados §

• Estados com Arrays e Objetos
• Propriedades do React - Props
• Validação de propriedades de componentes no React com Prop-types
• Exportação de componentes
• Paginação no React
• Diferença entre estado e props

Testes automatizados §

• Introdução ao Jest DOM
• Padrão de nomenclatura de arquivos de testes
• Criando os primeiros casos de testes com Jest DOM
• Validando testes assíncronos com expected.assertions() no Jest DOM
• Explorando fireEvent no Jest DOM
• Explorando userEvent no Jest DOM
• Explorando a cobertura de testes no Jest DOM
• Snapshots no Jest DOM
• Introdução ao Mock Service Worker (MSW)
• Criando mocks de requisição com MSW
• Esperando a renderização de elementos assíncronos com Jest DOM

React Hooks §

• React Hook - useState
  • Lift State Up
• Comportamento Assíncrono do setState no React
• React Hook - useEffect
• Regras dos React Hook
• React Hook - useCallback
• React Hook - useMemo
• React Hook - useRef
• React Hook - useContext
• React Hook - useReducer
• Gerenciamento de estado global com useReducer e Context API
• React Hooks personalizados
• React Hook - useInterval
• React Hook - useFetch
• React Hook - useAsync
• React Hook - useLayoutEffect
• Explorando React.forwardRef
• React Hook - useImperativeHandle
• React Hook - useMediaQuery
• React Hook - useDebugValue
• Ordem de execução dos Hooks

Tratamento de erros §

• Error Boundaries para controle de erros no React

Compound Components §

• Explorando React.Children
• Explorando React.cloneElement
• Padrão Compound Components
• Explorando React.lazy
• Explorando componente Suspense
• Divisão de Código - Code-Splitting

React Router DOM §

• Introdução ao React Router DOM
• Instalação e configuração do React Router DOM
• Criando rotas com React Router DOM
• Diferença entre o component Link e a tag A
• Rotas com parâmetros e Query String
• Redirecionamento de páginas
• Criando rota para 404
• Rotas aninhadas
• Modificando trechos da página com o componente Outlet
• Enviar e receber estados com useLocation

Bibliotecas §

• Biblioteca TanStack (React Query)