Skip to content
Related Articles

Related Articles

How to create a simple counter Using ReactJS?
  • Last Updated : 05 Jan, 2021

React is a front-end, open-source JavaScript library that is used to create interactive UI. It is developed and maintained by Facebook. It can be used for the development of single-page and mobile applications.

We’ll be creating a simple application where we have 2 buttons one to increment and one to decrement.

Initial Setup: The npx is a CLI tool used to install and manage dependencies in the npm registry. NPX comes pre-bundled with npm 5.2+, else we can install it using the following command:

npm i -g npx    // -g flag indicates global installation

Creating React Application:

Step 1: Create a React application using the following command:



npx create-react-app counter

Step 2: After creating your project folder i.e. counter, move to it using the following command:

cd counter

Project Structure: It will look like the following.

Project Structure

Filename: App.js:

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

import React, { useState } from "react";
  
// Importing app.css is css file to add styling
import "./App.css";
  
const App = () => {
  //  Counter is a state initialized to 0
  const [counter, setCounter] = useState(0)
  
  // Function is called everytime increment button is clicked
  const handleClick1 = () => {
    // Counter state is incremented
    setCounter(counter + 1)
  }
  
  // Function is called everytime decrement button is clicked
  const handleClick2 = () => {
    // Counter state is decremented
    setCounter(counter - 1)
  }
  
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: '300%',
      position: 'absolute',
      width: '100%',
      height: '100%',
      top: '-15%',
    }}>
      Counter App
      <div style={{
        fontSize: '120%',
        position: 'relative',
        top: '10vh',
      }}>
        {counter}
      </div>
      <div className="buttons">
        <button style={{
          fontSize: '60%',
          position: 'relative',
          top: '20vh',
          marginRight: '5px',
          backgroundColor: 'green',
          borderRadius: '8%',
          color: 'white',
        }}
          onClick={handleClick1}>Increment</button>
        <button style={{
          fontSize: '60%',
          position: 'relative',
          top: '20vh',
          marginLeft: '5px',
          backgroundColor: 'red',
          borderRadius: '8%',
          color: 'white',
        }}
          onClick={handleClick2}>Decrement</button>
      </div>
    </div>
  )
}
  
export default App

chevron_right


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output:

react-js-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :