Create a simple Counter App Using React

 

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;

}

now inside the command prompt, open the folder and run "npm start" so you can see the result, and normally it will look like this