React.js: Uma Calculadora com Boas Práticas

Criar projetos práticos é uma das formas mais eficazes de consolidar conhecimento técnico — especialmente no universo React, onde a lógica e a organização caminham lado a lado. Neste artigo, compartilho como desenvolvi uma calculadora funcional utilizando React.js, como parte do projeto final da formação da plataforma DIO.me.

Mais do que fazer contas, o desafio foi aplicar boas práticas, escrever código limpo e criar uma interface que fosse intuitiva, responsiva e confiável.

🛠️ Ferramentas e estrutura: a base sólida do projeto

O projeto foi iniciado com o Create React App, que oferece um ambiente de desenvolvimento React pré-configurado, acelerando o início e padronizando o workflow.

Para o design e responsividade, utilizei o Bootstrap 5, uma escolha estratégica para manter o foco na lógica da aplicação, sem abrir mão de uma boa estética visual.

A estrutura de pastas seguiu o padrão profissional:

mathematica
📁 src
 ┣ 📁 components
 ┃ ┗ 📄 Display.js | 📄 Button.js
 ┣ 📁 styles
 ┃ ┗ 📄 App.css
 ┣ 📄 App.js
 ┣ 📄 index.js

Essa separação modular trouxe clareza, reuso de componentes e organização escalável.

🧮 Como a calculadora foi construída (por dentro do código)

A aplicação foi pensada com foco em componentização e estados controlados. A lógica principal ficou no componente App.js, enquanto a interface foi distribuída entre dois componentes principais:

🔳 Display.js

Responsável por mostrar o valor atual e o histórico de operações. Trabalha com props recebidos diretamente do estado principal da aplicação.

🔘 Button.js

Cada botão representa uma função (número, operador ou ação). O evento de clique chama a função handleClick, passando o valor correspondente.

🧠 Lógica central (App.js)

Abaixo, um exemplo simplificado da lógica de clique:

jsx
const handleClick = (valor) => {
if (valor === 'C') {
  setInput('');
  return;
}

if (valor === '=') {
  try {
    const resultado = eval(input); // uso controlado e validado
    setHistorico([...historico, `${input} = ${resultado}`]);
    setInput(String(resultado));
  } catch (e) {
    setInput('Erro');
  }
  return;
}

setInput(input + valor);
};

Além disso, implementei suporte ao teclado físico, utilizando useEffect com o evento de keydown para permitir uma interação mais natural ao usuário.

✅ Boas práticas que apliquei no projeto

• 🧠 Componentização clara: cada parte da interface virou um componente reutilizável e isolado.
• 🔄 Estados controlados com useState: garantindo atualização em tempo real do input e histórico.
• 🧪 Tratamento de erros simples: evitando falhas com entradas inválidas.
• 🧹 Nomes de variáveis em português, exceto termos técnicos padrão (como handleClick), para melhorar a legibilidade.
• 💬 README.md bem estruturado, com descrição, instruções, tecnologias e aprendizados.

🔎 Recursos e funcionalidades da calculadora

• ✚ Subtração, adição, multiplicação e divisão
• 🖥️ Interface responsiva com Bootstrap 5
• ⌨️ Suporte total ao teclado físico
• 📜 Histórico das últimas operações realizadas
• 🚫 Prevenção de erros e respostas adequadas em caso de falhas

Conclusão

Desenvolver essa calculadora com React foi mais do que cumprir um desafio — foi aplicar na prática todos os conceitos de componentização, estado, eventos, estrutura de código e boas práticas que venho estudando com dedicação.

Essa experiência reforçou a importância de construir projetos que não apenas funcionem, mas que sejam claros, escaláveis e pensados para outros devs lerem com facilidade.