Desenvolvendo uma calculadora com React Parte 3

E aí galera, vamos a mais um artigo, dando continuação a série desenvolvendo uma calculadora com React, caso você seja novo aqui, saiba que esse artigo é a terceira parte do desenvolvimento do projeto calculadora com React, clique aqui para acessar a parte 1 e a parte 2 do projeto, foi criado também um repositório no github caso queira continuar o desenvolvimento de onde paramos, basta clonar o código do projeto clique aqui.

Onde paramos? – calculadora com React

Tela criado e estilizada
Figura 1

Observe na figura 1 que nossa calculadora estar com os botões desalinhados e sem nenhuma organização, os botões de operações estão misturados com os botões numéricos e etc. Para realizar essa organização visual, vamos estilizar com CSS, abra o arquivo Button.css e adicione o sequinte código:

O código button:active estar aplicando uma cor de fundo diferenciada para quando o botão for pressionado pelo usuário, criamos também trés classes CSS, double, triple e operation. A classe double aplicar um span de 2, ou seja, o botão que tiver essa classe ocupara 2 colunas, e a mesma coisa para a classe triple que ocupará trés colunas no layout da calculadora, e a classe operation onde aplicamos uma cor de fundo e uma cor para o texto, ou seja, quando o botão representar uma operação terá uma cor de fundo e a cor do texto distinta dos demais botões, e active é quando estiver ativo terá também uma cor diferenciada.

Atribuições de classes dinâmicas

No atributo className estamos usando uma expressão JavaScript onde delimitamos com crase, ou seja, estamos usando um recurso do JS chamado template string, feito isso, podemos compor nossas classes CSS conforme a necessidade, então vamos deixar a classe padrão que é a classe button. Agora vamos desenvolver a lógica das outras classes que serão atribuídas conforme é passado o atributo. Aqui fazemos uso do operador ternário do JavaScript, onde se a propriedade operation for passada será aplicado a classe ‘operation’ senão receberá uma string vazia, e assim acontece para as demais classes. Recapitulando, só aplicamos a classe de acordo com as propriedades que recebemos do button.

Adicionando eventos nos botões

O comportamento inicial que queremos fazer é a seguinte, quando o usuário clicar em qualquer botão o valor dele seja retornado para nós, ou seja, quando clicar no + retornar o +, quando clicar no / retornar o / certo? Então vamos adicionar esse comportamento, abra novamente o arquivo Button.jsx

Vamos usar o evento onClick onde o mesmo disparará uma arrow function, onde vai receber o props.click(), ou seja, esperamos receber na propriedade do botão uma atributo chamado click onde a mesma será uma função que será invocada, e essa função click em vez de receber o evento, recebera o props.label, ou seja, o próprio conteúdo, temos também que garantir se o botão terá o atributo click, então fazemos uma verificação usando o operador lógico &&.

Aplicando alterações no componente main

Vamos agora fazer as alterações necessárias no componente principal do projeto que é Calculator.jsx, aqui vamos criar trés funções, a primeira função será para zerar a calculadora, segunda será para adicionar um digito e por último a função que será responsável pelas operações da calculadora, somar, subtrair, multiplicar e dividir. Para iniciamos a codifica abra o arquivo Calculator.jsx e escreva o seguinte código:

Testando as funções criadas
Figura 2

Por enquanto as funções só tem um console.log() para nossos testes. Agora vamos fazer uso das funções criadas, no método render() criamos duas variareis que recebem duas arrow function cada, estamos usando o recurso das arrow funtion para o nosso this não vária, caso você tenha dúvidas nesse recurso implementado no ES6, temos um post especifico falando sobre arrow function clique aqui para ler. Agora vamos atrelar as funções em nossos botões, como a função clearMemory() será usada por um único botão não faz muito sentido criar uma arrow function apenas pra ele, então resolvi invocar diretamente, as demais invoquei apenas pelo nome da variável, observe no console do browser que as funções estão funcionando nos botões AC, / e 7 pois foram esses que atrelamos as funções.

Melhorando o código – cleancode

Note que esse código está um pouco feio, podemos melhorar ele usando outro recurso implementado no JavaScript ES6, fazendo uso do construtor da classe, então vamos voltar ao arquivo e fazer as seguintes alterações:

Deletamos as variareis que recebiam as arrow function e criamos um construtor de classe onde passamos os props que são os parâmetros e criamos as variareis de classe, usando a função bind e passando o this como parâmetro, em outras palavras estamos dizendo para cada uma das funções que o this vai ser referente ao contexto delas. No blog ainda não temos artigos falando sobre as classes no JavaScript, vou ficar devendo esse artigo, mas vou deixar links da documentação explicando a função bind() e as classes para vocês.

Para saber mais sobre bind() clique aqui

Para saber mais sobre classes clique aqui

Aplicando o alinhamento dos botões

No início do artigo fizemos uma estilização no componente Button, vamos aplicar esse comportamento e ver o resultado visualmente, para fazer basta passar como parâmetro no componente Button o nome da classe que queremos usar, no caso dessa calculadora o botão AC vai ocupar trés colunas e o botão zero duas colunas e os que representa as operações com a classe operation, o código ficará assim:

Visual calculadora pronto
Figura 3

O visual da calculadora estar finalizado, vamos parar o artigo por aqui, no próximo artigo iniciaremos a parte lógica do projeto, vamos fazer funcionar as operações básicas como, somar, subtração, multiplicação e divisão, então te espero na parte 5 do artigo até lá.

Faça sua doação

O projeto dicas de front-end estar precisando de você para manter os custos de hospedagem, até esse momento todos os custos envolvidos para manter esse projeto vivo estavam saindo do meu próprio bolso, desenvolvo esse projeto com muito amor e carinho, vou dar meu melhor para mantê-lo vivo. Você que gosta do blog e puderem e querem ajudar o projeto a se manter vivo, você pode doar qualquer quantia, R$1,00 R$2,00 R$5,00 R$10,00 pela plataforma Padrim.

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.