ziontutorial

Posted on Nov 5, 2022 • Updated on Jan 14, 2023 • Originally published at ziontutorial.com

How To Build A Simple Counter App In React for Beginners

#javascript #react #beginners #css

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?

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 :

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

Important Note :

Download Design Assets Link

Step 1 : Packages to be installed

1.MUI : Link

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;