Table of contents
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:
UI Design
Understanding the features you would want to implement.
Get react started on your text editor.
Import all dependencies to be used.
Create a component folder to store all your components.