Aprenda o novo React com Hooks criando 8 projetos práticos
4.6 (64 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
414 students enrolled

Aprenda o novo React com Hooks criando 8 projetos práticos

Aprenda a criar aplicações web do zero com o novo React usando Hooks, através de 8 projetos práticos e divertidos
Highest Rated
4.6 (64 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
414 students enrolled
Last updated 3/2020
Portuguese
Portuguese [Auto]
Current price: $44.99 Original price: $64.99 Discount: 31% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 24.5 hours on-demand video
  • 1 article
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Criar aplicações do zero ao consumo de APIs com o React
  • Criar 8 projetos práticos, incluindo uma calculadora, um conversor de moedas, CRUD, Dashboard, upload de imagens, e muito mais
  • Criar e executar projetos do zero com o React
  • Entender a arquitetura do novo React usando Hooks
  • Criar componentes dos mais diversos tipos com o React
  • Aprender a criar e validar formulários de dados
  • Aprender a criar formulários avançados com o Formik e Yup
  • Aprender a consumir APIs HTTP externas (criaremos uma em NodeJS com Express durante o curso)
  • Aprender a criar rotas e navegação
  • Aprender a criar testes unitários com o React
  • Aprender a utilizar o Bootstrap com o React
  • Aprender a criar gráficos utilizando a API de gráficos do Google
  • Aprender a fazer upload de arquivos
  • Fazer o deploy em produção de uma aplicação React no Firebase
Course content
Expand all 300 lectures 24:42:05
+ Introdução
4 lectures 23:37
Preparando o ambiente com a instalação do NodeJS
04:35
Baixando o código fonte completo dos projetos
00:29
+ Primeiro projeto - Olá mundo!
9 lectures 41:23
O que é o react-create-app?
03:12
Criando o projeto olá mundo
03:56
Abrindo o projeto no editor Atom
01:15
Entendendo a estrutura do projeto - parte 1/3
03:33
Entendendo a estrutura do projeto - parte 2/3
05:27
Entendendo a estrutura do projeto - parte 3/3
07:03
Exibindo a mensagem na tela
02:29
Executando os testes unitários
02:46
Fazendo o upload do código para o GitHub
11:42
+ Segundo projeto - Calculadora
23 lectures 02:24:58
Criando o projeto
03:42
Instalando o Bootstrap e o React Bootstrap
06:58
Instalando a Testing Library
05:08
Criando o componente principal
10:54
Criando a interface HTML - parte 1/3
06:23
Criando a interface HTML - parte 2/3
08:15
Criando a interface HTML - parte 3/3
06:35
Implementando o campo numérico e entendo o useState - parte 1/2
06:20
Implementando o campo numérico e entendo o useState - parte 2/2
07:30
Implementando o serviço principal da calculadora - parte 1/5
06:10
Implementando o serviço principal da calculadora - parte 2/5
06:39
Implementando o serviço principal da calculadora - parte 3/5
05:56
Implementando o serviço principal da calculadora - parte 4/5
06:10
Implementando o serviço principal da calculadora - parte 5/5
05:15
Implementando a ação de concatenação de números
08:46
Usando o serviço da calculadora no componente principal - parte 1/3
06:56
Usando o serviço da calculadora no componente principal - parte 2/3
08:17
Usando o serviço da calculadora no componente principal - parte 3/3
06:28
Criando os testes unitários - parte 1/4
03:43
Criando os testes unitários - parte 2/4
05:20
Criando os testes unitários - parte 3/4
06:58
Criando os testes unitários - parte 4/4
05:04
+ Terceiro projeto - Conversor de moedas
30 lectures 02:22:50
Conhecendo o Fixer.io
00:58
Conhecendo o Axios
01:33
Conhecendo o Font Awesome
01:51
Criando o projeto
04:41
Criando o componente principal
06:34
Criando o formulário HTML - parte 1/4
05:49
Criando o formulário HTML - parte 2/4
05:40
Criando o formulário HTML - parte 3/4
05:12
Criando o formulário HTML - parte 4/4
03:44
Adicionando o Alert ao HTML
01:57
Criando o HTML da modal
05:13
Criando o componente de listagem de moedas - parte 1/4
04:36
Criando o componente de listagem de moedas - parte 2/4
03:43
Criando o componente de listagem de moedas - parte 3/4
06:48
Criando o componente de listagem de moedas - parte 4/4
04:38
Implementando o formulário de conversão de moedas - parte 1/5
06:20
Implementando o formulário de conversão de moedas - parte 2/5
03:36
Implementando o formulário de conversão de moedas - parte 3/5
04:56
Implementando o formulário de conversão de moedas - parte 4/5
05:24
Implementando o formulário de conversão de moedas - parte 5/5
08:22
Implementando a Modal
06:49
Fazendo a requisição de conversão com o Axios - parte 1/3
05:16
Fazendo a requisição de conversão com o Axios - parte 2/3
07:24
Fazendo a requisição de conversão com o Axios - parte 3/3
03:08
Implementando o tratamento de erros da requisição
06:18
Criando os testes unitários - parte 1/4
04:41
Criando os testes unitários - parte 2/4
06:02
Criando os testes unitários - parte 3/4
06:59
Criando os testes unitários - parte 4/4
02:23
+ Quarto projeto - Gerenciador de tarefas
86 lectures 06:43:04
Criando o projeto e instalando as dependências
04:05
Criando o componente principal
05:46
Configurando as rotas do projeto
07:09
Criando o componente de listagem de tarefas
05:04
Criando o componente de cadastro de tarefas
04:32
Criando o componente de atualização de tarefas
04:18
Definindo as rotas para os componentes
03:04
Criando o botão de redirecionamento para a tela de cadastro de tarefas
05:01
Demonstração do cadastro de tarefas
01:10
Criando o formulário de cadastro de tarefas - parte 1/2
07:44
Criando o formulário de cadastro de tarefas - parte 2/2
02:56
Criando a modal do cadastro de tarefas
03:17
Implementando a ação de cadastro de tarefas - parte 1/2
05:38
Implementando a ação de cadastro de tarefas - parte 2/2
02:58
Implementando a lógica da modal de cadastro de tarefas
03:16
Implementando a ação de cadastro de tarefas
07:41
Visualizando os dados de cadastro de tarefas no navegador
02:43
Criando os testes unitários do cadastro de tarefas
09:17
Demonstração da listagem de tarefas
02:24
Entendendo a composição da tela de listagem de tarefas
04:30
Criando o HTML da listagem de tarefas
08:27
Usando o useState e useEffect na listagem de tarefas - parte 1/2
09:38
Usando o useState e useEffect na listagem de tarefas - parte 2/2
07:10
Criando o componente de itens de listagem de tarefas - parte 1/2
06:28
Criando o componente de itens de listagem de tarefas - parte 2/2
04:12
Criando o HTML do componente de itens de listagem de tarefas - parte 1/2
06:40
Criando o HTML do componente de itens de listagem de tarefas - parte 2/2
08:00
Demonstração da listagem de tarefas com os itens das tarefas
01:56
Criando os testes unitários do componente de itens das tarefas - parte 1/3
06:34
Criando os testes unitários do componente de itens das tarefas - parte 2/3
05:46
Criando os testes unitários do componente de itens das tarefas - parte 3/3
05:24
Demonstração da conclusão de tarefas
00:51
Criando o componente de conclusão de tarefas
04:53
Criando o botão de conclusão de tarefas
06:18
Criando o HTML da modal de conclusão de tarefas
06:50
Implementando a ação de conclusão de tarefa
04:54
Testando a conclusão de tarefas
04:04
Criando os testes unitários da conclusão de tarefas - parte 1/4
05:05
Criando os testes unitários da conclusão de tarefas - parte 2/4
02:28
Criando os testes unitários da conclusão de tarefas - parte 3/4
03:23
Criando os testes unitários da conclusão de tarefas - parte 4/4
04:31
Demonstração da remoção de tarefas
01:00
Criando o componente para remover uma tarefa
03:01
Criando o HTML para remover uma tarefa
03:41
Criando a modal para remover uma tarefa
06:49
Implemento o componente que remove uma tarefa
04:15
Integrando a remoção de tarefas na tela de listagem de tarefas
02:09
Criando os testes unitários para remover tarefas - parte 1/4
03:49
Criando os testes unitários para remover tarefas - parte 2/4
01:49
Criando os testes unitários para remover tarefas - parte 3/4
02:38
Criando os testes unitários para remover tarefas - parte 4/4
03:55
Demonstração da paginação de tarefas
01:01
Criando o componente de paginação
04:25
Implementando o componente de paginação - parte 1/3
07:25
Implementando o componente de paginação - parte 2/3
05:37
Implementando o componente de paginação - parte 3/3
07:08
Integrando a paginação com a listagem de tarefas - parte 1/3
05:20
Integrando a paginação com a listagem de tarefas - parte 2/3
03:46
Integrando a paginação com a listagem de tarefas - parte 3/3
03:56
Criando os testes unitários - parte 1/2
05:03
Criando os testes unitários - parte 2/2
03:05
Demonstração da ordenação de tarefas
01:14
Implementando a ordenação de tarefas - parte 1/2
07:11
Implementando a ordenação de tarefas - parte 2/2
06:35
Adicionando a ordenação na tela de listagem de tarefas - parte 1/3
03:44
Adicionando a ordenação na tela de listagem de tarefas - parte 2/3
05:36
Adicionando a ordenação na tela de listagem de tarefas - parte 3/3
01:35
Criando os testes unitários - parte 1/3
03:54
Criando os testes unitários - parte 2/3
03:57
Criando os testes unitários - parte 3/3
01:30
Criando o HTML do filtro de tarefas
07:31
Implentando o useEffect no filtro de tarefas
05:54
Criando os testes unitários para a filtragem de tarefas - parte 1/3
04:20
Criando os testes unitários para a filtragem de tarefas - parte 2/3
06:59
Criando os testes unitários para a filtragem de tarefas - parte 3/3
04:11
Demonstração da atualização de tarefas
00:58
Criando o HTML de atualização de tarefas - parte 1/2
07:23
Criando o HTML de atualização de tarefas - parte 2/2
04:03
Criando a modal de atualização de tarefas
05:11
Implementando o formulário de atualização de tarefas
05:26
Carregando a tarefa com o uso do useEffect
07:08
Persistindo a tarefa
05:05
Criando os testes unitários da atualização de tarefas - parte 1/3
04:48
Criando os testes unitários da atualização de tarefas - parte 2/3
02:42
Criando os testes unitários da atualização de tarefas - parte 3/3
03:44
+ Quinto projeto - Gerenciador de projetos com API RESTful
42 lectures 03:33:36
Criando a aplicação servidor da API e instalando as dependências
06:14
Implementando o servidor da API
05:23
Importando os recursos a serem utilizados pela API
04:48
Entendendo e criando as URLs da API
02:45
Definindo a listagem de tarefas
08:55
Definindo a listagem de tarefas por ID
03:38
Definindo o cadastro de tarefas
05:49
Definindo a conclusão de tarefas
02:46
Implementando a listagem de tarefas por ID - parte 1/2
06:19
Implementando a listagem de tarefas por ID - parte 2/2
08:56
Implementando a listagem de tarefas - parte 1/4
08:54
Implementando a listagem de tarefas - parte 2/4
04:02
Implementando a listagem de tarefas - parte 3/4
05:23
Implementando a listagem de tarefas - parte 4/4
04:03
Implementando o cadastro de tarefas
07:54
Implementando a atualização de tarefas - parte 1/2
05:36
Implementando a atualização de tarefas - parte 2/2
05:25
Implementando a remoção de tarefas
06:12
Implementando a conclusão de tarefas
06:39
Duplicando o gerenciador de tarefas e instalando o Axios
03:38
Implementando a listagem de tarefas pela API - parte 1/3
05:47
Implementando a listagem de tarefas pela API - parte 2/3
05:21
Implementando a listagem de tarefas pela API - parte 3/3
06:52
Implementando o cadastro de tarefas pela API - parte 1/2
05:46
Implementando o cadastro de tarefas pela API - parte 2/2
07:08
Implementando a atualização de tarefas pela API - parte 1/3
04:19
Implementando a atualização de tarefas pela API - parte 2/3
05:26
Implementando a atualização de tarefas pela API - parte 3/3
05:37
Implementando a remoção de tarefas pela API - parte 1/2
04:01
Implementando a remoção de tarefas pela API - parte 2/2
04:28
Implementando a conclusão de tarefas pela API - parte 1/2
03:27
Implementando a conclusão de tarefas pela API - parte 2/2
04:53
Desabilitando os testes unitários correntes temporariamente
02:42
Criando os testes unitários de listagem de tarefas - parte 1/3
03:41
Criando os testes unitários de listagem de tarefas - parte 2/3
06:59
Criando os testes unitários de listagem de tarefas - parte 3/3
04:53
Criando os testes unitários de cadastro de tarefas
03:46
Criando os testes unitários de atualização de tarefas
05:14
Criando os testes unitários de remoção de tarefas
04:02
Criando os testes unitários de conclusão de tarefas
02:36
Implementando os testes unitários restantes
01:47
+ Sexto projeto - Dashboard
11 lectures 46:30
Criando a aplicação - parte 1/2
06:04
Criando a aplicação - parte 2/2
02:04
Criando o gráfico PieChart
08:02
Criando o gráfico PieChart 3D
03:02
Criando o gráfico PieChart vazado (rosca)
01:46
Criando o gráfico de barras BarChart
04:42
Criando o gráfico linhas LineChart
03:19
Criando o gráfico área AreaChart
03:01
Usando o useEffect para alterar os dados dinamicamente - parte 1/2
05:10
Usando o useEffect para alterar os dados dinamicamente - parte 2/2
05:33
+ Sétimo projeto - Mini ecommerce
79 lectures 06:30:03
Demonstração do Formik
05:17
Implementando a finalização da compra na API - parte 1/2
05:24
Implementando a finalização da compra na API - parte 2/2
03:01
Implementando a listagem de cidades por estado na API - parte 1/2
06:42
Implementando a listagem de cidades por estado na API - parte 2/2
06:03
Criando o projeto React
00:45
Instalando as dependências do projeto
03:38
Configurando o projeto
04:07
Entendendo os componentes a serem criados pata a tela de listagem de produtos
03:36
Entendendo os componentes a serem criados para a tela de checkout
00:56
Criando os componentes do projeto - parte 1/3
05:04
Criando os componentes do projeto - parte 2/3
03:46
Criando os componentes do projeto - parte 3/3
04:24
Implementando a listagem de produtos - parte 1/4
05:25
Implementando a listagem de produtos - parte 2/4
07:46
Implementando a listagem de produtos - parte 3/4
04:35
Implementando a listagem de produtos - parte 4/4
05:14
Exibindo os produtos - parte 1/3
05:11
Exibindo os produtos - parte 2/3
05:41
Exibindo os produtos - parte 3/3
05:08
Adicionando os produtos no carrinho - parte 1/2
06:27
Adicionando os produtos no carrinho - parte 2/2
04:59
Criando os testes unitários - parte 1/2
06:29
Criando os testes unitários - parte 2/2
07:31
Criando os testes unitários da listagem de produtos - parte 1/2
05:27
Criando os testes unitários da listagem de produtos - parte 2/2
05:02
Importando as dependências do menu
03:52
Criando o HTML do menu - parte 1/3
06:03
Criando o HTML do menu - parte 2/3
04:27
Criando o HTML do menu - parte 3/3
03:26
Adicionando o PropTypes e calculando o preço - parte 1/4
05:12
Adicionando o PropTypes e calculando o preço - parte 2/4
04:12
Adicionando o PropTypes e calculando o preço - parte 3/4
04:43
Adicionando o PropTypes e calculando o preço - parte 4/4
02:39
Criando os itens do carrinho no menu - parte 1/3
01:24
Criando os itens do carrinho no menu - parte 2/3
05:46
Criando os itens do carrinho no menu - parte 3/3
05:04
Criando os testes unitários para os itens do carrinho no menu - parte 1/2
04:39
Criando os testes unitários para os itens do carrinho no menu - parte 2/2
06:16
Criando o HTML do formulário de checkout - parte 1/9
04:42
Criando o HTML do formulário de checkout - parte 2/9
07:26
Criando o HTML do formulário de checkout - parte 3/9
04:07
Criando o HTML do formulário de checkout - parte 4/9
05:20
Criando o HTML do formulário de checkout - parte 5/9
05:39
Criando o HTML do formulário de checkout - parte 6/9
03:53
Criando o HTML do formulário de checkout - parte 7/9
06:19
Criando o HTML do formulário de checkout - parte 8/9
04:50
Criando o HTML do formulário de checkout - parte 9/9
05:02
Criando o HTML das modais do formulário.
06:28
Criando o componente de listagem de estados
05:53
Criando os testes unitários da listagem de estados
06:24
Listando as cidades no checkout - parte 1/2
06:15
Listando as cidades no checkout - parte 2/2
06:06
Criando os testes unitários da listagem de cidades no checkout - parte 1/2
04:08
Criando os testes unitários da listagem de cidades no checkout - parte 2/2
04:29
Definindo os PropTypes no checkout
07:01
Adicionando o Formik ao formulário - parte 1/7
04:36
Adicionando o Formik ao formulário - parte 2/7
07:37
Adicionando o Formik ao formulário - parte 3/7
05:43
Adicionando o Formik ao formulário - parte 4/7
04:09
Adicionando o Formik ao formulário - parte 5/7
04:27
Adicionando o Formik ao formulário - parte 6/7
03:46
Adicionando o Formik ao formulário - parte 7/7
05:22
Integrando o Yup com o Formik - parte 1/2
05:21
Integrando o Yup com o Formik - parte 2/2
03:59
Validando o CPF com o Yup
05:35
Formatando o campo de entrada de CPF - parte 1/4
04:34
Formatando o campo de entrada de CPF - parte 2/4
05:06
Formatando o campo de entrada de CPF - parte 3/4
04:32
Formatando o campo de entrada de CPF - parte 4/4
03:51
Formatando o campo de entrada de CEP
05:43
Implementando as janelas modais
03:37
Implementando a finalização da compra no checkout - parte 1/2
04:35
Implementando a finalização da compra no checkout - parte 2/2
05:08
Implementando os testes unitários do checkout - parte 1/4
05:00
Implementando os testes unitários do checkout - parte 2/4
06:48
Implementando os testes unitários do checkout - parte 3/4
04:52
Implementando os testes unitários do checkout - parte 4/4
04:07
+ Oitavo projeto - Upload de imagens
12 lectures 59:24
Implementando o upload de imagens na API - parte 1/3
04:45
Implementando o upload de imagens na API - parte 2/3
07:59
Implementando o upload de imagens na API - parte 3/3
04:57
Criando o projeto React e instalando as dependências
01:12
Confirgurando o projeto
03:46
Criando o HTML do formulário de upload - parte 1/3
05:18
Criando o HTML do formulário de upload - parte 2/3
03:31
Criando o HTML do formulário de upload - parte 3/3
05:47
Implementando a lógica do formulário de upload - parte 1/2
05:02
Implementando a lógica do formulário de upload - parte 2/2
06:19
Implementando a lógica de upload de imagens para a API
08:13
+ Extra - deploy em produção
4 lectures 16:39
Deploy do projeto calculadora no Firebase - parte 1/4
03:50
Deploy do projeto calculadora no Firebase - parte 2/4
04:16
Deploy do projeto calculadora no Firebase - parte 3/4
04:15
Deploy do projeto calculadora no Firebase - parte 4/4
04:18
Requirements
  • Você deve ter noções de programação web (HTML, CSS)
  • Você deve conhecer Javascript básico
Description

Esse curso tem como objetivo principal ensinar a criação de aplicações web com o poderoso framework React na sua última versão, usando Hooks.

Para tornar o aprendizado prático e divertido, você criará 8 projetos ao longo do curso, onde serão ensinados passo a passo na prática, os recursos básicos e intermediários do React!

Ao término do curso, você será capaz de criar aplicações utilizando os principais recursos do React, e dar os primeiros passos na carreira de desenvolvedor web com esse poderoso framework web.

Através do curso, você será capaz de se destacar no mercado de trabalho como um desenvolvedor web que possui conhecimentos em React, que é um framework amplamente utilizado e adotado pelas empresas, e que ainda demanda de muitos profissionais qualificados.

Veja a seguir como esse curso o tornará um profissional diferenciado no mercado de trabalho:

  1. Através do estudo utilizando projetos na prática, você será capaz de criar seus próprios projetos em um curto espaço de tempo.

  2. Aqui serão apresentadas as melhores práticas a serem seguidas, o que significa que você criará aplicações otimizadas e de qualidade.

  3. Com a criação de projetos práticos, você terá uma ampla base de exemplos codificados para utilizar como referência em seus projetos, o que aumentará a sua produtividade.

  4. Através de pequenos projetos, você ficará motivado a concluir o curso rapidamente, o que o ajudará a estar qualificado em um curto espaço de tempo.

O curso é 100% prático, e todas as lições são executadas passo a passo para que não fique nenhuma dúvida.

O curso foi dividido em 8 projetos, com o objetivo de tornar o aprendizado otimizado, divertido, e prático, portanto ele não possui lições teóricas e cansativas.

É um curso para ser realizado do início ao fim, deixando ainda um gostinho de quero mais ao seu término!

Como foi possível perceber, só existem vantagens em atender esse curso, e se você pretende se tornar um profissional diferenciado no mercado de trabalho de desenvolvimento web, esse curso foi feito para você!

O que você está esperando? Comece agora mesmo e bons estudos!

Who this course is for:
  • Esse curso é para desenvolvedores Web/Javascript que pretendem criar aplicações web com o React
  • Desenvolvedores que pretendem entender o React desde o início
  • Desenvolvedores que pretendem aprender ou melhorar seus conhecimentos em React de modo divertido, através da criação de projetos práticos