Se você está começando a estudar React, provavelmente já ouviu falar em Componentes, Props e no famoso Hook useState. Esses três conceitos estão presentes em praticamente todas as aplicações desenvolvidas com React e representam a base para construir interfaces modernas e reutilizáveis.

O problema é que muitos cursos apresentam esses conceitos de forma isolada, utilizando pequenos exemplos que não mostram como eles trabalham juntos em um projeto real.

Neste artigo vamos construir uma Calculadora de IMC completa utilizando React, desenvolvendo uma aplicação moderna, organizada em componentes reutilizáveis e utilizando Props e useState exatamente como acontece no desenvolvimento profissional.

Ao final da aula você terá um projeto completo que poderá utilizar como base para diversos outros sistemas.

---

O que você vai aprender

Durante o desenvolvimento do projeto serão apresentados diversos conceitos fundamentais do React.

Você aprenderá:

• Como criar um projeto React
• Estrutura básica de uma aplicação React
• Organização de componentes
• Como reutilizar componentes
• Como utilizar Props para comunicação entre componentes
• Como utilizar o Hook useState
• Eventos onChange
• Eventos onSubmit
• Renderização Condicional
• Atualização automática da interface
• Organização de código
• Responsividade
• Boas práticas de desenvolvimento

Esses são conhecimentos utilizados diariamente por desenvolvedores React em aplicações profissionais.

---

O projeto desenvolvido

Durante a aula construiremos uma Calculadora de IMC totalmente funcional.

A aplicação permitirá:

• informar peso;
• informar altura;
• calcular automaticamente o IMC;
• apresentar o resultado;
• indicar a classificação do usuário;
• exibir uma interface moderna e responsiva.

Embora o projeto seja simples, ele demonstra praticamente todo o fluxo de funcionamento de uma aplicação React.

---

Entendendo os Componentes

Um dos maiores diferenciais do React é a utilização de Componentes.

Em vez de escrever toda a interface dentro de um único arquivo, dividimos a aplicação em pequenas partes independentes.

Por exemplo:

• Formulário
• Resultado
• Cabeçalho
• Rodapé
• Menu

Cada componente possui sua própria responsabilidade.

Essa organização facilita a manutenção do código, aumenta a reutilização e torna o projeto muito mais profissional.

No projeto da Calculadora de IMC utilizaremos componentes separados para organizar toda a interface.

---

O papel das Props

Depois de dividir uma aplicação em componentes, surge uma necessidade importante:

Como enviar informações de um componente para outro?

É exatamente nesse momento que utilizamos as Props.

As Props funcionam como parâmetros enviados entre componentes.

No projeto, utilizaremos esse recurso para compartilhar informações e tornar os componentes totalmente reutilizáveis.

Esse conceito está presente em praticamente qualquer aplicação React.

---

Entendendo o Hook useState

Outro conceito essencial é o Hook useState.

Ele permite armazenar informações que podem mudar durante a execução da aplicação.

Por exemplo:

• peso;
• altura;
• resultado do cálculo;
• classificação do IMC.

Sempre que esses dados forem alterados, o React atualizará automaticamente a interface sem que seja necessário manipular o HTML manualmente.

Essa atualização automática é um dos maiores benefícios do React.

---

Como funciona o fluxo da aplicação

Durante o projeto o fluxo acontece da seguinte forma:

1. O usuário informa peso e altura.
2. Os valores são armazenados utilizando useState.
3. Ao clicar em Calcular, o React executa a função responsável pelo cálculo.
4. O resultado é salvo em um novo estado.
5. A interface é atualizada automaticamente.
6. O componente responsável pelo resultado recebe as informações através das Props e exibe a classificação correspondente.

Esse fluxo representa exatamente a forma como aplicações React funcionam.

---

Organização do projeto

Durante a aula também será apresentada uma organização semelhante à utilizada em projetos profissionais.

A estrutura ficará dividida em componentes específicos, facilitando futuras expansões da aplicação.

Essa prática torna o código:

• mais limpo;
• mais organizado;
• mais reutilizável;
• mais fácil de manter.

---

Tecnologias utilizadas

Neste projeto utilizamos:

• React
• JavaScript
• JSX
• Componentes
• Props
• Hook useState
• CSS
• HTML
• Vite

---

Assista à aula completa

🎥 Vídeo editado

📺 Live completa

Se você deseja acompanhar todo o desenvolvimento passo a passo, assista ao vídeo completo no YouTube.

💻 Código-fonte

https://github.com/marcoscaldas/imcReact.git

---

O que você será capaz de desenvolver depois desta aula

Após concluir este projeto, você estará preparado para criar diversas aplicações utilizando a mesma arquitetura apresentada, como:

• Calculadoras
• Sistemas de cadastro
• Formulários
• Dashboards
• Aplicações CRUD
• Sistemas administrativos
• Painéis de controle

Todos esses projetos utilizam exatamente os mesmos conceitos apresentados nesta aula.

---

Conclusão

Aprender React vai muito além de decorar comandos ou copiar exemplos prontos. O verdadeiro aprendizado acontece quando entendemos como Componentes, Props e useState trabalham juntos para construir aplicações reais.

Neste projeto você desenvolveu uma aplicação completa do zero, organizando o código em componentes reutilizáveis, compartilhando informações através das Props e controlando o estado da aplicação com o Hook useState.

Esses conceitos representam a base do desenvolvimento moderno com React e servirão como fundamento para estudos mais avançados, como consumo de APIs, React Router, Context API, autenticação e aplicações Full Stack.

Continue praticando, experimente adicionar novas funcionalidades à calculadora e utilize este projeto como referência para construir aplicações cada vez mais completas. É assim que se desenvolve segurança e experiência no ecossistema React.