ReactJS Calculator
For many GUI programming languages, one of the most powerful projects for understanding the behavior of a particular language is the Calculator app. even though it is kind of kid’s work, it might help you to figure out some of the pretty basic and important concepts.
I am as a Java developer, who writes thousands of Java codes, and do not know much about any other languages, the better choice for me is to start up with a Calculator for learning a new technology. And at the same time my goal is to use lots of concepts in that technology to develop the Calculator ( or any other simple project ).
Recently in the web-world, the word ‘ReactJS’ came popular for the front end development while AngularJS is being used wisely. Now, I am not a big fan of front-end development, but had the motivation to learn ReactJS as a supportive front-end framework for Spring Boot back-end java framework.
ENOUGH TALKING!!!
Why ReactJS……….?
As you already know, ReactJS is developed by facebook, and very easier to learn than AngularJS.
Why you should learn ReactJS is only because the strong concept behind that.
ReactJS helps you to independently categorize different parts of your web-page into varies components.
These components can either be class components (where you can maintain your own private states ) or functional components ( where you can maintain hooks as states ).
Everything in React is nothing but a set of components. The main idea you should learn is how you can use those components to develop your own project. For that I am going to present you a simple ReactJS Calculator which will help you to learn about state, props, functional components, class components, event handling, styling and bit of higher order components. These are the most basic and important concepts in react. after you learn these things, make sure to learn how you can use “Route” and “Fetch” commands to create REST applications. And also, in newer version of ReactJS, The main concern is to use hooks than states, So it is better If you can learn those concepts.
LET’S MOVE ONTO THE PROJECT
The goal is to develop the following front-end application, by using all the basic concepts in reactjs as much as possible.
In this project I have used, 5 components including the root which is App component.
As you can see the Calculator contains the display component, number pad, arithmetic operations, and the whole Calculator component which holds the other component.
This is a pretty easy project to try, so why you are waiting for try this now. If you are having any problem then feel free to visit my git hub repository for getting the source code.