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
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
- 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
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