DEV Community

Cover image for How to Make Calculator in React
Reactjs Guru
Reactjs Guru

Posted on • Originally published at reactjsguru.com

2

How to Make Calculator in React

In this article, we are going to make a calculator in react. It will be similar like an android calculator application where you put your values which remains on screen and shows the result straight away as you put values along with some operation. Its logic should be easy, as we do in most of our programming languages. The only difference is that, we will make an UI like any other calculator have.

So basically this is going to be a beginner-friendly project, so let’s make this project step-by-step.

Pre-requisites to Make Calculator in React

  • Basic knowledge of ReactJS.
  • Basic knowledge of CSS.
  • Basic knowledge of React hooks.
  • Good knowledge of React Components. ##Creating Basic Structure For Calculator Now let’s head to our App.js Component to create the basic structure for our calculator. For that we will go in return statement, here we have added a div for calculator. In this, we have added another div for display to create our display. Here we have added a span for where we will show the result, which will be dynamic, which means it will update as we write something in here. For now, we have added a static value here, nothing else.

Now we have added buttons for operator and some symbols like dot(.) and equal(=) along with delete. After that, we need to put all 9 digits, for that we have added a function named createDigits, in this we have used a loop to add 1-9 digit button and added them to application using push() method. Read More

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →