Friday, November 15, 2024
Google search engine
HomeLanguagesReactJS Calculator App (Building UI)
LanguagesReact

ReactJS Calculator App (Building UI)

Dominic Rubhabha-Wardslaus
By Dominic Rubhabha-Wardslaus
0
2

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. 

We will be creating the project in multiple steps with a component approach and each file code is given below for you, so let’s start building the project.

  • Create a calculatorTitle.js file for showing the title of the calculator and paste the code given below for this file.

Javascript




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





















    

  • Now create a file outputScreenRow.js for taking input and showing the output of the calculation, code of this file is given below.
    • 







Javascript


















 






 




 



























// outputScreenRow.js File 


import React from "react"; // Import React (Mandatory Step) 


  


// Functional Component. 


// Used to show Question/Answer. 


const OutputScreenRow = () => { 


    return ( 


        <div className="screen-row"> 


            <input type="text" readOnly /> 


        </div> 


    ); 


}; 


export default OutputScreenRow; // Export Output Screen Row












































    

  • Create an outputScreen.js file and import the outputScreenRow.js file. The code of this file is given below.
    • 







Javascript


















 






 




 



























// outputScreen.js File 


import React from "react"; // Import React (Mandatory Step). 


import OutputScreenRow from "./outputScreenRow.js"; // Import Output Screen Row. 


  


// Functional Component. 


// Use to hold two Screen Rows. 


const OutputScreen = () => { 


    return ( 


        <div className="screen"> 


            <OutputScreenRow /> 


            <OutputScreenRow /> 


        </div> 


    ); 


}; 


export default OutputScreen; // Export Output Screen.












































    

  • Create a button.js file and paste the code given below.
    • 







Javascript


















 






 




 



























// button.js File 


import React from "react"; // Import React (Mandatory Step) 


  


// Create our Button component as a functional component. 


const Button = (props) => { 


    return ( 


    <input type="button" value={props.label} /> 


    ); 


}; 


export default Button; // Export our button component












































    

  • Now create a calculator.js file and import calculatorTitle.js, outputScreen.js, and button.js files. The code for this program is below.
    • 







Javascript


















 






 




 



























// calculator.js File 


// 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="neveropen 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 default Calculator; // Export Calculator Component












































    

  • Inside the index.js file import, the calculator.js file and the code for this file is given below.
    • 







Javascript


















 






 




 



























//index.js File 


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"));












































Output: The output of this code will look like the below-given image.








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 )






Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!















Previous article
ReactJS Hooks
Next article
ReactJS Data Binding



Dominic Rubhabha-Wardslaus
Dominic Rubhabha-Wardslaushttp://wardslaus.com
infosec,malicious & dos attacks generator, boot rom exploit philanthropist , wild hacker , game developer,


RELATED ARTICLES











Most Popular
Load more


Recent Comments


	

강서구출장마사지 on How to store XML data into a MySQL database using Python?
	
 

	

금천구출장마사지 on How to store XML data into a MySQL database using Python?
	
 

	

nightwish.southeast.cz on Google says it won’t keep your Pixel during a repair if you’re caught using non-OEM parts
	
 

	

광명출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

광명출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

출장오피 on How to store XML data into a MySQL database using Python?
	
 

	

부천출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

구월동출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

강서구출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

헬로출장 on How to store XML data into a MySQL database using Python?
	
 

	

오산출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

광명출장마사지 on How to store XML data into a MySQL database using Python?
	
 

	

마포출장 on How to store XML data into a MySQL database using Python?
	
 

	

안양출장마사지 on How to store XML data into a MySQL database using Python?
	
 

	

gKTdhA on 5 reasons why I won’t switch away from Google Photos
	
 

	

부천출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

동탄출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

0a1Mq7 on Wander: An add-on for Apple’s Shortcuts app to install the Odyssey jailbreak
	
 

	

서울출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

분당출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

부천출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

출장 오피 on How to store XML data into a MySQL database using Python?
	
 

	

화곡동출장마사지 on How to store XML data into a MySQL database using Python?
	
 

	

Gilda on Wander: An add-on for Apple’s Shortcuts app to install the Odyssey jailbreak
	
 

	

강서구출장마사지 on How to store XML data into a MySQL database using Python?
	
 

	

고양출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

화성출장마사지 on How to store XML data into a MySQL database using Python?
	
 

	

천호동출장마사지 on How to store XML data into a MySQL database using Python?
	
 

	

June P. D. Alvarez on RedSn0w Updated to Fix iBooks DRM Issues
	
 

	

Litha on How to Install Siri on iPad 2
	
 
 
                                    

            

        

        
    
 


    

                

            














EDITOR PICKS





POPULAR POSTS





POPULAR CATEGORY










 







ABOUT US



Newspaper is your news, entertainment, music fashion website. We provide you with the latest breaking news and videos straight from the entertainment industry.



Contact us: hello@geeksforgeeks.org






FOLLOW US











© Lazyr0ar 2022