A simple Counter App built using React as part of the Web Development Series – JDCodebase. This mini project is specially designed for beginners to understand how core React concepts work in a real project.
The focus of this project is clarity and learning, not advanced optimizations.
This Counter App allows users to:
- Increase the counter value
- Decrease the counter value
- Reset the counter
- Handle value limits using conditions
- Display error messages based on user actions
It demonstrates how state, events, and conditional UI work together in React.
- React
useStatehook - State management
- Event handling (
onClick) - Conditional rendering
- Conditional styling
- Button disabling logic
- Basic UI validation
- React
- JavaScript (ES6)
- HTML
- CSS
- Increment counter value
- Decrement counter value (cannot go below 0)
- Maximum limit set to 10
- Error messages for invalid actions
- Reset button to restart the counter
- Clean and beginner-friendly UI
counter-react-app/
├── src/
│ ├── App.jsx
│ ├── App.css
│ ├── index.js
│ └── main.jsx
├── public/
├── package.json
└── README.md
Follow these steps to run the project locally:
-
Clone the repository
git clone https://github.com/jdcodebase/counter-react-app
-
Navigate to the project folder
cd counter-react-app -
Install dependencies
npm install
-
Start the development server
npm run dev
This project is explained step by step in a YouTube video as part of the Web Development Series – JDCodebase.
The video includes:
- Concept explanation
- Live coding
- Beginner-friendly logic
Try modifying this project by:
- Changing the maximum limit
- Improving the UI design
- Adding step increment (e.g., +2, +5)
- Removing error state and handling logic differently
Practice is the key to mastering React.
If you find this project helpful:
- ⭐ Star this repository
- Subscribe to the JDCodebase YouTube channel
- Share this project with other learners
This project is open-source and available under the MIT License.
JDCodebase – Web Development Series