How To Build A Simple Counter App In React for Beginners
Tags: javascript, react, beginners, css
Published: 2022-11-05 11:27:30

React is a JavaScript framework for creating interactive user interfaces (UIs) that is gaining popularity among developers all around the world. Upon learning React, how can I create a straightforward counter app?


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9f908y031o8tq8yjjbkn.png)

The goal of this tutorial is to introduce developers to the React.js library.The reader should be familiar with the fundamental web development technologies, such as:

### Video Tutorial :
{% embed https://www.youtube.com/watch?v=CVLpofMFdEM&ab_channel=ziontutorial %}


Basics for HTML and CSS
Javascript
Basics of React.js in ES6

### Important Note :
Download Design Assets [Link](https://ziontutorial.com/how-to-build-a-simple-counter-app-in-react/)

##Step 1 : Packages to be installed
1.MUI : [Link](https://mui.com/material-ui/getting-started/installation/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zf4pqa9bj1c5wmbrg7vn.png)

##1.Install React
```
npx create-react-app react-counter-app
```

Then jump to that folder eg. if your folder name is react-counter-app the type
```
Cd react-counter-app
```

##2.CSS
```
.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
}
  
.container {
  background-color: #FAF9FA;
  border-radius: 8px;
  padding: 3rem;
  margin-top: 6rem;
}
.heading_text
{
  font-size: 15px !important;
  font-weight: 400;
}
.heading_two
{
  padding-top: 5px;
}
.total_amount_card
{
  height: 537px;
  background-color: #D6FF58;
  border-radius: 27px; 
}
 
.right
{
  float: right;
  margin-top: -2rem;
}
.card_text {
  padding-top: 40px;
}
.total_amount_heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  font-weight: 800;
  padding-top: 10rem;
}
.total_amount_para {
  text-align: center;
  font-size: 18px !important;
  padding-top: 5px;
  color: #4B4B4B;
}
.input_area
{
  margin-top: 40px;
}
  
.input_field
{
  margin-top: 30px;
  width: 445px;
}
#outlined-basic {
  width: 410px;
}
  
.button_collection
{
  margin-top: 61px;
  margin-bottom: 1rem;
}
.btn_one {
  background-color: #F2F2F2 !important;
  width: 200px;
  height: 75px;
  color: black !important;
  font-weight: 600;
  font-size: 20px !important;
  
}
 
.btn_two {
  background-color: #F2F2F2 !important;
  width: 200px;
  height: 75px;
  color: black !important;
  font-size: 20px !important;
  
}
```

## App .js
```
import './App.css';
import Box from '@mui/material/Box';
// import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import {useState} from 'react'
 
function App() {

  const [counter, setCounter] = useState(0);
 
  const handleClick1 = () => {
    // Counter state is incremented
    setCounter(counter + 1)
  }
  
  // Function is called everytime decrement button is clicked
  const handleClick2 = () => {
    // Counter state is decremented

    if(counter === 0)
    {
      return 0;
    }
    
    else {
    setCounter(counter - 1)
    }
  }
  const handleClick3 = () => {
    // Counter state is incremented
    setCounter(counter == 0);
    window.location.reload()
  }

  return (
    <>
    <Box
      component="form"
      sx={{
        '& > :not(style)': { m: 1, width: '25ch' },
      }}
      noValidate
      autoComplete="off"
    ></Box>
 
    <div className="app">
       
      <div className='container'>           
        <div className='total_amount_card' style={{ backgroundImage: `linear-gradient(to right,  rgba(253, 230, 90, 100%), rgba(204, 254, 87, 100%))`}}>
      <div className='right'>
      <svg onClick={handleClick3} xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="17" height="17"><path d="M21.962,12.875A10.03,10.03,0,1,1,19.122,5H16a1,1,0,0,0-1,1h0a1,1,0,0,0,1,1h4.143A1.858,1.858,0,0,0,22,5.143V1a1,1,0,0,0-1-1h0a1,1,0,0,0-1,1V3.078A11.985,11.985,0,1,0,23.95,13.1a1.007,1.007,0,0,0-1-1.1h0A.982.982,0,0,0,21.962,12.875Z"/></svg>
      </div> 
          <div className='card_text '>
          <h3 className='total_amount_heading'>{counter}</h3>
          </div>
        </div>
        <form >
        <div className='button_collection'>
          <Stack spacing={2} direction="row">       
          <Button   onClick={handleClick1}  variant="contained" className='btn_one'>+</Button>
          <Button   onClick={handleClick2}   variant="contained" className='btn_two'>-</Button>
          </Stack>
        </div>
        </form>
 
      </div>      
    </div>
    </>
  );
}
 
export default App;
```

## Output Counter app 

![Simple Counter App In React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9j0dukpsakdoq9q00cb0.gif)

Full Detail Article : https://bit.ly/3FLY1uE




##People are also reading:

[Simple interest calculator using React Hooks](https://ziontutorial.com/building-a-simple-interest-calculator-using-react-hooks/) 

[React Router v6 in React Js With Complete Project Of 2022](https://ziontutorial.com/react-router-v6-in-react-js-with-complete-project-of-2022/)


[Creating Simple Sum Calculator](https://ziontutorial.com/react-js-mini-project-2-creating-simple-sum-calculator-absolute-beginners-usestate-hook-conditionals-%f0%9f%94%a5%f0%9f%9a%80/)

[BMI Calculator in React JS – useState Hook](https://ziontutorial.com/how-to-build-a-bmi-calculator-in-react-js-usestate-hook-conditionals/)