How to create a simple counter Using ReactJS? - GeeksforGeeks

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
import React, { useState } from "react";  // Importing app.css is css file to add stylingimport "./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
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
react-js
CSS
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
Design a web page using HTML and CSS
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?