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

Итак, в основном это будет проект, удобный для начинающих, поэтому давайте сделаем этот проект шаг за шагом.


Предварительные условия для создания калькулятора в React

  • Базовые знания ReactJS.
  • Базовые знания CSS.
  • Базовые знания хуков React.
  • Хорошее знание компонентов React. ##Создание базовой структуры для калькулятора Теперь давайте перейдем к нашему компоненту App.js, чтобы создать базовую структуру для нашего калькулятора. Для этого мы перейдем к оператору return, здесь мы добавили div для калькулятора. В этом мы добавили еще один div для отображения, чтобы создать наше отображение. Здесь мы добавили диапазон, где мы будем показывать результат, который будет динамическим, что означает, что он будет обновляться по мере того, как мы что-то пишем здесь. На данный момент мы добавили сюда статическое значение, больше ничего.

Теперь мы добавили кнопки для оператора и некоторые символы, такие как точка (.) и равно (=) вместе с удалением. После этого нам нужно поместить все 9 цифр, для этого мы добавили функцию с именем createDigits, в этом мы использовали цикл, чтобы добавить кнопку с 1-9 цифрами и добавили их в приложение с помощью метода push (). Читать далее