Building a ReactJS Calculator App for #100daysofcode

In this tutorial, we will create a simple calculator app using ReactJS. ReactJS is a popular JavaScript library for building user interfaces. We will use HTML, CSS, and JavaScript to create a calculator app that can perform basic arithmetic operations.

Step 1: Setup Your Environment
First, you need to have Node.js installed on your computer. You can download it from the official website (https://nodejs.org/). Once you have Node.js installed, you can create a new React app by running the following command in your terminal:

npx create-react-app calculator-app

This will create a new React app called calculator-app in your current directory. Navigate to the newly created directory by running:

cd calculator-app

Step 2: Create the Calculator Component

Next, we will create a new component called Calculator in the src directory of your project. Inside the src directory, create a new file called Calculator.js and add the following code:

import React, { Component } from 'react';

class Calculator extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
    };
  }

  handleClick = val => {
    this.setState({ value: this.state.value + val });
  };

  clear = () => {
    this.setState({ value: "" });
  };

  calculate = () => {
    try {
      this.setState({ value: eval(this.state.value) });
    } catch (e) {
      this.setState({ value: "error" });
    }
  };

  render() {
    return (
      <div>
        <input type="text" value={this.state.value} readOnly />
        <br />
        <button onClick={() => this.handleClick("1")}>1</button>
        <button onClick={() => this.handleClick("2")}>2</button>
        <button onClick={() => this.handleClick("3")}>3</button>
        <button onClick={() => this.handleClick("+")}>+</button>
        <br />
        <button onClick={() => this.handleClick("4")}>4</button>
        <button onClick={() => this.handleClick("5")}>5</button>
        <button onClick={() => this.handleClick("6")}>6</button>
        <button onClick={() => this.handleClick("-")}>-</button>
        <br />
        <button onClick={() => this.handleClick("7")}>7</button>
        <button onClick={() => this.handleClick("8")}>8</button>
        <button onClick={() => this.handleClick("9")}>9</button>
        <button onClick={() => this.handleClick("*")}>*</button>
        <br />
        <button onClick={() => this.handleClick("0")}>0</button>
        <button onClick={this.clear}>C</button>
        <button onClick={this.calculate}>=</button>
        <button onClick={() => this.handleClick("/")}>/</button>
      </div>
    );
  }
}

export default Calculator;

Step 3: Import the Calculator Component

Now, import the Calculator component in the App.js file and render it in the App component. Replace the code in App.js with the following:

import React from 'react';
import Calculator from './Calculator';

function App() {
  return (
    <div>
      <h1>ReactJS Calculator App</h1>
      <Calculator />
    </div>
  );
}

export default App;

Step 4: Run Your React App

You can now run your React app by running the following command:

npm start

This will start a development server and open your browser to http://localhost:3000, where you can see your ReactJS calculator app in action.

In this tutorial, we created a simple calculator app using ReactJS. You can further customize and enhance this app by adding more functionality, styling it with CSS, and adding more complex operations. Happy coding!