BootCamp React

Horas-aula: 160:00
Habilidades: ReactJS,TypeScript,CRUD,dashboard
Link: Prof. Nelio Alves - Devsuperior: Escola de Programação
Concluído: 27-03-2024

Desafios de projeto:

07 - Layout e navegação

07-01 Visão geral do capítulo
07-02 Visão geral de ReactJS e TypeScript
07-03 Instalação NPM, Yarn e VS Code
07-04 Baixando o projeto pronto
07-05 Criando o projeto ReactJS
07-06 Estrutura do projeto
07-07 Limpando o projeto
07-08 Adicionando Bootstrap ao projeto
07-09 Customizando o tema do Bootstrap
07-10 Prettier Code Formatter
07-11 React render e componente React
07-12 Começando o componente Navbar
07-13 Importando fontes, estilos globais
07-14 Referências sobre Bootstrap
07-15 Referências sobre Flexbox
07-16 Começando a estilizar a Navbar
07-17 Menu hamburguer da Navbar
07-18 Exportando imagem do Figma
07-19 Página Home - estrutura básica do HTML
07-20 Começando a estilização
07-21 Finalizando o layout X-Small
07-22 Responsividade até breakpoint 992px
07-23 Finalizando a responsividade
07-24 Preparando para fazer o component ProductCard
07-25 Criando componente ProductCard
07-26 Criando o componente ProductPrice
07-27 Mostrando cards na tela Catalog com Bootstrap Grid System
07-28 Rotas com React Router DOM
07-29 ButtonIcon customizado
07-30 Desafio para entregar
TAREFA: Layout e navegação

08 - Integração com API

08-01 Visão geral do capítulo
08-02 Baixando o projeto pronto
08-03 Preparando o projeto para começar as aulas
08-04 Props - primeiro exemplo
08-05 ProductCard, tipos customizados
08-06 Formatando número com NumberFormat
08-07 ProductDetails - rota com parâmetro de URL
08-08 ProductDetails HTML
08-09 ProductDetails layout mobile
08-10 ProductDetails responsivo
08-11 Links entre páginas Catalog e ProductDetails
08-12 Título da página Catalog
08-13 Pagination HTML
08-14 Pagination CSS
08-15 Admin, Navbar HTML
08-16 Admin layout
08-17 Admin Navbar layout mobile
08-18 Admin Navbar layout responsivo
08-19 Rotas, redirecionamento, nesting
08-20 Primeira requisição com Axios
08-21 React Hooks useState e useEffect
08-22 Hook useParams
08-23 Fazendo a requisição paginada de produtos
08-24 Renderizando dinamicamente os cards do catálogo
08-25 Incluindo Loaders na página
08-26 Ajustes no layout do CardLoader
08-27 Loaders para ProductDetails
08-28 Formulário raiz - apresentando o estudo de caso
08-29 Tratando eventos de formulário
08-30 Representando e tratando os dados do formulário
08-31 Integrando com API ViaCEP por meio do Axios
08-32 Desafio para entregar
TAREFA: Github API

9 - Autenticação e autorização

09-01 Visão geral do capítulo
09-02 Baixando o projeto pronto
09-03 Preparando o projeto para começar as aulas
09-04 Rota básica de login
09-05 Sub-rotas da área auth
09-06 Estilizando os containers da tela Auth
09-07 Estilizando o banner
09-08 HTML do card de Login
09-09 Estilizando o card de Login
09-10 React Hook Form - primeiro teste
09-11 Correção - AxiosRequestConfig
09-12 Fazendo a requisição de login
09-13 Manipulação de erros manual com useState
09-14 Primeira validação de dados com React Hook Form
09-15 Validando email com expressão regular
09-16 Estilização condicional dos inputs do formulário
09-17 Salvando os dados de autenticação no localStorage
09-18 Preparando para fazer requisições autorizadas
09-19 Enviando header Authorization na requisição autorizada
09-20 Redirecionando programaticamente
09-21 Primeiro teste com interceptors do Axios
09-22 Redirecionando para login quando autorização falha
09-23 Decodificando o token JWT
09-24 Testando se usuário está autenticado
09-25 Entendendo componentes com children ReactReactNode
09-26 Componente PrivateRoute para rotas autorizadas
09-27 Links de login e logout na Navbar
09-28 Estilizando o login e logout
09-29 Gerenciando estado global com Context API
09-30 Redirecionando para a rota pretendida após o login
09-31 Implementando a função hasAnyRoles
09-32 Implementação alternativa com high order functions
09-33 Restrição de conteúdo baseada no perfil do usuário
09-34 Permissionamento em nível de rotas
09-35 Organizando os utilitários
09-36 Desafio para entregar
09-37 Orientações sobre o desafio
TAREFA: MovieFlix front inicial

10 - CRUD, paginação, filtros

10-01 Visão geral do capítulo
10-02 Preparando o projeto
10-03 Rotas do CRUD de produtos
10-04 Começando o layout da listagem de produtos
10-05 Responsividade da barra e dos cards
10-06 Componente CategoryBadge
10-07 Finalizando o layout do ProductCrudCard mobile
10-08 Responsividade do ProductCrudCard na forma horizontal
10-09 Começando o HTML do formulário de produtos
10-10 Estilizando margens e containers do formulário
10-11 Estilizando os botões e mais alguns retoques
10-12 Listando os produtos a partir do back end
10-13 Correção no seed do banco
10-14 Começando a integrar o formulário com React Hook Form
10-15 Salvando um produto (imgUrl e categories hardcode)
10-16 Configurando rotas do CRUD
10-17 Editando produtos
10-18 Função que deleta um produto
10-19 Criando um evento onDelete com padrão de projetos observer
10-20 React Select layout
10-21 Recuperando as categories do back end
10-22 Integrando o Select com o React Hook Form
10-23 Removendo hardcode dos campos imgUrl e categories
10-24 Formatação de número decimal no formulário
10-25 Componente de paginação - primeiro teste
10-26 Pagination layout
10-27 Criando props e evento onChange no componente Pagination
10-28 Finalizando o componente Pagination
10-29 Pequena correção na Navbar do Admin
10-30 Criando um estado específico para os dados dos controles
10-31 Recriando a função getProducts com o hook useCallback
10-32 Criando o componente ProductFiIter
10-33 HTML do ProductFilter
10-34 Layout do input name
10-35 Integrando o React Hook Form
10-36 Layout mobile do ProductFilter
10-37 Responsividade do ProductFilter
10-38 Comportamento intemo do ProductFilter
10-39 Criando o evento onSubmitFilter
10-40 Mostrando mensagem toast com React Toastfy
10-41 Desafio para entregar
TAREFA: MovieFlix front listagem

11 - Testes e implantação

11-01 Visão geral do capítulo
11-02 AVISO - Terminal Linux com WSL
11-03 WSL Instalando WSL e Linux
11-04 WSL Instalando o Node
11-05 WSL Instalando o JDK
11-06 WSL Preparando o projeto no Linux
11-07 WSL Configurando usuário Git
11-08 Recordando a base sobre testes
11-09 Visão geral do JEST e da Testing Library
11-10 Setup do projeto
11-11 Primeiro teste com JEST
11-12 Rodando testes no modo watch
11-13 Block describe e suíte de testes
11-14 Refatoração - reorganizando token e Role
11-15 Primeiro teste com hasAnyRoles
11-16 Mockando função com spyON
11-17 Testando outro cenário de hasAnyRoIes
11-18 Exercício de fixação - teste de funções
11-19 Testando componentes React - visão geral
11-20 Testando Buttonlcon
11-21 Exercício de fixação - teste de renderização
11-22 Testes de ProductPrice e ProductCard
11-23 Demonstração de uso do data-testid
11-24 Primeiro teste com Pagination
11-25 Simulando clique do usuário com userEvent
11-26 Escrevendo outros testes de clique no Pagination
11-27 Começando os testes da página Catalog
11-28 Operações assíncronas com async await e waitFor
11-29 Mock da API com MSW, trabalhando com fixtures
11-30 Entendendo a necessidade do Router
11-31 Começando testes com Form de produtos
11-32 Mock do React Router DOM e useParams
11-33 Entendendo os cenários que vamos testar
11-34 Selecionando os inputs do formulário
11-35 Selecionando o Select no teste por meio do label
11-36 Simulando a digitação nas caixas de texto com userEvent
11-37 Simulando a seleção das categorias com React Select Event
11-38 Simulando clique no botão de enviar o formulário
11-39 Assertion para verificar a exibição do toast
11-40 Assertion para verificar o redirecionamento
11-41 Testando cenário de apenas clicar em submit diretamente
11-42 Testando o cenário de limpar as mensagens de erro
11-43 Testando o update de produto, mock de PUT e GET
11-44 Verificando os valores selecionados no Select
11-45 Implantação com Cl CD no Netlify
11-46 Desafio PARTE 1 - subindo o projeto
11-47 Desafio PARTE 2 - entendendo os testes do Form
11-48 Desafio PARTE 3 - entendendo os testes do List
11-49 Desafio PARTE 4 - resolvendo o primeiro teste
TAREFA: ReacUS TDD

12 - Dashboard

12-01 Visão geral do capítulo
12-02 Preparando o projeto
12-03 Configuração do projeto
12-04 Criando componente Header
12-05 Criando o componente Filtro - Parte 1
12-06 Criando o componente Filtro - Parte 2
12-07 Criando o componente de Vendas Por Data - Parte I
12-08 Criando o componente de Vendas Por Data - Parte 2
12-09 Criando o componente de Vendas Por Data - Parte 3
12-10 Criando o componente de Sumário das Vendas - Parte 1
12-11 Criando o componente de Sumário das Vendas - Parte 2
12-12 Criando o componente de Sumário das Vendas - Parte 3
12-13 Criando o componente do gráfico de pizza
12-14 Criando o componente da tabela de vendas - Parte 1
12-15 Criando o componente da tabela de vendas - Parte 2
12-16 Integrando o componente de vendas por data com o backend - Parte 1
12-17 Integrando o componente de vendas por data com o backend - Parte 2
12-18 Integrando o componente de vendas por data com o backend - Parte 3
12-19 Integrando o filtro com a aplicação
12-20 Formatando a exibição das datas do filtro
12-21 Integrando o filtro com o gráfico de vendas por data
12-22 Integrando o filtro com o sumário de vendas
12-23 Integrando o filtro com os gráficos de pizza
12-24 Integrando o filtro com a tabela de vendas - Parte 1
12-25 Integrando o filtro com a tabela de vendas - Parte 2
12-26 Adicionando o arquivo responsive CSS
12-27 Desafio para entregar
TAREFA: Gráfico e filtro