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