How to build a basic form calculator in ReactJs

Expected result

We can see what to expect after creating our application below for a better idea of the task.

Step-by-step method

We will follow the following step-by-step guide to create a simple calculator application that performs basic operations like addition, subtraction, multiplication, and division.

Step 1: Creating a new React App

If we don’t have a basic React App already on our systems, we can create one using the following commands in the terminal, one after the other.

Note: We can write a directory name of our choice in place of the <name-of-directory> tag in the commands above.

Step 2: Setting up the App.js

In the App.js is a JavaScript file with the application's main component, and it defines the structure and functionality of the calculator component. The app will run the application upon execution. 

Step 3: Adding styling to the app.

style.css is a Cascading Style Sheets (CSS) file used to define the visual appearance of the calculator component, such as setting colors, sizes, borders, and other styles for different elements.

Complete code

You can find the code to our simple React calculator app below:

Code explanation

• Line 1: In this line, we import the useState hook from React.

The React object creates and manages components in the code, while the useState function allows you to add state to functional components.

• Line 3: In this line, we declare a state variable named value and a function named setValue to update the state. The useState initializes the state with an empty string as the initial value.

• Line 6: Next, we represent a JSXJSX stands for JavaScript XML. JSX allows us to write HTML in React. element representing a <div> element with the class name "container". It serves as the outermost container for the calculator.

• Line 7: Similarly, in this line, we show a JSX element representing an <div> element with the class name "calculator". It contains the entire calculator component.

• Line 8: Here, we represent the JSX element <form> , which wraps all the input buttons within the calculator.

• Line 9: In this line, we show a JSX element representing a <div> element with the class name display. It has an input field where the calculator's value is displayed.

• Line 10: We represent an <input> element with the type attribute set to "text". It displays the current value of the calculator stored in the value state variable.

• Line 13: Here, we represent an <input> element with the type attribute set to "button". It displays the "AC" text and clears the calculator's value when clicked. The onClick event handler calls the setValue function with an empty string as the argument.

• Line 14: In this line, we display the "DE" text and remove the last character from the calculator's value when clicked. The onClick event handler calls the setValue function with the updated value.

• Line 15: In this line, we display a decimal point and append it to the calculator's value when clicked.

• Line 16: Moving on, we display a division symbol and append it to the calculator's value when clicked.

• Line 19: Likewise, in this line, we display the number 7 and append it to the calculator's value when clicked.

• Line 20–38: Similarly, the remaining input elements follow the same pattern to handle different buttons (e.g., numbers, operators, etc.), adding their respective values to the calculator's current value when clicked.

• Line 39: In this line, we mainly display an equal sign (=) and evaluate the current value of the calculator using the eval() function when clicked. The result is then set as the new value using the setValue function.

• Line 40–45: Finally, we use the closing tags </form>, </div>, and </div> to close the respective elements.

• Line 47: Lastly, we export the App component as the default export, allowing it to be imported and used in other application parts.

Conclusion

ReactJs has become an essential tool for front-end developers to create small projects like a simple calculator with basic operations or large-scale applications like websites. It is a versatile framework that allows projects like our calculator app to be more interactive and adaptive.