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

4.10 (262 reviews)
Udemy
platform
Português
language
Web Development
category
1,421
students
24.5 hours
content
Mar 2020
last update
$19.99
regular price

What you will 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

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!

Content

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

Screenshots

Aprenda o novo React com Hooks criando 8 projetos práticos - Screenshot_01Aprenda o novo React com Hooks criando 8 projetos práticos - Screenshot_02Aprenda o novo React com Hooks criando 8 projetos práticos - Screenshot_03Aprenda o novo React com Hooks criando 8 projetos práticos - Screenshot_04

Reviews

Daniel
July 11, 2023
Muito bom o curso. Vc tem algumas dificuldades pois o curso não é atual e tecnologia avança rápido mesmo. As dificuldades encarei como um ambiente de trabalho pois assim será no dia-dia, atualizando códigos antigos e defasados e tendo que buscar alternativas e soluções.
Jade
March 3, 2022
Curso excelente, professor muito didático e atencioso. Responde as perguntas de forma rápida e clara. Recomendo.
Marco
January 28, 2022
Não se vê quase nada de React Hooks. Tudo é muito repetitivo e pouco componentizado. Muito recurso obsoleto que faz perder tempo na solução do problema.
João
January 23, 2022
O curso é bom, a didática usada com projetos práticos é maravilhosa! porém, acho que deveria rolar uma atualização no quesito de que algumas propriedades usadas no bootstrap não são mais usadas como: o jumbotron e as classes de alinhamento de texto. E se pudesse, colocar o uso de TypeScript. Em média o curso entrega o que promete, se serve de dica, comprei este curso pq estava com dificuldade em acompanhar o ignite da rocketseat, pra quem não tem prática e sente falta de confiança ao desenvolver com react, recomendo fazer demais!!!
Fernando
November 10, 2021
O curso é bem didático e o professor responde rapidamente às questões, porém já não utiliza as versões mais recentes (como o Bootstrap, que atualmente é 5) e isso atrapalha o processo.
Adão
August 10, 2021
O curso é sobre "Aprenda a criar aplicações web do zero com o React usando Hooks, através de 8 projetos práticos", e foi isso que o instrutor abordou, por isso dou 5 estrelas. Minha recomendação: não compre este curso se o objectivo for aprender realmente o React.
Pedro
August 9, 2021
Ótimo curso! Para quem está aprendendo React JS, este curso possui um conteúdo enriquecedor, por ser um curso totalmente prático. De quebra, você ainda irá aprender um pouco sobre backend e como criar uma API simples. Alguns pacotes instalados no decorrer do curso estão obsoletos, mas nada que atrapalhe a evolução, com uma pequena pesquisa você consegue contornar. Parabéns ao professor!
Alessandra
May 17, 2021
Curso excelente com uma explicação sempre muito assertiva nos pontos que importa pra um novato. Infelizmente, o curso está um pouco desatualizado, onde o react está na versao 16 e o react-bootstrap não possui ainda a versão 5, causando alguns erros de estilizacão
Joao
April 5, 2021
ótima didatica, focou bastante nos teste uma pena nao ter sido no vs code, pois é o que a maioria dos alunos usam hoje em dia, mas isso é um detalhe besta
Kátia
March 27, 2021
Aprender praticando é sempre melhor né, achei muito bom o curso realmente consegue manter a atenção no projeto.
Thiago
February 13, 2021
Cheguei na metade do curso e só tenho a agradecer. A didática é muita boa, o professor responde as dúvidas pontualmente e o aprendizado é progressivo. No começo o ritmo é mais lento, muita coisa você copia, depois, a medida que o curso vai andando você vai fazendo muitas coisas por conta e depois só confere com o que o professor fez. Eu estou assistindo tudo em 2x, pois a fala do professor é muito clara e pausada. A única observação que tenho é que o professor tem cacuete de javeiro e gosta de ponto e vírgula ao final das linhas ;)
Anderson
February 12, 2021
Sem duvida o melhor curso de React que já fiz. Esse curso finalmente me fez entender as funcionalidades do react que a anos não consegui entender. Recomendo.
Francisco
January 14, 2021
Com certeza um curso que valeu a pena. O instrutor não perde tempo com documentação, ministra o curso voltado a projetos. Só acho que a parte de testes um pouco cansativa mas no geral o curso valeu muito a pena.
Igor
December 24, 2020
Foi sensacional, pude agregar muito conhecimento em relação a biblioteca react, Java script e também bootstrap. O Professor passa muito bem o assunto tratado.
Tales
November 10, 2020
Top master, só não digo que superou as espectativas, pq ja fiz um curso do mesmo autor sobre angular, e foi incrível, portanto, já esperava o mesmo nível de qualidade desse curso. Top, podem comprar sem medo.

Charts

Price

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

Rating

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

Enrollment distribution

Aprenda o novo React com Hooks criando 8 projetos práticos - Distribution chart
2838102
udemy ID
2/26/2020
course created date
3/8/2020
course indexed date
Bot
course submited by