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:






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',
      <div className="buttons">
        <button style={{
          fontSize: '60%',
          position: 'relative',
          top: '20vh',
          marginRight: '5px',
          backgroundColor: 'green',
          borderRadius: '8%',
          color: 'white',
        <button style={{
          fontSize: '60%',
          position: 'relative',
          top: '20vh',
          marginLeft: '5px',
          backgroundColor: 'red',
          borderRadius: '8%',
          color: 'white',
export default App


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

npm start



My Personal Notes arrow_drop_up
Recommended Articles
Page :