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.
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.
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.
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.
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.
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.
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.
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.