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

Counter app with reactjs
Counter app with reactjs (project demo)

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

The brand-new project should look like this:

brand new react js project

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 = () => {
    const reset = () => {
    const dlt = () => {
    return (
        <div className='wrapper'>
            <div className='wrapper-inside'>
                <div className='main'>
                    <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>

export default App

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

    padding: 0;
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(11, 9, 22);
    border-radius: 5px;
    width: 300px;
    box-shadow: 0px 0px 50px 20px rgba(86, 64, 206, 0.1);
    color: rgb(184, 185, 185);
    text-align: center;
    margin: 50px;
    padding:5px 15px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    color: rgba(0, 0, 0, 0.7);
    font-size: medium;
    background-color: rgb(110, 240, 110);
    background-color: rgb(110, 110, 240);
    background-color: rgb(240, 110, 110);

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

npm run start

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