Building a Counter App with React
Tags: javascript, react, beginners
Published: 2022-12-24 15:10:20

A counter is one of the first things a beginner developer (like me) will make when learning a new framework. And for good reason. It's a simple way to introduce concepts such as initializing, setting and updating state, as well as event handlers. Because of its simplicity, it can also be used to learn more advanced concepts. Here, I used a counter app to learn how to properly implement a custom hook, as well as a reducer. Does that mean doubling the counters? Yes, it does. But never fear, for I found a story to go along with each counter to make them better to look at. Let's get into the how.

## Step One: Figuring Out What to Do
The first thing I had to do was figure out was how to write a reducer and a custom hook. Reducers in React work by dispatching actions to update the state. Instead of telling React “what to do” by setting state, you specify “what the user just did” by dispatching “actions” from your event handlers. These "actions" are passed into the dispatch as objects. I wrote actions and dispatches for four state changes: when the count increases, when it decreases, when it is reset, and when the user sets a custom value using a textbox provided. For the custom hook, I wrote a function which returns an object, the properties of which contained the state, functions to increase, decrease, reset, and set the count.

## Step Two: The Wireframing
While this may not be the technical term, it's the word I use. Now that I have my reducer and custom hook, I now have to connect it to the application with event handlers. In this instance, all the handlers would be listening for click events. For the reducer, it was a somewhat simple affair, just a matter of plugging the right dispatch call into the right event handler. The custom hook was a bit more challenging since, unlike with the dispatch, I was still setting the state inside the custom hook, especially the increasing and decreasing actions. It was imperative that it was properly written inside the custom hook in order for it to work. Once that was done, I just had to plug the right object property into the right event handler. Then I used React Router to be able to navigate between the counters by adding a button that pointed to the other counter when you were on one. And with that, I was done with the wireframing.

## Step Three: Styling
There's no point in making an application if it's no good to look at. To style the app, I used [Google Fonts](fonts.google.com) for the custom font, and [Happy Hues](https://www.happyhues.co/) for the colors. Once I had a font and color selection that I was happy with, I started thinking about what you could use a counter for. I decided to go with a tracker. One counter tracks how much water you drink (in cups), and the other tracks how many meals you've had in a day. At the end, I was happy with the end result.

![App screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xacpameffrw4pgheh88p.png)

![App screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cuqh4d37xy77twb9n6e3.png)

## Step Four: Hosting
There's no point in making an application if no one else gets to use it. So, figuring out how to host it is vitally important. I decided to use Netlify to host this app. There are various reasons, but the main one is that this was the easiest hosting option I could understand. It also allowed for continuous deploys from GitHub which meant that I could make changes to the code, and have it update on the site in real time (real meaning when the changes are pushed to a repo).

## Issues
One major issue I ran into while making this involved the functionality to set a value into the counter by the user directly. The setting worked as it was supposed to, but it was set as a string instead of a number, so any attempt to increase the number would add a '1' to the end of the existing number in state. I struggled with this issue for hours, poring over every line I'd written trying to find the bug. When I eventually found the bug (setValue was setting the number as a string instead of a number), I added a parseInt function which converted the received input into a number, and that bug was fixed.

## Conclusion
This project was very useful as an educational opportunity. It allowed me to learn about reducers and custom hooks, know how they work, and situations where they could be used.