Tutorial
Calculadora de IMC com React
Nível
16 aulas
1h23
Assistir agora
1. Introdução e Apresentação do Projeto
Sobre o Tutorial
Esse tutorial mostra o passo-a-passo para resolver o Mini Projeto Calculadora de IMC com React.
Descrição do projeto
Nada melhor do que manter a saúde em dia, não é? Sendo o IMC uma medida internacional usada para calcular se uma pessoa está no peso ideal, a nossa calculadora de Índice de Massa Corporal (IMC) é perfeita para isso.
🔨 Requisitos
- Desenvolva a aplicação utilizando Vite + React;
- Sua calculadora deve possuir:
- Input para informar o peso em kg;
- Input para informar a altura em cm;
- Botão para realizar o cálculo;
- Como resultado, mostre uma tabela com as principais informações: peso, altura, IMC e resultado (como exemplo, para o IMC de 22.04, o resultado é Peso Normal);
- Os campos devem ser resetados e desabilitados após o cálculo, e o botão deve mudar de "Calcular" para "Refazer";
- Ao clicar em "Refazer", a tabela deve desaparecer e os campos devem ser novamente habilitados.
🔍 Dicas
- Procure entender como lidar com números flutuantes;
- É muito importante saber a convenção para separação de números decimais em JavaScript;
- Dê uma olhada na API
Intl
do JavaScript, ela poderá te ajudar; - Utilize condicionais para os resultados caso julgue necessário!
🎨 Design Sugerido
Temos uma sugestão de design no Figma. Entretanto, fique à vontade para montar a aplicação conforme a sua criatividade.
Figma
👉🏽 Sobre esse mini-projeto
O que você irá praticar:
Vite
- Setup de um projeto React com Vite
- Estrutura básica de um projeto React
React e JS
- Estado e Eventos com React
- Formulários controlados com React
- Números flutuantes com JavaScript
TailwindCSS
- Prática com o Framework
Seu Instrutor
Aulas
- Introdução
- 1.
Introdução e Apresentação do Projeto
02:44 - 2.
Iniciando o projeto com Vite e TailwindCSS
04:14 - Estrutura e Estilização
- 3.
A Estrutura do HTML
05:34 - 4.
Estilizando com TailwindCSS
12:00 - 5.
Componentizando o Label
07:48 - 6.
Componentizando o Button e o Input
05:09 - 7.
Usando o tailwind-merge e o clsx
06:36 - Lógica da Calculadora no React
- 8.
Estruturando a lógica da calculadora
05:23 - 9.
Usando um formulário não controlado
02:43 - 10.
Criando validações e transformando strings
07:20 - 11.
Calculando o IMC e adicionando ao estado
06:02 - 12.
Renderizando condicionalmente o resultado
03:24 - 13.
Formatando os números com a Intl API
05:46 - 14.
Limpando o formulário
05:04 - Finalizando
- 15.
Responsividade
02:58 - 16.
Finalização
00:32