React Counter App
Tags: react, css, webdev, beginners
Published: 2023-01-10 01:05:52

Hi everyone🙋‍♀️. I created a counter app using UseState and UseReducer in react js for my Altschool second semester exam and this is how I did it. 





**React** is one of the popular frontend javascript library used for creating interactive user interfaces.

I’ll be creating a simple counter app using useState and UseReducer in react js.





**OUR COUNTER APP WILL HAVE THE FOLLOWING FEATURES:**

**Increase button:** this will increase the value by one.

**Decrease button:** this will decrease the value by one. 

**inputValue:** accepts value input

**Reset:** this will set the count to 0.


**Setting up React App**
First install Node.js then run the following command in your terminal to get started 

Npx create-react-app

![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2ufqtd256dupc5a9nx6.jpeg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2ufqtd256dupc5a9nx6.jpeg)


**Followed by **

![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/araxcoad9builsoto7rc.jpeg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/araxcoad9builsoto7rc.jpeg)

We are done setting up our react app. The next step is to clean up and edit the default folder and adding new folders and files needed for this project.

**I created a page folder with the following files:**

- 1. **Home** 
- 2. **Counter**
- 3. **UseReducer**
- 4. **Layout**
- 5. **Style.css** 
- 6. **ErrorBoundary** 
- 7. **404**

**A look at our project directory**

![Project directory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3c4n7dg5z83pfgekzchl.jpeg)

**Home page**: my home page shows my counter app using useState.

**Counter page:** The first thing I did in the counter was import UseState hook from react.

![Usestate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bq5a5wzccjv0f1i59u6v.jpeg)

UseState hook accepts value to store the data of the states and a function to accept the data in the state value. I set the UseState initial value to (0).

![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1xpuoyb9i8jb2xs5m7f.jpeg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1xpuoyb9i8jb2xs5m7f.jpeg)

Since our counter will accept input and quantity from users. I set the quantity to the useState and initialized the default value to zero

After declaring the state for our counter app, I then added functionality to the increase, decrease and reset buttons using the onClick event handler. 


![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3wzjg85ft3evwpzoctm.jpeg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3wzjg85ft3evwpzoctm.jpeg)

Setting the add quantity - I used an input field to take the quantity and declared onChange event handler to store the value into the state. 


![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8w2bbwaowphxhkzefzgh.jpeg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8w2bbwaowphxhkzefzgh.jpeg)

Our Counter app is ready😁


**UseReducer page** 
Creating a counter app using UseReducer 
As I did with the first one using usestate. I imported **UseReducer** from react and declared the initialstate with a counter set to 0 and quantity set to 0. T

![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9tyq0gktn5fhlrdefzw.jpeg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9tyq0gktn5fhlrdefzw.jpeg)
Next thing I did was to render the reducer function with a switch statement that was used to handle each case. 

![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sui9n10icav2wl3fhqw2.jpeg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sui9n10icav2wl3fhqw2.jpeg)


**DEPENDENCIES USED**:
Installed react-router-dom for routing/navigating, react-helmet-async for SEO, using the following command

![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btz0125h7pvogz80tblh.jpeg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btz0125h7pvogz80tblh.jpeg)
Link to the github code (https://github.com/Chidinma-Edna/Edna-Exam)
live app
(https://csb-cs4y8c-chidinma-edna.vercel.app/)


That will be all for now