Introdução
Roteiro do curso
Como está estruturado o curso
[Javascript] aprendendo lógica de programação
Introdução
Link Github
Instalando as ferramentas necessárias
O que é um CONST e um LET
Como verificar se uma condição é verdadeiro ou falso
Como utilizar o FOR
Como utilizar o WHILE
Como utilizar o DO WHILE
Criando e utilizando um array
Fazendo conversão de String para Número e Número para String
Criando e executando uma função
Teste Gasto de combustível
Corrigindo o Teste: Gasto de combustível
Operadores no javascript
Teste: Seis Números Ímpares
Corrigindo teste: Seis números ímpares
Teste: Múltiplos de 13
Corrigindo teste: Múltiplos de 13
Aprendendo mais sobre String e suas funções
Teste: Contando Caracters (Olimpiada Brasileira de Programação)
Corrigindo Teste: Contando Caracters
Entendendo sobre variáveis primitivas e imutáveis
Aprendendo sobre Switch Case
Aprendendo sobre Try, Catch e Finally
[Javascript], aprendendo sobre funções e objetos
Funções: Como declarar, executar, enviar parâmetros e receber respostas
Escopo léxico
Função de callback
Função Async Await
Função recursiva
Teste: Soma recursiva
Correção: Soma recursiva
Trabalhando com objeto simples
[Javascript] Manipulando Arrays de objetos
Introdução
Trabalhando com o array utilizando .map
Trabalhando com o array utilizando .forEach
Trabalhando com o array utilizando .filter
Trabalhando com o array utilizando .find
Trabalhando com o array utilizando .reduce
Trabalhando com o array utilizando .keys
Trabalhando com o array utilizando .sort
Trabalhando com o array utilizando .some e .every
Trabalhando com o array utilizando .flatMap
[Javascript] Orientação a objetos
Introdução
Link git hub
Criando classe pessoa e entendendo um pouco sobre orientação objeto
Trabalhando com herança
Trabalhando com polimorfismo
Trabalhando com Object.defineProperty e Object.defineProperties
Trabalhando com Get e Set na classe
Trabalhando com Spread
Teste: Criando produtos de um marketplace
Correção: Criando produtos de um marketplace
[HTML5] - Conceitos básicos
Introdução
Estrutura de um arquivo html
Trabalhando com o <Head>
Trabalhando com as tags de texto
Trabalhando com lista ordenada e não ordenada
Trabalhando com tags de estrutura
Trabalhando com tags de Imagem e Multimídia
Trabalhando com tags de formulário
Trabalhando com tags de tabela
Entendendo a montagem de uma página com html
[HTML + CSS] - Incluindo o css nos nossos projetos
Introdução
Incluindo CSS no html utilizando: tag, class, id e inline
Como utilizar margin e unidades de medida no css
Como utilizar o padding e o border
Como utilizar o width e height (com responsividade)
Como trabalhar com as posições dos itens na tela
Como trabalhar com float
[CSS] - Aprendendo sobre Flexbox
Introdução
Aprendendo a utilizar Display Flex e wrap
Aprendendo sobre o Flex-direction
Aprendendo sobre Flex-wrap
Aprendendo sobre flex-flow
Aprendendo sobre o justify-content
Aprendendo sobre Align-items
Aprendendo sobre align-content
HTML + CSS na prática: Montando nossa primeira página web
Inserindo responsividade na página web
[Typescript] - Montando o projeto
Introdução
Criando o projeto typescript
Link Github
Instalando Eslint e Prettier
Instalando o Ts-node
Configurando o tsconfig
[Typescript] - Tipagem básica
Introdução
Tipos básicos do typescript (string, number, boolean e any)
Trabalhando com tipos de Objetos e Arrays
Trabalhando com tipos opcionais
Trabalhando com tipagem em funções
Trabalhando com funções de callback dentro de outra função
Montar projeto React
Criando projeto com Vite
Configurando Eslint e Prettier
Instalando styled-components e Antd
Informações básicas sobre o React
Como funciona o React
Utilizando Google Chrome para ajudar no desenvolvimento
O que são e como utilizar as Props de um componente
Como funciona o useState
Como funciona o useEffects
Como e quando utilizar o useCallback
Como e quando utilizar o useMemo
O que é e como criar um hook customizado
Montando os primeiros componentes globais
Criando um componente
Colocando responsividade na tela de login
Criando input reutilizável
Criando botão reutilizável
Mudança de estados dos componentes
Fazendo comunicação com o backend utilizando axios
Utilizando SVG no nosso projeto
Criação de rotas com o React-router
Criando React hook customizado
Utilizando context e criando um hook para usá-lo
Criando componente de notificação e utilizando useEffects
Criando função para padronizar requisições
Criar lógica de login
Salvando token no localStorage
Redirecionando usuário que já fez login
Inserindo token JWT em todas as requisições
Verificando se o usuário fez login utilizando o loader do React router
Criando tela 404 (Not found)
Criar tela de listagem de produtos
Criando um novo hook para requisições
Buscando lista de produtos no backend
Criando uma tabela com o Antd
Inserindo a coluna de categoria na tabela de produtos
Criando tooltip personalizado para imagem
Criando breadcrumb e tela de inserir produto
Ordenar e buscar dados na tabela de produtos
Criando o formulário de inserir produto
Criando select personalizado e requisição de inserir produto
Finalizando a tela de inserir produto
Criar um input monetário
Criando hook da tela de inserir produto
Criando layout principal após o login
Criação do menu lateral
Criação do header
Utilizar o redirect no loader do React router
Criar menu lateral com layout do Antd
Bloquear commits com warnings do Eslint
Criar seção de categorias
Criar tela de categorias
Criar tabela de categorias com AntD
Criar tela de inclusão de categorias
Finalizar lógicas de inserir categoria
Inserir Redux no projeto
Inserir React Redux no projeto
Removendo o useContext e substituindo pelo Redux
Testes unitários
Configurar Jest + React Testing Library no Vite Typescript
Teste unitário de um botão e um input
Teste unitário do header
Como gerar e utilizar mocks com jest.mock
Testar onChange no React Testing Library
Finalizar os testes unitários da tela de inserir produtos
Testar um hook com a biblioteca react-hooks-testing-library
Testar useEffect no nosso hook
Criar mock para o axios com a lib axios-mock-adapter
Testar funções com o jest
Testar a função auth
Testar a função ConnectionAPI
Continuação do teste unitário da função ConnectionAPI
Criando telas de pedidos e usuários
Criar tela de listagem de pedidos
Criar tabela dos pedidos utilizando AntD
Criar a tela de detalhes do pedido
Passando parametros utilizando o React-router
Inserir loading e tipagem para os detalhes do pedido
Inserir tabela com listagem de produtos do pedido
Inserir máscara para CPF, telefone e CEP
Criar tela de listar usuários
Criar tabela na tela de listar usuários
Converter informações do JWT de base64 para um objeto
Criar tela de inserir administrador
Inserir botão na tabela de produtos para deletar
Inserir novos campos no produto
Inserir botão de editar produto na listagem
Editar produto parte 2
Editar produto parte 3
Inserir modal de confirmar exclusão
Criar função de deletar categoria
Deletar e editar categoria
Criar função de editar categoria
Testes unitários da seção anterior
Teste unitário da função breadcrumb
Teste unitário do componente InputMoney
Teste unitário do componente Select
Teste unitário do loading
Teste unitário do Tooltip
Teste unitário das funções de endereço, telefone e CEP
Mudando configuração de cobertura dos testes unitários