Open In App

ReactJS Calculator App ( Structure )

Last Updated : 27 Sep, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

In our previous article, we have talked about a Calculator app we are going to develop and also have seen a glimpse of our final project. In this article, we will get our hands ready to start the development of our first application. We have told this earlier also that every application we will develop in React will be made up of pieces called components. We can see a UI broken down into multiple individual pieces called components and work on them independently and merge them all in a parent component which will be your final UI. So let’s now try to break down the UI of calculator App into smaller pieces. We will get the following elements after breaking the UI into small pieces:

  • Calculator Title: This is the title at the top of our application, “GeeksforGeeks Calculator”.
  • Output Screen: This will be our output screen, where all text will be shown. Like the input that the user will type and the answer calculated from the user input. So, we can again break down this into two smaller pieces as shown below:
    • Question Output: This will be the input given by the user.
    • Answer Output: This will be the result calculated from user input.
  • Buttons: As you have seen in the image of our calculator app, we had used a lot of buttons for the input numbers from ‘0-9’, operators, to clear the screen, for backspace etc.

 

So, the above-shown elements are the smallest elements in which we can break our complete calculator app. So we will create Components for each of these elements. So, as we have seen the structure of our app let’s take the first step towards the developing it. We will do things in this project from the very beginning, i.e. by creating a react app, building individual components etc. Let us now create our app using the create-react-app command. Open your terminal and type the below command:

create-react-app firstapp

Here firstapp, is the name of our react application. You can choose whatever name you want for your application but make sure that the name of your application should be in lowercase letters only. After successful execution of the above command, React will create a directory named ‘firstapp’. This directory will contain all of the files of our application. Below image shows the default files created by React for our application firstapp.

 File Structure

Now, as you can see in the above image that React had created a number of files for us. But we do not actually need all of them. We will create and work with our own files. So, open the src directory and delete all of the files and create two new files with the names ‘index.js’ and ‘index.css’. Also, go to the public directory and delete all pre-written code from the index.html file and add the below code to it. Below is our /public/index.html file: 

html




<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
                        initial-scale=1, shrink-to-fit=no">
    <title>GeeksforGeeks Calculator</title>
  </head>
  <body>
    
    <!-- This is the element where our entire
         app will be rendered -->
    <div id="root"></div>
    
  </body>
</html>


So, we are done setting our App, let us now start creating our Components. As we have discussed above. We will need a total of four components as shown below:

  1. Calculator: This will be the parent component and will represent the entire Calculator application as a whole.
  2. CalculatorTitle: This component will be used to render the title at the top of our application, “GeeksforGeeks Calculator”.
  3. OutputScreen: This Component will be for all of the text shown on the screen.
  4. OutputScreenRow: This component will be for the type of output, i.e. input text and calculated result.
  5. Button: This component will be for all of the buttons that we have in our application.

Let us now create a new folder named components inside our src folder and create five files inside this folder for the components mentioned above. The names of these files will be same as that of component’s name with the first letter as lowercase. Our project directory will look like as shown in the below image after creating all files:

 File Structure

So, we have so far created the basic structure of our Calculator application. But till now we have not written any piece of code or have not designed anything. In our next article, we will start writing codes for our components and will create the design of our Calculator application. ReactJS | Calculator App ( Building UI )



Similar Reads

ReactJS Calculator App (Styling)
Now that we have added functionality to our Calculator app and successfully created a fully functional calculator application using React. But that does not look good despite being fully functional. This is because of the lack of CSS in the code. Let's add CSS to our app to make it look more attractive and beautiful. Remember we had created a file
3 min read
ReactJS Calculator App (Adding Functionality)
Now, we had built the structure of our UI, but we haven't added styles to it either we have added any functionality. So, in this article, we will try to make our Calculator app fully functional. Once our app becomes functional, we will add CSS to style the App. So, let's begin. The very first functionality we will add it for the click event of the
4 min read
ReactJS Calculator App (Building UI)
We created our first app and deleted all those files we did not need, and created some of the files that we will need in the future. Now as we stand in our current situation we have a blank canvas before us where we will have to create our calculator app. We will be creating the project in multiple steps with a component approach and each file code
4 min read
ReactJS | Calculator App ( Introduction )
We have seen so far what React is and what it is capable of. To summarise in brief we got to know what React web apps are, React Components, Props, States, and the lifecycle of a React component. We also created a basic clock application using all of the following. But React is a javascript library to build flexible User Interfaces, and we have not
3 min read
Build a Simple Tip Calculator App with ReactJS
Creating a simple tip calculator app using ReactJS can be good for practicing React state management and components. In this tutorial, we'll create a basic tip calculator app using React.js. The app will allow users to input the bill amount, select a tip percentage and let split the bill, providing them with the calculated tip amount and total bill
4 min read
How to Make a Scientific Calculator Android App using Android Studio?
The calculator is the app that is present on every android device. This app comes pre-installed or we can also install another application from Play Store. It is one of the most used applications for college students for making any calculations. In this article, we will take a look at building a simple scientific calculator app in Android using Kot
13 min read
How to create a CLI based calculator app using Node.js ?
In this article, we are going to learn about passing arguments to the command line using node.js. Approach: We are going to use the process object, process object contains various properties in which we will use the arguments property. This will helps to fetch the arguments passed in the command line and then we will loop through every single eleme
4 min read
Android Jetpack Compose - Build a BMI Calculator App from Scratch
Body Mass Index (BMI) is a widely used measure of body fat based on height and weight. With the rise of health consciousness, BMI calculators have become popular tools to monitor and manage one's weight and health. In this article, we will explore how to develop a BMI Calculator app for Android using Jetpack Compose and Material 3. Jetpack Compose
8 min read
Create a BMI Calculator App using React-Native
In this article, we will create a BMI (Body Mass Index) calculator using React Native. A BMI calculator serves as a valuable and straightforward tool for estimating body fat by considering height and weight measurements.A BMI Calculator App built with React Native allows users to input their age, height, weight, and gender. It computes their Body M
4 min read
Create an Age Calculator App using React-Native
In this article we are going to implement a Age calculator using React Native. An age calculator app in React Native is a simple application that calculates a person's age based on their birth date and the current date. It's a simple utility designed to determine how many years, months, and days have passed since a person was born. Preview of Final
3 min read