Introdução
Seja bem vindo e primeiros passos!
Colocando a mão na massa
Preparando o ambiente com a instalação do NodeJS
Baixando o código fonte completo dos projetos
Primeiro projeto - Olá mundo!
O que é o react-create-app?
Criando o projeto olá mundo
Abrindo o projeto no editor Atom
Entendendo a estrutura do projeto - parte 1/3
Entendendo a estrutura do projeto - parte 2/3
Entendendo a estrutura do projeto - parte 3/3
Exibindo a mensagem na tela
Executando os testes unitários
Fazendo o upload do código para o GitHub
Segundo projeto - Calculadora
Demonstração do projeto
Criando o projeto
Instalando o Bootstrap e o React Bootstrap
Instalando a Testing Library
Criando o componente principal
Criando a interface HTML - parte 1/3
Criando a interface HTML - parte 2/3
Criando a interface HTML - parte 3/3
Implementando o campo numérico e entendo o useState - parte 1/2
Implementando o campo numérico e entendo o useState - parte 2/2
Implementando o serviço principal da calculadora - parte 1/5
Implementando o serviço principal da calculadora - parte 2/5
Implementando o serviço principal da calculadora - parte 3/5
Implementando o serviço principal da calculadora - parte 4/5
Implementando o serviço principal da calculadora - parte 5/5
Implementando a ação de concatenação de números
Usando o serviço da calculadora no componente principal - parte 1/3
Usando o serviço da calculadora no componente principal - parte 2/3
Usando o serviço da calculadora no componente principal - parte 3/3
Criando os testes unitários - parte 1/4
Criando os testes unitários - parte 2/4
Criando os testes unitários - parte 3/4
Criando os testes unitários - parte 4/4
Terceiro projeto - Conversor de moedas
Demonstração do projeto
Conhecendo o Fixer.io
Conhecendo o Axios
Conhecendo o Font Awesome
Criando o projeto
Criando o componente principal
Criando o formulário HTML - parte 1/4
Criando o formulário HTML - parte 2/4
Criando o formulário HTML - parte 3/4
Criando o formulário HTML - parte 4/4
Adicionando o Alert ao HTML
Criando o HTML da modal
Criando o componente de listagem de moedas - parte 1/4
Criando o componente de listagem de moedas - parte 2/4
Criando o componente de listagem de moedas - parte 3/4
Criando o componente de listagem de moedas - parte 4/4
Implementando o formulário de conversão de moedas - parte 1/5
Implementando o formulário de conversão de moedas - parte 2/5
Implementando o formulário de conversão de moedas - parte 3/5
Implementando o formulário de conversão de moedas - parte 4/5
Implementando o formulário de conversão de moedas - parte 5/5
Implementando a Modal
Fazendo a requisição de conversão com o Axios - parte 1/3
Fazendo a requisição de conversão com o Axios - parte 2/3
Fazendo a requisição de conversão com o Axios - parte 3/3
Implementando o tratamento de erros da requisição
Criando os testes unitários - parte 1/4
Criando os testes unitários - parte 2/4
Criando os testes unitários - parte 3/4
Criando os testes unitários - parte 4/4
Quarto projeto - Gerenciador de tarefas
Demonstração do projeto
Criando o projeto e instalando as dependências
Criando o componente principal
Configurando as rotas do projeto
Criando o componente de listagem de tarefas
Criando o componente de cadastro de tarefas
Criando o componente de atualização de tarefas
Definindo as rotas para os componentes
Criando o botão de redirecionamento para a tela de cadastro de tarefas
Demonstração do cadastro de tarefas
Criando o formulário de cadastro de tarefas - parte 1/2
Criando o formulário de cadastro de tarefas - parte 2/2
Criando a modal do cadastro de tarefas
Implementando a ação de cadastro de tarefas - parte 1/2
Implementando a ação de cadastro de tarefas - parte 2/2
Implementando a lógica da modal de cadastro de tarefas
Implementando a ação de cadastro de tarefas
Visualizando os dados de cadastro de tarefas no navegador
Criando os testes unitários do cadastro de tarefas
Demonstração da listagem de tarefas
Entendendo a composição da tela de listagem de tarefas
Criando o HTML da listagem de tarefas
Usando o useState e useEffect na listagem de tarefas - parte 1/2
Usando o useState e useEffect na listagem de tarefas - parte 2/2
Criando o componente de itens de listagem de tarefas - parte 1/2
Criando o componente de itens de listagem de tarefas - parte 2/2
Criando o HTML do componente de itens de listagem de tarefas - parte 1/2
Criando o HTML do componente de itens de listagem de tarefas - parte 2/2
Demonstração da listagem de tarefas com os itens das tarefas
Criando os testes unitários do componente de itens das tarefas - parte 1/3
Criando os testes unitários do componente de itens das tarefas - parte 2/3
Criando os testes unitários do componente de itens das tarefas - parte 3/3
Demonstração da conclusão de tarefas
Criando o componente de conclusão de tarefas
Criando o botão de conclusão de tarefas
Criando o HTML da modal de conclusão de tarefas
Implementando a ação de conclusão de tarefa
Testando a conclusão de tarefas
Criando os testes unitários da conclusão de tarefas - parte 1/4
Criando os testes unitários da conclusão de tarefas - parte 2/4
Criando os testes unitários da conclusão de tarefas - parte 3/4
Criando os testes unitários da conclusão de tarefas - parte 4/4
Demonstração da remoção de tarefas
Criando o componente para remover uma tarefa
Criando o HTML para remover uma tarefa
Criando a modal para remover uma tarefa
Implemento o componente que remove uma tarefa
Integrando a remoção de tarefas na tela de listagem de tarefas
Criando os testes unitários para remover tarefas - parte 1/4
Criando os testes unitários para remover tarefas - parte 2/4
Criando os testes unitários para remover tarefas - parte 3/4
Criando os testes unitários para remover tarefas - parte 4/4
Demonstração da paginação de tarefas
Criando o componente de paginação
Implementando o componente de paginação - parte 1/3
Implementando o componente de paginação - parte 2/3
Implementando o componente de paginação - parte 3/3
Integrando a paginação com a listagem de tarefas - parte 1/3
Integrando a paginação com a listagem de tarefas - parte 2/3
Integrando a paginação com a listagem de tarefas - parte 3/3
Criando os testes unitários - parte 1/2
Criando os testes unitários - parte 2/2
Demonstração da ordenação de tarefas
Implementando a ordenação de tarefas - parte 1/2
Implementando a ordenação de tarefas - parte 2/2
Adicionando a ordenação na tela de listagem de tarefas - parte 1/3
Adicionando a ordenação na tela de listagem de tarefas - parte 2/3
Adicionando a ordenação na tela de listagem de tarefas - parte 3/3
Criando os testes unitários - parte 1/3
Criando os testes unitários - parte 2/3
Criando os testes unitários - parte 3/3
Criando o HTML do filtro de tarefas
Implentando o useEffect no filtro de tarefas
Criando os testes unitários para a filtragem de tarefas - parte 1/3
Criando os testes unitários para a filtragem de tarefas - parte 2/3
Criando os testes unitários para a filtragem de tarefas - parte 3/3
Demonstração da atualização de tarefas
Criando o HTML de atualização de tarefas - parte 1/2
Criando o HTML de atualização de tarefas - parte 2/2
Criando a modal de atualização de tarefas
Implementando o formulário de atualização de tarefas
Carregando a tarefa com o uso do useEffect
Persistindo a tarefa
Criando os testes unitários da atualização de tarefas - parte 1/3
Criando os testes unitários da atualização de tarefas - parte 2/3
Criando os testes unitários da atualização de tarefas - parte 3/3
Quinto projeto - Gerenciador de projetos com API RESTful
Entendendo o gerenciador de tarefas com API NodeJS
Criando a aplicação servidor da API e instalando as dependências
Implementando o servidor da API
Importando os recursos a serem utilizados pela API
Entendendo e criando as URLs da API
Definindo a listagem de tarefas
Definindo a listagem de tarefas por ID
Definindo o cadastro de tarefas
Definindo a conclusão de tarefas
Implementando a listagem de tarefas por ID - parte 1/2
Implementando a listagem de tarefas por ID - parte 2/2
Implementando a listagem de tarefas - parte 1/4
Implementando a listagem de tarefas - parte 2/4
Implementando a listagem de tarefas - parte 3/4
Implementando a listagem de tarefas - parte 4/4
Implementando o cadastro de tarefas
Implementando a atualização de tarefas - parte 1/2
Implementando a atualização de tarefas - parte 2/2
Implementando a remoção de tarefas
Implementando a conclusão de tarefas
Duplicando o gerenciador de tarefas e instalando o Axios
Implementando a listagem de tarefas pela API - parte 1/3
Implementando a listagem de tarefas pela API - parte 2/3
Implementando a listagem de tarefas pela API - parte 3/3
Implementando o cadastro de tarefas pela API - parte 1/2
Implementando o cadastro de tarefas pela API - parte 2/2
Implementando a atualização de tarefas pela API - parte 1/3
Implementando a atualização de tarefas pela API - parte 2/3
Implementando a atualização de tarefas pela API - parte 3/3
Implementando a remoção de tarefas pela API - parte 1/2
Implementando a remoção de tarefas pela API - parte 2/2
Implementando a conclusão de tarefas pela API - parte 1/2
Implementando a conclusão de tarefas pela API - parte 2/2
Desabilitando os testes unitários correntes temporariamente
Criando os testes unitários de listagem de tarefas - parte 1/3
Criando os testes unitários de listagem de tarefas - parte 2/3
Criando os testes unitários de listagem de tarefas - parte 3/3
Criando os testes unitários de cadastro de tarefas
Criando os testes unitários de atualização de tarefas
Criando os testes unitários de remoção de tarefas
Criando os testes unitários de conclusão de tarefas
Implementando os testes unitários restantes
Sexto projeto - Dashboard
Demonstração do projeto
Criando a aplicação - parte 1/2
Criando a aplicação - parte 2/2
Criando o gráfico PieChart
Criando o gráfico PieChart 3D
Criando o gráfico PieChart vazado (rosca)
Criando o gráfico de barras BarChart
Criando o gráfico linhas LineChart
Criando o gráfico área AreaChart
Usando o useEffect para alterar os dados dinamicamente - parte 1/2
Usando o useEffect para alterar os dados dinamicamente - parte 2/2
Sétimo projeto - Mini ecommerce
Demonstração do projeto
Demonstração do Formik
Implementando a finalização da compra na API - parte 1/2
Implementando a finalização da compra na API - parte 2/2
Implementando a listagem de cidades por estado na API - parte 1/2
Implementando a listagem de cidades por estado na API - parte 2/2
Criando o projeto React
Instalando as dependências do projeto
Configurando o projeto
Entendendo os componentes a serem criados pata a tela de listagem de produtos
Entendendo os componentes a serem criados para a tela de checkout
Criando os componentes do projeto - parte 1/3
Criando os componentes do projeto - parte 2/3
Criando os componentes do projeto - parte 3/3
Implementando a listagem de produtos - parte 1/4
Implementando a listagem de produtos - parte 2/4
Implementando a listagem de produtos - parte 3/4
Implementando a listagem de produtos - parte 4/4
Exibindo os produtos - parte 1/3
Exibindo os produtos - parte 2/3
Exibindo os produtos - parte 3/3
Adicionando os produtos no carrinho - parte 1/2
Adicionando os produtos no carrinho - parte 2/2
Criando os testes unitários - parte 1/2
Criando os testes unitários - parte 2/2
Criando os testes unitários da listagem de produtos - parte 1/2
Criando os testes unitários da listagem de produtos - parte 2/2
Importando as dependências do menu
Criando o HTML do menu - parte 1/3
Criando o HTML do menu - parte 2/3
Criando o HTML do menu - parte 3/3
Adicionando o PropTypes e calculando o preço - parte 1/4
Adicionando o PropTypes e calculando o preço - parte 2/4
Adicionando o PropTypes e calculando o preço - parte 3/4
Adicionando o PropTypes e calculando o preço - parte 4/4
Criando os itens do carrinho no menu - parte 1/3
Criando os itens do carrinho no menu - parte 2/3
Criando os itens do carrinho no menu - parte 3/3
Criando os testes unitários para os itens do carrinho no menu - parte 1/2
Criando os testes unitários para os itens do carrinho no menu - parte 2/2
Criando o HTML do formulário de checkout - parte 1/9
Criando o HTML do formulário de checkout - parte 2/9
Criando o HTML do formulário de checkout - parte 3/9
Criando o HTML do formulário de checkout - parte 4/9
Criando o HTML do formulário de checkout - parte 5/9
Criando o HTML do formulário de checkout - parte 6/9
Criando o HTML do formulário de checkout - parte 7/9
Criando o HTML do formulário de checkout - parte 8/9
Criando o HTML do formulário de checkout - parte 9/9
Criando o HTML das modais do formulário.
Criando o componente de listagem de estados
Criando os testes unitários da listagem de estados
Listando as cidades no checkout - parte 1/2
Listando as cidades no checkout - parte 2/2
Criando os testes unitários da listagem de cidades no checkout - parte 1/2
Criando os testes unitários da listagem de cidades no checkout - parte 2/2
Definindo os PropTypes no checkout
Adicionando o Formik ao formulário - parte 1/7
Adicionando o Formik ao formulário - parte 2/7
Adicionando o Formik ao formulário - parte 3/7
Adicionando o Formik ao formulário - parte 4/7
Adicionando o Formik ao formulário - parte 5/7
Adicionando o Formik ao formulário - parte 6/7
Adicionando o Formik ao formulário - parte 7/7
Integrando o Yup com o Formik - parte 1/2
Integrando o Yup com o Formik - parte 2/2
Validando o CPF com o Yup
Formatando o campo de entrada de CPF - parte 1/4
Formatando o campo de entrada de CPF - parte 2/4
Formatando o campo de entrada de CPF - parte 3/4
Formatando o campo de entrada de CPF - parte 4/4
Formatando o campo de entrada de CEP
Implementando as janelas modais
Implementando a finalização da compra no checkout - parte 1/2
Implementando a finalização da compra no checkout - parte 2/2
Implementando os testes unitários do checkout - parte 1/4
Implementando os testes unitários do checkout - parte 2/4
Implementando os testes unitários do checkout - parte 3/4
Implementando os testes unitários do checkout - parte 4/4
Oitavo projeto - Upload de imagens
Demonstração do projeto
Implementando o upload de imagens na API - parte 1/3
Implementando o upload de imagens na API - parte 2/3
Implementando o upload de imagens na API - parte 3/3
Criando o projeto React e instalando as dependências
Confirgurando o projeto
Criando o HTML do formulário de upload - parte 1/3
Criando o HTML do formulário de upload - parte 2/3
Criando o HTML do formulário de upload - parte 3/3
Implementando a lógica do formulário de upload - parte 1/2
Implementando a lógica do formulário de upload - parte 2/2
Implementando a lógica de upload de imagens para a API
Extra - deploy em produção
Deploy do projeto calculadora no Firebase - parte 1/4
Deploy do projeto calculadora no Firebase - parte 2/4
Deploy do projeto calculadora no Firebase - parte 3/4
Deploy do projeto calculadora no Firebase - parte 4/4