🔢 Simple Counter App in React

A counter app is a classic beginner React project that teaches you how to use state and event handling.

🧱 1. Create Counter Component

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(0);

  return (
    <div className="text-center space-y-4">
      <h2 className="text-2xl font-bold">Count: {count}</h2>
      <div className="space-x-2">
        <button onClick={increment} className="bg-blue-500 px-4 py-2 text-white rounded">+</button>
        <button onClick={decrement} className="bg-red-500 px-4 py-2 text-white rounded">-</button>
        <button onClick={reset} className="bg-gray-500 px-4 py-2 text-white rounded">Reset</button>
      </div>
    </div>
  );
}

export default Counter;

🚀 2. Use in App Component

import Counter from './Counter';

function App() {
  return (
    <main className="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800">
      <Counter />
    </main>
  );
}

export default App;

🎨 3. Styling with Tailwind CSS

This example uses Tailwind classes for quick styling. You can customize button colors, text size, and layout further.

📋 Summary

• Uses useState to manage the counter
• Handles button click events to update state
• Good for understanding React basics like components and hooks