Construindo um Calculador Simples de Formulários em ReactJS (2023)

Introdução

O React é amplamente reconhecido por sua eficiência no manuseio de formulários e na atualização suave do DOM. Essas capacidades oferecem uma excelente oportunidade para os desenvolvedores aprimorarem suas habilidades em React, construindo um simples calculador de formulários. Neste guia, aprenderemos a criar um calculador básico sem a necessidade de bibliotecas externas, utilizando os conceitos fundamentais de React, JavaScript e manipulação do DOM.

Abordagem

Para simplificar, nosso calculador terá apenas uma função: a adição de dois números. Teremos dois campos de formulário, um para receber o número atual e outro, somente leitura, para exibir o resultado. A aplicação será dinâmica, permitindo a realização de várias adições consecutivas. Os botões de adição e limpar simplificarão as operações.

Implementação

Configuração Inicial

Certifique-se de ter o Nodejs e npm instalados (pelo menos a versão 8) juntamente com um editor de código e um navegador web (preferencialmente Chrome ou Firefox). Crie um novo projeto usando o create-react-app:

npx create-react-app react-form-calculator

Limpeza do Template

Remova o logotipo, App.css e todas as importações correspondentes de App.js. Limpe o modelo inicial dentro do componente App. Seu App.js deve ficar assim:

import React from 'react';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

Criando o Formulário

Crie um formulário com dois campos de entrada, um para exibir o resultado e outro para receber a entrada do usuário. Adicione dois botões para realizar as operações de adição e limpar.

import React from 'react';

function App() {
  return (
    <div className="App">
      <div className="app-title">
        <h1>Calculadora Básica</h1>
      </div>
      <form>
        <input type="text" id="result" readOnly />
        <input type="text" id="num" placeholder="insira um número" />
        <button>Add</button>
        <button>Limpar</button>
      </form>
    </div>
  );
}

export default App;

Estado do Formulário da Calculadora

Importe o useState do React para usar variáveis de estado em um componente funcional. A calculadora terá duas variáveis de estado: uma para armazenar o valor atual da soma e outra para controlar a limpeza do formulário.

import React, { useState } from 'react';

function App() {
  const [currentSum, setCurrentSum] = useState(0);
  const [clear, setClear] = useState(false);

  // Restante do código
}

export default App;

Função de Adição

Implemente a função de adição, que será chamada quando o botão "Add" for clicado. Certifique-se de evitar a reinicialização da página e valide a entrada do usuário. Adicione o número atual à soma e limpe o campo de entrada.

function App() {
  // Estado e outras partes do código

  const Add = (e) => {
    e.preventDefault();
    if (clear) setClear(false);
    let currentNum = document.querySelector('#num').value;
    if (currentNum === '') return;
    let sum = currentSum + parseInt(currentNum);
    setCurrentSum(sum);
    document.querySelector('#num').value = '';
  };

  // Restante do código
}

Função de Limpeza

Implemente a função de limpeza, que será acionada pelo botão "Limpar". Resete o formulário e as variáveis de estado.

function App() {
  // Estado e outras partes do código

  const Clear = (e) => {
    e.preventDefault();
    document.querySelector('form').reset();
    setClear(true);
    setCurrentSum(0);
  };

  // Restante do código
}

Efeitos Colaterais e Testes

Utilize o useEffect para garantir que o campo de resultado esteja vazio no início e quando a limpeza for acionada. Execute a aplicação localmente com o comando npm start.

import React, { useState, useEffect } from 'react';

function App() {
  // Estado, funções e outras partes do código

  useEffect(() => {
    document.querySelector('#result').value = '';
  }, []);

  useEffect(() => {
    if (clear) document.querySelector('#result').value = '';
  });

  // Restante do código
}

export default App;

Melhorias na Aplicação

Existem várias maneiras de aprimorar o aplicativo além deste guia.

Atualização da Interface

Utilize qualquer framework CSS para dar um design mais intrigante à aplicação. Inspire-se em aplicativos de calculadora em dispositivos móveis para criar um visual atraente.

Extensão de Recursos

Estenda o aplicativo para realizar outras operações matemáticas básicas, como subtração, multiplicação e divisão. O objeto Math do JavaScript oferece funções matemáticas avançadas.

Validações e Alertas

Aprimore a experiência do usuário com validações e alertas significativos. Forneça feedback sobre processos, erros ou eventos durante o uso do aplicativo.

Utilização de um Componente de Teclado

Transforme o aplicativo em uma verdadeira calculadora, substituindo o campo de entrada por um componente de teclado. Isso elimina a necessidade de validar a entrada como um número inteiro.

Conversão para Aplicativo Web Progressivo

Explore as funcionalidades do React para transformar o aplicativo em um PWA (Progressive Web App), proporcionando uma experiência mais nativa aos usuários móveis.

Decomposição em Componentes

Reorganize a arquitetura do aplicativo, criando componentes reutilizáveis para lidar com o resultado, teclado e botões.

Conclusão

Os formulários, quando transformados em componentes controlados, podem ser utilizados de diversas maneiras. Neste guia, aprendemos a criar uma calculadora básica em React, explorando os fundamentos do desenvolvimento em React e a interação com o DOM. Experimente estas melhorias e enriqueça seu portfólio de desenvolvedor!