Building  A Counter Application Using Both useState and useReducer

Building A Counter Application Using Both useState and useReducer

Table of contents

No heading

No headings in the article.

I built an app that counts, it's features includes Increment, Decrement, setValue, Reset. i made use of two different hooks to create this counter application. while the methods are different , both gave the same output.

Here is a live link to the project: https://vercel.com/oyinda98/my-counter

GitHub link for the project: https://github.com/oyinda98/My-counter

List of Dependencies used:

  • react

  • react-router-dom

  • react-error-boundary

  • react-icon

In this application, there are three different pages including the home page, which are linked by using the react-router, the three pages include the home page, the state page which is a counter created by using the react hook "useState" while the third page, Reducer page is also a counter created by using the useReducer. In the following paragraphs, I will be explaining in detail how I achieved all this in a number of steps.

Step 1: Installing the React Application and creating the various components to be used.

I started by installing the react application using the "npx create-react-app examination". Then I continued by creating components for the pages that are going to be displayed in my application. My components are saved in a folder named Components and this folder has a total of seven components then I deleted the default code in my react application.

Step 2: The Home Page.

The React-router-dom was installed to be able to link the different pages together. in the app.js. The Home Page is a simply designed page denoting a counter application. it also consists of links to other pages, that is the State page and the Reducer page.

Step 3: The useState hook Counter

useState is a basic hook for managing simple state transformation. The useState hook is a hook used to manipulate and update a functional component. it takes one argument which is the initial value of a state and returns a state variable and a function to update it. The counter features include Increment, Decrement, setValue, Reset, and Disabled. The useState counter code looks like this:

Step 4: The useREducer Counter

useReducer is an additional hook for managing more complex state logic. It is similar to the useState hook. It takes two arguments: a reducer function and an initial state. The hook then returns the current state of the component and a dispatch function. The dispatch function is a function that passes action to the reducer function. T’he useReducer counter code looks like this

.

Step 5:404 Page

A 404 page is a landing page that tells your site viewers the requested page is unavailable or, in some cases, doesn’t exist. This application consists of a 404 page in case of a mistake in routing, then it displays "404 Page,Page not found".

Step 6: Design UI

The counter Application UI is simply designed and consists of the Increment, Decrement, Reset and setValue symbols used to represent their functions. in designing the UI, I made use of vanilla CSS cause I am not too familiar with styled components. I used the same styling for both the State Counter and the useReducer Counter.

.Conclusion

To Build a react counter app, you would need to follow these steps:

  1. UI Design

  2. Understanding the features you would want to implement.

  3. Get react started on your text editor.

  4. Import all dependencies to be used.

  5. Create a component folder to store all your components.