Introduction

In this article, I'm going to show you how to make a simple React Counter app, with this project you will learn how to handle events like button click with React, how to change state values, and how to apply a simple CSS style to your app, so without further ado let's start

Setup

first of all, we need to set up our project using create-react-app, just open your command prompt and add this line

your folder> npx create-react-app counter-app

wait for it until it installs all the dependencies and packages and you are ready to go.

open your favorite text editor and let's start coding.

Coding

for this project we will not do anything crazy, just go to your app.js file and remove the template provided by the react-script

import './App.css';
import {CounterBody} from './Counter';

function App() {
  return (
    <div className="App">
      <CounterBody />
    </div>
  );
}

export default App;

Now, inside your src folder create a new file and call it Counter.js then add this code

import React,{Component} from 'react'

export class Counter extends Component{

    constructor(props){
        super(props)
        this.state={
            itteration : 0,
        }
        this.increment = this.increment.bind(this)
        this.decrement = this.decrement.bind(this)
    }

    increment(){
        this.setState(state => ({
            itteration : state.itteration + 1
        }))
    }
  
    decrement(){
        if(this.state.itteration > 0){
            this.setState(state => ({
            
                itteration : state.itteration - 1
            }))  
        }
       
    }
     
    render(){
        return <div>
            <h1>Counter</h1>
            <p className="itt">{this.state.itteration}</p>
            <button className="Fab" onClick={this.increment}>+</button>
            <button className="Fab" onClick={this.decrement}>-</button>
        </div>
    }

}


export class CounterBody extends Component{
    render(){
        return <div className="counterBody">
            <Counter/>
        </div>
    }
}

now open your app.css file and let's style the app a little bit

.App {
  text-align: center;
}
body{
  background-color: #283593;
}
h1{
  color: #fff;
  text-transform: uppercase;
}

.counterBody{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 400px;
  border-radius: 8px;
  transform: translate(-50%,-50%);
  padding: 15px;
  background-color: #3949ab;
}

.itt{
  font-size: 4rem;
  margin: 15px;
  border-radius: 8px;
  background-color: #212121aa;
  color: #fff;

}

.Fab{
  background-color: #2196f3;
  border-radius: 50px;
  border: none;
  height: 50px;
  width: 50px;
  color: #fff;
  font-size: 2rem;
  margin: 0px 12px;
  outline: none;
}