In this blog post, we’re going to explore a straightforward yet instructive project—a counter application built using React. This project allows you to increase or decrease a counter’s value with just a click of two buttons. The structure is minimal but provides a great starting point for learning the basics of React and state management. Let’s dive into the code and understand how it works.

Project Setup

First, let’s get familiar with the project structure:

• README.md
• index.html
• node_modules
• package-lock.json
• package.json
• public
• src
• vite.config.js

The core of the project is in the src directory, which contains the App.jsx file—the heart of our counter application.

App.jsx: Building the Counter

Our App.jsx file defines the main component, App, which manages the counter and renders it along with the increment and decrement buttons.

import { useState } from 'react'
import './App.css'

function App() {
  // Initialize the counter state with a value of 10
  let [counter, setCounter] = useState(10)

  const increment = () => {
    if (counter < 20) {
      counter = counter + 1
      setCounter(counter)
      console.log("Clicked Increment, Counter:", counter)
    } 
  }
  
  const decrement = () => {
    if (counter > 0) {
      counter = counter - 1
      setCounter(counter)
      console.log("Clicked Decrement, Counter:", counter)
    }
  }

  return (
    <>
      <h1>COUNTER APPLICATION</h1>
      <h2>Counter Value : {counter}</h2>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </>
  )
}

export default App

Code Explanation

• We start by importing the useState hook from React. This hook allows us to manage state within our component.

• Inside the App component, we initialize the counter state variable with an initial value of 10.

• We define two functions, increment and decrement, which will be triggered when the respective buttons are clicked. These functions check whether the counter value is within the range of 0 to 20 and, if so, update the counter state and log the action to the console.

• In the JSX portion, we display the counter’s current value and two buttons—’Increment’ and ‘Decrement.’ We set the onClick event handlers to call the increment and decrement functions when the buttons are clicked.

main.jsx: Entry Point

The main.jsx file serves as the entry point for our application, where we render the App component.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Code Explanation

• We import React and ReactDOM to render our App component into the HTML document.

• The App component is imported from the App.jsx file.

• We create a React root using ReactDOM.createRoot and attach it to the root element in our HTML file. This is where our React app will be rendered.

• To ensure a safer development experience, we wrap the App component in a <React.StrictMode> component. This enables various development features and checks in React to help catch potential issues early.

Conclusion

You’ve now successfully built a basic counter application using React. It’s a fantastic introduction to React state management and event handling.

While this project is simple, you can use it as a foundation to explore more advanced concepts like state management libraries (e.g., Redux), component composition, and UI design with additional CSS or component libraries.

Building small projects like this counter application is a great way to gain hands-on experience and gradually expand your skills as a web developer. Have fun experimenting and creating with React!

Enjoy coding and have fun with your background changer web app!

Thanks for reading, and see you in the next post with more projects revolving around web development.

If you’re as passionate about Cyber-Security as I am, feel free to follow me on Twitter – @ANShrivastava03 for the latest updates and connect with me on LinkedIn – Aditya Narayan to stay in the loop with my posts and insights in the world of digital forensics. Let’s continue this fascinating journey together!