How to build a Counter app in React js | react beginner tutorial (source code included)

Hi, welcome here in this tutorial we are going to build a counter app using react js, It will be a simple and beginner-friendly tutorial. The prerequisites for this project are as follows:

Node.js should be installed in your system
Create a brand new ReactJs project. Just copy the code below:

npx create-react-app my-app

JavaScript

The brand-new project should look like this:

In this section, we are going to use react hooks and we are using the useState() hook in it. Now Here is your code for the app.js file:

import React, { useState } from 'react'
import './App.css'

const App = () => {
    const [count, setcount] = useState(0)

    const add = () => {
        setcount(count+1)
    }
    const reset = () => {
        setcount(0)
    }
    const dlt = () => {
        setcount(count-1)
    }
    return (
        <>
        <div className='wrapper'>
            <div className='wrapper-inside'>
                <div className='main'>
                    <h1>
                        {count}
                    </h1>
                    <button onClick={add} className="btn" id="add">Add</button>
                    <button onClick={reset} className="btn" id="reset" disabled={count === 0}>Reset</button>
                    <button onClick={dlt} className="btn" id="delete" disabled={count === 0}>Delete</button>
                </div>
            </div>
        </div>
        </>
    )
}

export default App

JavaScript

Here is your CSS styling code for the app.css file

body{
    padding: 0;
    margin: 0;
}
.wrapper{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(11, 9, 22);
}
.wrapper-inside{
    border-radius: 5px;
    width: 300px;
    box-shadow: 0px 0px 50px 20px rgba(86, 64, 206, 0.1);
}
.main{
    color: rgb(184, 185, 185);
    text-align: center;
}
h1{
    margin: 50px;
}
.btn{
    padding:5px 15px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    color: rgba(0, 0, 0, 0.7);
    font-size: medium;
}
#add{
    background-color: rgb(110, 240, 110);
}
#reset{
    background-color: rgb(110, 110, 240);
}
#delete{
    background-color: rgb(240, 110, 110);
}

CSS

After writing the code into the editor you can run the command below:

npm run start

JavaScript

Download the Code

Here is the complete tutorial for building a counter app in react js.