React Calculator App

Here’s a fun project utilizing react-app basics to create a functional calculator.

Please Check Part 1 for the wireframes and styling used in this project.

If you’d like navigate to my github, clone the repo, and code along with my tutorial.

Click Here for Repo: dieter-rams-react-calc

Okay let’s begin!

Step 1. Calculator Buttons

First we need to understand our application in components. The user has three options for buttons:

• numbers and operators
• Equals
• Clear

The button components will use the following syntax to represent a Button within the calculator.

import React, {Component} from 'react';

class Button extends Component {
    render() {
        return(
            <p className="col-auto">
               <button className="button" 
onClick={()=>this.props.handleClick(this.props.children)}>
                    {this.props.children}
               </button>
            </p>
        )
    }
}

export default Button

Written By: Kevin Mezu

Source: https://dev.to/uzomezu/react-calculator-app-54ha