Counter App using React Hook

Outline

• Introduction

• Overview of React Hooks

• Setting up the Project

• Building the Counter App

• Testing the Counter App

• Conclusion

INTRODUCTION

This is my first time writing and publishing on projects I have built. Lol 😂

A short story, I have always wanted to contribute to the internet community not via usage only though, but then I always thought it's impossible because of my view about the folks that do it, being extraordinary and all.

Not until I had to have an open mind about it and took my first step in learning html and the rest is history although I'm still learning. So in this article I will be talking about a counter app assignment project I built, using the Javascript library React.js

Overview of React Hooks

The counter app was built via React hooks - the useState hook and the useReducer hook. Firstly, what are React hooks? Well React hooks were introduced in React version 16.8, so basically they are new features of React. React hooks are created to allow the usage of state and other React features without the use of the class component. As a result of this, one's code becomes easier to understand and this is due to the use of functions instead of the life cycle methods that manage state and side effects.

Although there are several React hooks, there are two main types viz: state hooks and effect hooks.

State hooks, like useState, allows you to manage state in functional components. They take an initial state and return an array with the current state and a function to update it.

Effect hooks, like useEffect, allow you to perform side effects in functional components. They are called after every render, and can be used to fetch data, add event listeners, and more.

The other hooks provided by React for common task are useContext, useReducer and useMemo.

Overall, hooks make it easier to reuse stateful logic between components, and can help you write cleaner and more concise code.

SETTING UP THE PROJECT.

I did not make use of the usual create-React-app because I am currently using my mobile phone for programming, though I use the create-React-app with the help of termux. But for this I made use of an online integrated development environment (IDE), so as to avoid the stress that comes with working with React on a mobile phone editor.

The online IDE used is replit.

I also installed the Helmet- a dependency used for the search engine optimization of the app.

BUILDING THE COUNTER APP

The counter app was built with the Javascript library called React.

So firstly different functional components were created to house the code.

Afterwards the useState hook and the useReducer hook were created and imported as custom hook into the counter.jsx component

The useState hook was used to manage the counter and the input state and its updates, which includes the increase, decrease and resetting of the counter app.

The useState takes in the value 0 (zero) as an argument, and then returns count and setCount in an array destructuring manner. The count serve as the current state for the counter app, while the setCount updates the state, depending on button clicked, whether the handleIncrement, handleDecrenent or the handleReset.

The handleChange function is used to set different values in the input field of the app and this updates the count manually to any desired value.

Like so;

I also test my knowledge of the useReducer by using it to manage the state of the counter app as well as to track its updates at every render.

The useReducer hook is similar to the useState; the only difference is just the amount of code involved and its use in managing complex states.

The useReducer, unlike the useState, takes in a reducer function and an initial state, then returns the current state. It also has a dispatch function( like the setState in useState) that can be used to update the state. Additionally, the useReducer has a reducer function that takes in the current state in this case "the count" and an action that is the Decrement, Increment and Reset. A new state caused by these actions is then returned by this reducer function.

CONCLUSION

This project came in as an assignment to test my understanding of React. As an upgrade on this, I would love to design the app user interface and add some animations and of course a nice background.

Comments please.

Thanks.

github

live project