Olá galera dev!

Hoje, trago uma atualização incrível sobre o desafio de projeto que finalizei como parte do bootcamp da XP Inc. - Full Stack Developer aqui da DIO.

O desafio consistia em desenvolver uma calculadora simples utilizando React e foi uma experiência de aprendizado valiosa, me ensinando como é pratico e simples cirar um projeto em React e usar a linguagem JavaScript para manipular as estruturas de decisão no código, o que é apresentando no nosso HTML e até mesmo as estilizaçõa do css. Tudo feito dentro de arquivos JavaScript!

Descrição do Projeto

Este projeto é uma calculadora básica, desenvolvida com componentes funcionais e utilizando o hook useState para gerenciamento de estado. Ela realiza operações de adição, subtração, multiplicação e divisão, além de suportar números decimais e oferecer uma interface limpa e moderna.

Funcionalidades

• Operações básicas: Adição, subtração, multiplicação e divisão.
• Suporte a decimais: Permite cálculos com números fracionados.
• Limpeza de visor: O botão “C” reseta os dados da calculadora.
• Interface responsiva: Adaptável a diversos tamanhos de tela.
• Animações: Ao clicar no botão de igual, há um feedback visual sutil.

Tecnologias Utilizadas

• React: Para construção da interface e lógica do projeto.
• Styled-components: Para estilização de componentes de forma dinâmica e elegante.
• JavaScript (ES6+): Implementação da lógica da calculadora.
• HTML5 e CSS3: Estruturação e estilo da aplicação.

Melhorias Implementadas

Durante o desenvolvimento, implementei algumas melhorias para deixar o projeto mais funcional e atrativo:

• Alteração do esquema de cores para um tema mais moderno.
• Adicionei uma borda arredondada ao container da calculadora.
• Desenvolvi as funcionalidades de multiplicação e divisão.
• Configurei o botão de ponto decimal para evitar múltiplos pontos por número.
• Adicionei um título na interface da calculadora.

Como Testar o Projeto

Se quiser testar a calculadora, siga os passos abaixo:

• Clone o repositório:

bash
Copiar código
git clone https://github.com/seu-usuario/calculadora-react.git

• Acesse o diretório do projeto:

bash
Copiar código
cd calculadora-react

• Instale as dependências:

Copiar código
npm install

• Inicie o servidor de desenvolvimento:

sql
Copiar código
npm start

• Acesse no navegador:

arduino
Copiar código
http://localhost:3000

Conclusão

Esse projeto me ajudou a aprender e ampliar conceitos fundamentais de React, além de me dar mais confiança no uso de styled-components e na criação de uma interface interativa. Se você tem sugestões de melhorias ou quer contribuir, fique à vontade para enviar um pull request no GitHub.

Foi uma ótima experiência e mal posso esperar para continuar explorando mais sobre React, nos demais módulos do BootCamp!

"Vamos Disseminar os Conhecimentos e Transbordar Tudo o que Conhecemos!"

Segue o link deste projeto no meu GitHub: https://github.com/Carlos-CGS/ProjetosHtmlCssJavaScript/tree/main/Calculadora_React_Dio

Segue no LinkedIn: https://www.linkedin.com/in/carlos-cgs/