React e TypeScript: desenvolvendo um Dashboard

Name: React e TypeScript: desenvolvendo um Dashboard
Rating: 4.3 (913 reviews)

criando gráficos e um layout responsivo

Created byRodrigo Gonçalves Santana

Last updated 7/2020

Portuguese

Portuguese [Auto],

What you'll learn

TypeScript
React
Styled Components
Criação de Gráficos
Layout Responsivo

Course content

11 sections • 69 lectures • 16h 26m total length

A aplicação que vamos desenvolver4:05
Aquecendo os motores com TypeScript17:41
Recado do projeto0:48

Criando o projeto34:29
Styled Components - Instalação e estilos globais24:22
Criação dos componentes do Layout da nossa aplicação25:36
Criando os temas de cores da aplicação25:13
Criando o header principal17:02
Criando o componente Toggle17:37
Criando o Menu Lateral22:22
Criando o header de conteúdos24:24
Criando o componente de select e deixando o header content dinâmico29:20
Criando a lista de movimentos financeiros23:00
Personalizando a scroll bar e mantendo o aside e o header fixo na rolagem4:43
Refatorando o cartão de movimentos financeiros2:59
Criando os filtros12:30

Criando o content header do dashboard9:24
Criando os cartões de movimentação da carteira39:10
Criando o cartão de status da carteira13:49
Deixando os cartões com informações dinâmicas24:59
Criando o visual do gráfico de pizza32:11
Carregando o gráfico de pizza com dados27:53
Criando o gráfico de linhas para o histórico de saldo50:13
Formatando os valores da legenda do gráfico de histórico de saldos3:21
bate papo sobre a atualização do recharts5:25
Criando os gráficos de barras de entradas e saídas eventuais x recorrentes43:23
Refatorando os gráficos15:15
Melhorando a legenda dos gráficos de barras5:01

Quebras de layout e download da ferramenta Responsively2:50
Instalando e usando o Responsively3:28
Aplicando media queries no componente de layout3:20
Aplicando media queries nos cartões de movimentação da carteira12:57
Aplicando media queries no cartão de mensagem3:59
Aplicando media queries no gráfico de pizza6:48
Aplicando media queries no gráfico de histórico de saldos5:04
Aplicando media queries nos gráficos de barra5:40
Aplicando media queries no menu lateral18:06
Criando o botão toggle para abrir e fechar o menu lateral11:40
Incluindo o toggle de temas no menu lateral para mobiles12:32
Ajustes finais no layout responsivo8:42

Requirements

Programação web básica

Description

Neste curso você irá desenvolver um Dashboard utilizando ReactJs e TypeScript. Você irá desenvolver um layout responsivo com Grid Layout e Flexbox. Nesse projeto, além de aprender a criar gráficos, também irá criar temas de cores e permitir o usuário a trocar o tema (dark e light). E também irá aprender a aplicar animações.

Who this course is for:

Desenvolvedores web
Estudantes de programação

React e TypeScript: desenvolvendo um Dashboard

What you'll learn

Explore related topics

Course content

Introdução3 lectures • 23min

Preparando o seu ambiente de desenvolvimento4 lectures • 46min

Desenvolvimento o layout do dashboard13 lectures • 4hr 24min

Rotas e navegação da aplicação1 lecture • 31min

Desenvolvendo as funcionalidades das listagens de movimentações financeiras8 lectures • 2hr 30min

Desenvolvendo o Dashboard12 lectures • 4hr 30min

Criando o tema dark e light do dashboard4 lectures • 44min

Autenticação no Dashboard5 lectures • 50min

Deixando o layout do nosso dashboard responsivo12 lectures • 1hr 35min

Aplicando animações no Dashboard5 lectures • 9min

Requirements

Description

Who this course is for: