Imagem destaque - desenvolvendo calculadora com react parte 2

Desenvolvendo uma calculadora com React Parte 2

Olá pessoal, vamos a mais um post do blog, continuando o artigo Desenvolvendo uma calculadora com React, neste artigo desenvolveremos a segunda parte do projeto calculadora com React, caso você esteja caindo direto neste post, saiba que esse é a segunda parte da série, clique aqui para ver a primeira parte. Se por um acaso queira continuar a partir daqui você pode clonar o código feito na primeira parte pelo github CLIQUE AQUI.

Onde paramos a calculadora com React

Botão sendo renderizado na tela do browser
Figura 1 – calculadora com React

No primeiro artigo, paramos aqui, fizemos a estrutura base da calculadora com React, tamanho, plano de fundo, cor e os botões da calculadora, vamos agora criar todos os botões necessários e estilizá-los com CSS3 para realizar essa tarefa, abra arquivo Button.css, e escreva o seguinte código:

Estamos aplicando bordar, cor de fundo, tamanho de fonte, e estamos usando um recurso pouco utilizado do CSS3, que é criar variáveis de estilos, para fazer uso dessas variáveis, é só usar a função CSS var(). Agora vamos ao arquivo Button.jsx e escreve a seguinte alteração:

Tiramos o “0” e escrevemos essa expressão, pois vamos passar como parâmetro o label do botão na hora que formos criá-lo. Caso tenha dificuldade em props recomendo ver esse >> artigo << Agora vamos criar todos os botões da calculadora com o devido titulo, abra o arquivo Calculator.jsx e escreva o seguinte código:

Resultado no browser de todos os botões criado
Figura 2 – calculadora com React

Observe que os botões foram criados, mas estão desorganizados e sem nenhum alinhamento, para fazermos o alinhamento e deixa com a cara real da calculadora, vamos novamente recorre ao CSS3, então abra o arquivo Calculator.css e escreva o seguinte código:

Para realiza o alinhamento dos botões, estamos usando o CSS Grid, não vou explicar ele, pois tem uma série de artigos ensinando todo o funcionamento do FlexBox, para ver >> clique aqui <<

CSS Grid - botões alinhados
Figura 3 – calculadora com React

Criando a tela da calculadora com React

Vamos criar um terceiro componente que vai representar a tela da calculadora, abra o diretório components, crie dois arquivos, o Led.jsx e Led.css, e escreva o seguinte código no arquivo Led.jsx

Para visualizar o nosso componente Led.jsx vamos abrir o arquivo Calculator.jsx e importar o Led.jsx e renderiza-lo no browser, escrevendo o seguinte código:

led renderizado no browser
Figura 4 – calculadora com React

Vamos ao CSS para aplicar o estilo da nossa calculadora com React, abra o arquivo Calculator.css e escreva o seguinte código:

O único atributo que adicionamos neste arquivo foi 1fr, onde nossa linha irá ocupa todo o espaço disponível da caixa, não vou entrar em detalhes pois temos um artigo explicando cada atributo do CSS Grid clique aqui para acessa o artigo. Agora vamos ao arquivo Led.css e escreva o seguinte código:

Tela criado e estilizada
Figura 5 – calculadora com React

Vamos parar por aqui, esse foi o segundo post da série Desenvolvendo uma calculadora com React, semana que vem vamos iniciar a implementar toda a lógica e fazer a nossa calculadora funcionar com as quatro operações.

Recomendações de Estudos

O curso que vou recomendar é um dos mais bem qualificados da plataforma udemy, o professor é maravilhoso e tem uma didatica incrivel, trata-se do Leonardo Leitão graduado em Engenharia Elétrica pela Universidade Federal do Ceará e Mestre em Informática Aplicada pela Universidade de Fortaleza, na qual trabalhou com Integração de Redes de Sensores sem Fio e Computação em Nuvem.

Curso Web Moderno com JavaScript 2019! COMPLETO + Projetos

Conteúdo do curso

  1. Tudo que você precisa saber para construir aplicações modernas para Web;
  2. Últimos recursos de HTML, CSS, Javascript e vários frameworks;
  3. Aprender CSS 3 e como aplicar estilo usando as últimas tecnologias: CSS Grid, Flexbox e muito mais;
  4. Entendee os paradigmas de programação usados na Web Moderna: Funcional, Orientação a Objeto;
  5. Aplicações Web baseadas em Componentes;
  6. Seja um desenvolvedor Fullstack dominando o frontend e o backend;
  7. Projeto de aplicações reais.

Compre Agora!!

Bem-vindo a melhor maneira de aprender HTML & CSS. Se você quer projetar, construir do zero ou ter mais controle sobre um site existente, este livro lhe ajudará a criar conteúdos atrativos e amigáveis
Compre Agora!