ReactJS | Calculator App ( Building UI )

08 Oct, 2020
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.
// 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;
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.
// 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;
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.
// 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;
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.
// 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;
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.
// 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;
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.
// 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;
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.
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'));
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 into some eye-catching masterpiece or at least a decent model.
ReactJS | Calculator App ( Adding Functionality )
react-js
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?
Remove elements from a JavaScript Array
REST API (Introduction)
Node.js fs.readFileSync() Method
How to set the default value for an HTML <select> element ?
How to create footer to stay at the bottom of a Web page?