Desenvolvendo uma calculadora com React Parte 4

Vamos a parte 4 da série de artigos desenvolvendo uma calculadora com React, neste vamos começar a parte lógica do projeto, ou seja, fazer a calculadora realizar as quatro operações básicas prometidas no primeiro artigo do projeto que são elas; soma, subtração, multiplicação e divisão.

Nota: Para o entendimento pleno desse projeto é necessário ver os outros trés artigos, o link vai estar logo a baixo, mas caso queira continuar desse post basta clonar o código no github.

Onde Paramos – React

Visual calculadora pronto
Figura 1

O visual da calculadora e a  estrutura de componentes estão prontas. Agora vamos começar a fazer a calculadora funcionar.

Entendendo como a calculadora funciona

Simulando uma operação de soma

Cenário 1 – dois valores ( 10 + 15 )

O usuário digitará 10, esse valor será mostrado na tela da calculadora, logo depois o usuário pressionará o botão + o valor 10 permanece sendo mostrado porém acontecera uma piscada na tela, agora o usuário digitará 15, o número 10 irá se limpado da tela, e o número 15 será mostrado, ou seja, nossa calculadora armazenara o primeiro valor digitado, neste caso o 10 e o segundo valor que é o 15 para quando o usuário pressionar o botão de operação igual ( = ) ela fará a soma do primeiro valor + o segundo valor e mostrar na tela.

Cenário 2 – trés valores (10 + 15 + 20)

Até o usuário digitar o segundo valor acontecerá exatamente igual a explicação do cenário 1, mas como a soma irá prosseguir o usuário pressionara o botão de operação + quando isso acontece a calculara irá fazer a soma do primeiro valor + o segundo valor e mostrará na tela da calculara o resultado, neste caso 25, e o usuário pressionara o botão + para prosseguir o cálculo, quando o mesmo digitar o terceiro número, o valor 25 que estará na tela irá ser limpado, ficando apenas o último valor digitado, é por fim quando o usuário pressionar o botão de igual para finalizar a operação, o resultado dos três números somados vão aparece na tela.

Codificando esse comportamento

Para conseguimos realizar esse comportamento citado nos cenários, vamos precisar criar um estado inicial do nosso objeto, abra o arquivo Calculator.jsx e vamos fazer a seguinte alteração:

No lado de fora da classe na linha 8 até a linh 14, estamos criando uma constante que representará o estado inicial do objeto, esse objeto terá as seguintes propriedades:

  • ledValue: ‘0’ – Essa propriedade será usada para a exibição dos valores na tela da calculadora;
  • clearLed: false – Essa propriedade será para saber se precisará ou não limpar a tela da calculadora;
  • operation: null – Essa propriedade servirá para armazena as optações de +, * etc;
  • values: [0, 0] – Essa propriedade servirá para armazena os valores digitados, precisamos de um array pois cada valor será armazenado de forma individual;
  • current: 0 – Essa propriedade servirá para nós dizer qual valor estar sendo manipulando na operação corrente, se é o valor do índice 0 ou do índice 1.

Estamos criando esse objeto fora da classe porque a função clearMemory() restaurará o objeto para o estado inicial, agora vamos iniciar nosso objeto dentro da classe usando um recurso do ES6 o spread oparator. Para finalizar vamos adicionar o comportamento a função clearMemory() também usando spread oparator, e na linha 43 estamos ligando o valor que até então era estático para a variável state que representa o objeto initialState.

Função addDigit()

Continuando na função addDigit() no arquivo Calculator.jsx escreva o seguinte código:

Precisamos fazer algumas validações dentro da função addDigit(), na linha 2 a 3 estamos fazendo a seguinte validação, se a função recebeu um valor que é um ponto ( . ) E o valor que estar na tela já contém um ponto ( . ) Significa que não podemos adicionar um segundo ponto ( . ) Se essa condição for verdadeira, estamos dizendo para sair da função com o código return.

Na linha 5 temos uma segunda validação, vamos limpar a tela da calculadora em duas situações, a primeira é; quando a tela já estiver com o valor 0, a segundo é quando a variável clearLed for true. Linha 7 temos a nossa terceira validação, a variável currentValue vai depende se a tela da calculadora será limpo ou não, se clearLed for true, o valor será vazio caso contrário estamos capturando o valor que estar em this.state.ledValue. Linha 8 estamos pegando o valor atual que estar na tela mais o valor digitado pelo usuário. Depois dessas validações, vamos de fato alterar o estado do objeto, linha 11 chamo a função setState e passamos o ledValue e o clearLed voltando para o valor false.

Continuando – função addDigit()

Queremos o seguinte comportamento, sempre que for digitado um valor diferente de ponto ( . ), ou seja, for digitado um número, esse dado será armazenado no array values, porém o ledValue é uma string, então antes de armazena no array values, precisamos converte em um dado do tipo float, para realizar essa tarefa vamos escrever o seguinte código:

Estamos fazendo um if, com a seguinte condição, se o valor for diferente de ponto ( . ) significa que é um número entre 0 a 9, na linha 2 estamos armazenado na variável i qual é o índice do array que estamos manipulando, se é o índice 0 ou 1, na linha 3 estamos convertendo o valor que estar sendo capturado da tela da calculadora para um float e armazenando na variável newValue, na linha 4 estamos simplesmente clonando o nosso array, na linha 5 estamos atribuindo o novo valor para o índice do array values, e depois desses tratamentos vamos adicionar o values ao estado do objeto, esse values irá substituir o valor da propriedade values do objeto initialState.

Recapitulando, capturamo o índice do valor que estamos alterando, convertemos para float, esses valores foram clonados a partir de um novo array usando o spread, modificamos o valor atual e por fim substituímos o novo valor no objeto state.

Faça sua doação e ajude ao projeto

O projeto dicas de front-end estar precisando de sua ajuda para manter os custos de hospedagem, você poderá fazer a doação de qualquer valor seja de R$1,00, R$2,00, R$5,00 R$10,00 pela plataforma Padrim e pelo PicPay @alissonsuassuna1.

Recomendação de Curso

Javascript completo 2018. Do iniciante ao mestre

O que você aprenderá

  1. Dominar a linguagem Javascript;
  2. Conhecer as principais novidades no ES6;
  3. Dar os primeiros passos com TypeScript;
  4. Conhecer testes unitários;
  5. Desenvolver diversos códigos em exemplos práticos do mundo real (fuja de exemplos apenas ‘hello wold’);
  6. Iniciar com orientação a objetos em Javascript;
  7. Conhecer o básico sobre o modelo MVC

Esse curso é um dos melhores que já fiz, o professor Daniel Tapias Morales domina muito o conteúdo e te proporciona um enorme apredizado, tenho certeza que esse curso irá te agregar muito.