React Calculator App

Вот забавный проект, использующий основы React-App для создания функционального калькулятора.

Пожалуйста, проверьте часть 1 на предмет каркасов и стиля, используемых в этом проекте.

Если вы хотите перейти к моему GitHub, клонируйте репо и код вместе с моим учебником.

Нажмите здесь для репо: Dieter-Rams-React-Calc

Хорошо, давайте начнем!

Шаг 1. Кнопки калькулятора

Сначала нам нужно понять наше приложение в компонентах. У пользователя есть три варианта кнопок:

• цифры и операторы
• Равно
• чистый

Компоненты кнопки будут использовать следующий синтаксис для представления кнопки в калькуляторе.

import React, {Component} from 'react';

class Button extends Component {
    render() {
        return(
            

               this.props.handleClick(this.props.children)}>
                    {this.props.children}
               
            
        )
    }
}

export default Button

Обратите внимание, как this.props.children Учет для дочернего элемента с экспортируемым компонентом. Таким образом, мы можем просто разместить наш номер или операторы в JSX. Handleclick () Позволяет выполнять функцию Handleclick в экспортируемом компоненте.

После того, как вы импортируете свой документ JSX, должен выглядеть так.

                

                    
                   7
                    8
                   9  
                   /
                
                

                  
                    4
                    5
                    6
                    *
                
                

                   %
                   3
                   2
                   1
                   -
                
                

                    CE
                   0
                   .
                   =
                   +
                
            

Шаг 2. Функциональность – Решение уравнений

В традиционных приложениях калькулятора жесткие условные утверждения используются для выполнения математических функций или использования Math.js используется для вычислений. Это приложение решит уравнения просто с использованием React Hooks и Json объект для вычислений.

Сначала давайте определим наши крючки:

  const [input, setInput] = useState('');
  const [prevNum, setPrevNum] = useState('');
  const [curNum, setCurNum] = useState('');
  const [operator, setOperator] = useState('');

  useEffect(() => {

// Perform computation

  }, [curNum,operator, prevNum])

Большой! Теперь нам нужен способ установить наши штаты и выполнять расчеты, пока VDOM перепродает. Это означает, что нам нужна функция для каждого случая:

• Clickbutton
  • Добавьте номер на вход
• Addzerotoinput
  • setInput только в том случае, если нет нуля
• Добавить
  • Убедитесь, что только один десятичный
• Handleclear
  • Очистите все состояние обратно к инициативу ”
• решать
  • придать ценность
  • Рендерное решение
• Operation_func
  • Установите оператор, Prevnum и инициализируйте вход

Таким образом, со всеми этими ситуациями, мы должны теперь играть в какую -то игру с миксом и матчем. Таким образом, мы можем понять, что нужно для обработки, изменения или вызванного в каждой из функций обратного вызова выше.

Учитывая приведенную выше таблицу, мы видим, как будет реализована каждая функция использования представлена функциями обратного вызова. Внедрение всего, что мы получаем:

  const clickButton = (e) => {
      if(e==="+" || e==='-' ||e=== '/' ||e=== '*'){
        setOperator(e)
        console.log(e);
      } else {

        setInput(input + e);
        console.log(input);
      }  

  }

  const handleClear = () =>{
      setInput('');
      setPrevNum('');
      setCurNum('');
      setOperator('');
  }

  const addZeroToInput = (e)=>{
      if(input!==''){
        setInput(input + e);
        console.log(input);
      }
  }
  const addDecimalToInput = (e)=>{
      if(input.indexOf('.')=== -1){
          setInput(input+e)
          console.log(input);
      }
  }

  const solve = () =>{
     setCurNum(input);
  }
  function operation_Func(e) {
        setPrevNum(input);
        setInput('');
        setOperator(e);
    }

Использовать

Наконец, мы должны откуда -то получить наши решения, но избежать петли рендеринга vdom, которая распространена с React. Лучший способ сделать это было бы Использоватьэффект Крюк.

Как только мы узнаем, что оператор был установлен, нам нужен способ передать Prevnum и Curnum в уравнение. Большинство приложений калькулятора будут использовать, если/иначе для выполнения функций, но мы не большинство разработчиков! Используя объект JSON, мы можем реформировать наш процесс выбора в одну строку кода.

Мы должны получить что -то вроде этого:

  useEffect(() => {
    const math_it_Up = {
        '+': function(x,y){return x + y},
        '-': function(x,y){return x - y},
        '*':function(x,y){return x*y},
        '/':function(x,y){return x/y}
    };
    if(curNum !== ''){
        console.log(curNum);
         if(operator !== ''){
         //let solution = Math.floor(parseFloat(prevNum) + parseFloat(curNum));
         let solution = math_it_Up[operator](parseFloat(prevNum),parseFloat(curNum));
         setInput(solution);
         setOperator('');
         setCurNum('');}

    } 
  }, [curNum,operator, prevNum])

Если хотите, вы можете добавить другие уравнения или операции в функцию MATH_IT_UP. Конечный продукт должен выглядеть примерно так.

Следуйте за мной, чтобы узнать больше о прохождении, советах и более крупных проектах с участием стиля React, Node или CSS. Спасибо!

Оригинал: “https://dev.to/uzomezu/react-calculator-app-54ha”