ReactJS | Calculator App ( Building UI )

In the previous article, 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.

Before moving on to actually developing something let us first plan the direction we will cover in this article. The article will be covering the development of the basic structure of the calculator before moving on to developing the logic behind.

To start with the Calculator, let us first create the Calculator component by creating a calculator class in the calculator.js after we import the react, we do not need to render anything in this file so we will not import react-dom. We will export the module as default as well. As a member function, we will create a dummy render() function. After the addition, the code will be as below.



filter_none

edit
close

play_arrow

link
brightness_4
code

// Import React (Mandatory Step).
import React from 'react';
  
// Create a Class Component Calculator.
class Calculator extends React.Component {
    render()
    {
        return "GeeksforGeeks Calculator";
    }
}
  
// Export Calculator.
export default Calculator;

chevron_right


Now that we have created the backbone of our Calculator, let us first create the small components first which will make it look a bit closer to being a calculator. Let us start with the Calculator Title component. This component will only display the title that will be passed by its parent using props. So for the sake of simplicity, we will be importing only react, we will be creating a functional component using the thick arrow method and we will finally export the whole module as default. For the title, we will be using a div and pass in the value. The following will be what we code in the calculatorTitle.js.

filter_none

edit
close

play_arrow

link
brightness_4
code

// Import React (Mandatory Step).
import React from 'react';
  
// Create Functional Component.
// Takes title as props.value.
const CalculatorTitle = (props) => {
  return (
    <div className="calculator-title">
      { props.value } 
    </div>
  )
}
  
// Export Calculator Title.
export default CalculatorTitle;

chevron_right


Nextly we will be developing the OutputScreen itself. As we have discussed that we will need two segments of the screen one for each output and input we will require the component screen row.
Now this screen row component is a fairly easy component that will show whatever is passed to it. So for simplicity we will be importing only react, we will be creating a functional component using the thick arrow method and we will finally export the whole module as default. For the screen row, we will be using an input field and make it readOnly so that the user can’t modify the value. The following will be what we code in the outputScreenRow.js file.

filter_none

edit
close

play_arrow

link
brightness_4
code

// Import React (Mandatory Step).
import React from 'react';
  
// Functional Component.
// Used to show Question/Answer.
const OutputScreenRow = () => {
  return (
    <div className="screen-row">
      <input type="text" readOnly/>
    </div>
  )
}
  
// Export Output Screen Row.
export default OutputScreenRow;

chevron_right


So we have created the OutputScreenRow component, now we know that our Screen will be a component itself that will consist of two OutputScreenRows. So we will be importing React and the OutputScreenRow component we just created, we don’t need to render anything in this file thus we will not require react-dom. The OutputScreen itself is just a simple component to be used as the container of the OutputScreeRows thus we will create it as a functional component using the thick arrow method and we will add a render function that will consist of two OutputScreenRow components and finally we will export it as default. After the coding is complete the file outputScreen.js will look like this.

filter_none

edit
close

play_arrow

link
brightness_4
code

// Import React (Mandatory Step).
import React from 'react';
// Import Output Screen Row.
import OutputScreenRow from './outputScreenRow.js';
  
// Functional Component.
// Use to hold two Screen Rows.
const OutputScreen = () => {
  return (
    <div className="screen">
      <OutputScreenRow/>
      <OutputScreenRow/>
    </div>
  )
}
  
// Export Output Screen.
export default OutputScreen;

chevron_right


Now that we have created the screen part what is left is the Keypad. The keypad will be a set of Buttons. Now, this Buttons each will be independent components thus now we require to develop the Button component. Similarly to the other Components, we will only import react, we will again create a functional component using the thick arrow method and will create the render function to return a Button type input with the value as sent from the parent, and finally we will export it as default export. After completion, the contents of file button.js will look like the following.



filter_none

edit
close

play_arrow

link
brightness_4
code

// Import React (Mandatory Step).
import React from 'react';
  
// Create our Button component as a functional component.
const Button = (props) => {
  return (
    <input
      type="button"
      value={props.label}
    />
  );
}
  
// Export our button component.
export default Button;

chevron_right


Now that we have completed developing the smaller components it is expected to assemble and create the app to look more like a calculator. We will move back to the Calculator.js file we created and we will update the render function accordingly. Firstly, We will add the title of the calculator followed by the Screen component. Now we need to set up our keypad. For our Keypad, we will be using rows of Buttons and we will use the className button-row to distinguish each row from the other. Thus we need to import the user-defined components CalculatorTitle, OutputScreen, and Button. Hence after updating, the file calculator.js will look like the following.

filter_none

edit
close

play_arrow

link
brightness_4
code

// Imports.
import React from 'react';
import CalculatorTitle from './calculatorTitle.js';
import OutputScreen from './outputScreen.js';
import Button from './button.js';
  
class Calculator extends React.Component {
    render()
    {
    return (
    <div className="frame">
    <CalculatorTitle value="GeeksforGeeks Calculator"/>
    <div class="mainCalc">
    <OutputScreen/>
    <div className="button-row">
      <Button label={'Clear'}/>
      <Button label={'Delete'}/>
      <Button label={'.'}/>
      <Button label={'/'}/>
    </div>
    <div className="button-row">
      <Button label={'7'}/>
      <Button label={'8'}/>
      <Button label={'9'}/>
      <Button label={'*'}/>
    </div>
    <div className="button-row">
      <Button label={'4'}/>
      <Button label={'5'}/>
      <Button label={'6'}/>
      <Button label={'-'}/>
    </div>
    <div className="button-row">
      <Button label={'1'}/>
      <Button label={'2'}/>
      <Button label={'3'}/>
      <Button label={'+'}/>
    </div>
    <div className="button-row">
      <Button label={'0'}/>
      <Button label={'='}/>
    </div>
    </div>
    </div>
    );
  }
}
  
// Export Calculator Component.
export default Calculator;

chevron_right


So far we have created all the components and stacked them together to create the basic structure. Now we just need to import the calculator in the index.js file and render in there. So we will need to import react and react-dom and we will use the render method of ReactDOM to render the calculator component. The index.js file’s contents are shown below.

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import ReactDOM from 'react-dom';
import Calculator from './components/calculator.js';
  
// Render the Calculator to the Web page.
ReactDOM.render(<Calculator />, document.getElementById('root'));

chevron_right


Following each of the steps, the output that we get is shown in the figure below.

So now we can finally see the output in our browser, but wait this is nothing like what we showed you in the introductory article! Yes, it is nowhere near to be the finished project, it is rather a barebone structure and all it needs is the CSS touch ups that we will provide in one of the upcoming articles, but before that, we have to implement the working logic of this calculator so that at least it works before we transform this rigid design in to some eye-catching masterpiece or at least a decent model.



My Personal Notes arrow_drop_up

FullStack Developer of six websites Verified Freelancer with 19 complete projects and 4.9 rating Modest Lifelong Learner

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.