Imagem de destaque do artigo desenvolvendo uma calculadora com React

Desenvolvendo uma calculadora com React Parte 1

Fala galera, primeiramente quero deseja a todos vocês um feliz 2019, que esse ano seja extraordinário para cada um de vocês, desejo muito sucesso, paz, harmonia e muito sucesso. Vamos ao post dessa semana. Desenvolvendo uma calculadora com React, aqui no blog temos dois artigos relacionados a React, caso você não tenha intimidade com o assunto, recomendo dá uma olhada nesses posts Primeiros passos com React – Conceitos BásicosPrimeiros passos com React – Conhecendo o JSX

Pre-requisitos – calculadora com React

Para a realização desse projeto precisamos preparar nosso ambiente de desenvolvimento, teremos que instalar os seguintes software e pacotes:

  1. NodeJS;
  2. NPM (Gerenciador de pacotes do NodeJS)
  3. IDE (No meu caso vou está usando o Studio Visual Code)
  4. create-react-app

Não vou abordar a instalação desses software e pacotes, pois é muito simples, basta dá um Google que terá vários tutorias ensinado a como instalar, vamos focar no projeto para aprendemos o máximo.

Escopo do Projeto

O projeto trata-se de uma calculadora, onde teremos as quatro operações básica que são:

  1. Somar;
  2. Subtração;
  3. Divisão;
  4. Multiplicação.

Onde também terá um layout simples, pois vamos focar nas funcionalidades do projeto para que possamos aproveitar 100% dos ensinamentos sobre React neste projeto.

Criando o ambiente de desenvolvimento

Vou pressupor que você já instalou todos os software e pacotes necessários, agora vamos criar toda a estrutura base do projeto, com o pacote create-react-app, o create-react-app torna muito simples a criação de um projeto em React, basta criar um diretório onde deseja salvar o projeto, entrar no mesmo via terminal ou (CMD no caso do windows) e escrever o seguinte comando:

Veja o resultado na figura 1:

calculadora com React
Figura 1

Agora precisamos entrar no diretório criado, no caso calculator, então escrevemos no terminal

E para iniciar o projeto escrevemos o comando

Automaticamente o seu navegador padrão será aberto, usando o seguinte endereço localhost:3000 veja o resultado na figura 2

Nota: Não vou está entrando em detalhes sobre como é o funcionamento do create-react-app

calculadora com React
Figura 2

Pronto, nosso projeto calculator está devidamente criado com toda estrutura react necessária para inciamos a escrever o código fonte da nossa aplicação.

Estrutura do projeto calculator – criado pelo create-react-app

calculadora com React
Estrutura do código

Essa é a estrutura base que o create-react-app cria, caso você esteja um pouco perdido com essa estrutura recomendo ver o nosso artigo Primeiros passos com React – Conceitos Básicos Vamos da inicio a nossa codificação.

Iniciando a codificação do projeto calculator

Abrimos o diretório SRC, e vamos criar outro diretório chamado main dentro do main, criamos dois arquivos com o nome Calculator.css e Calculator.jsx. O diretório main será nosso componente principal, e nesse serão chamados outros componentes, como por exemplo Botão, Display formando assim nossa calculadora. Abra o arquivo calculator.jsx e escreva o seguinte código:

Na linha 1 fazemos a importação do React e do Component, pois vamos trabalhar com componente de classe, novamente caso você não saiba o que é componente de classe recomento que leia nosso artigo Primeiros passos com React – Conceitos Básicos Na linha 2 importamos o arquivo Calculator.css, pois quando o react fazer o build esse arquivo será carregado junto com o nosso componente principal, depois criamos nossa class Calculator que extende um Component, e dentro da classe criamos a função render() onde a mesma precisa ter um retorno, onde vamos escrever nosso código usando JSX, note que criamos uma <div> com um atributo className, no JSX o atributo class é chamado de className, veja o porque nesse artigo Primeiros passos com React – Conhecendo o JSX

Agora abra o arquivo Calculator.css e escreva o seguinte código:

Neste arquivo definimos um estilo inicial da nossa calculadora, altura, tamanho, borda, cor do fundo etc. Caso tenha alguma dificuldade com CSS3 temos vários artigos no blog ensinado CSS3, e fique a vontade para perguntar nos comentários. Agora precisamos dizer ao React que o nosso Component principal é o Calcalator e não o App que é o padrão, para isso temos que abrir o arquivo index.js

Comentamos o component App, importamos o nosso componente Calculator e referenciamos ao ReactDom.render() para ele renderizar na tela do browser. Veja o Resultado na figura 3.

calculadora com React
Figura 3

Note que nosso estilo já apareceu, mas vamos deixar nossa calculadora com um estilo mais legal, centralizada etc. Para realizar essas alterações vamos abrir o arquivo index.css, observe que o mesmo já está sendo importado no arquivo index.js e vamos escrever o seguinte código:

Vou está usando o FlexBox para fazer o posicionamento dos elementos, caso você não saiba usar o FlexBox, temos vários artigos a respeito é só clicar aqui para estudar, estamos também aplicando uma altura usando a unidade vh para ocupar 100% do tamanho da janela, justify-content para alinhar ao centro do browser, text-align para os textos que forem escritos serem alinhados ao centro, a cor da fonte e por fim um plano de fundo com um gradiente. Veja na figura 4 como ficou.

calculadora com React
Figura 4

Criando componente sem estado

Vamos criar um diretório dentro do SRC chamado components e dentro do mesmo criar dois arquivos que são Button.jsx e Button.css e escrever o seguinte código no arquivo Button.jsx

Nota: Priorize componente sem estado. Um component sem estado, é mais fácil de se manter, pois os componentes que contém estado, o mesmo são variados e se não controlados bem podem gerar vários bugs, dando muita dor de cabeça a você desenvolvedor, claro que vamos sim escrever esse tipo de componente, o recado é apenas para ti alertar e sempre que possível faça sem estado.

Para usar esse component <Button> vamos até o componente principal que é o Calculator.jsx e importa nosso botão e fazer ele renderizar na tela, escrevendo o seguinte código:

Importamos o component Button e usamos ele dentro da <div>. Veja o resultado na figura 5

calculadora com React
Figura 5

Show de bola galera, nossa calculadora está criando forma, vou parar esse artigo por aqui, pois está ficando muito grande, vou está dividindo em partes e disponibilizando para vocês, estarei também upando o código no github.

Recomendações para estudos

Essa seção do blog é para tentar ajudar ainda mais vocês com dicas de cursos, livros e materias para que vocês consigam se desenvolver mais rápido nas vossas carreiras com desenvolvedor de software.

O curso que vou está recomendando é um dos melhores que já vi na internet, veja eu não ganho nada por fazer esse jaba, mas quando o material é bom tem que ser divulgado mesmo, estou falando do curso Do Zero ao React – projeto prtico para iniciantes com o professor Reginaldo Santos, Full stack application developer, co autor de dois livros publicados nos estados unidos, palestrantes. O curso está sendo disponibilizado pela platarforma Udemy ou seja 100% seguro.

Do Zero ao React – projeto prtico para iniciantes

Projeto Prático com React.js e Firebase (com Rotas, Autenticação, Storage, Banco de dados e Hospedagem do site gratuita)

O que você aprenderá

  • Iremos construir um site para empresas, com área administrativa, login do administrador e que faz upload de imagens;
  • Props e State explicado na prática;
  • Quer entender o que é o React e o que é JSX, este é o lugar certo;
  • Não cobrimos Redux neste curso, para focar bastante no React mesmo.

COMPRA AGORA !

Se você deseja se tornar um desenvolvedor acima da média não pode deixa de ler e estudar o livro Código Limpo do autor Robert C. Martin, esse livro mudou completamente a minha forma de escrever código.

COMPRE AGORA!!