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.
