Building a counter app using React js
The counter app is a web application which was built using a Javascript framework known as React js. The counter app allows the user to perform basic functions and operations such as increment, decrement and reset value.
The counter app is designed to make use of several React libraries, such as react-router-dom, react-error-boundary, context API and CSS. This allows the web application (counter app) to be efficient, reusable and easy to manage.
Prerequisite
HTML
CSS
Basics for JavaScript ES6
React
This is a Javascript library used for building users interface based on the UI components. When react application is built around a single HTML element, this is known as the root element.
Basic Concepts of React
The advantage of choosing React to build the front end is that the code can then be easily converted to React native and therefore Android and iOS applications for your website can be done.
React and React Native also has great community support because it is developed by the Facebook team. Facebook is also using React to build its front end. It made React more trustable to developers.
Before moving forward, you need to understand some of these basic concepts in React that would be used in this project:
Components: Components are the core building blocks of React applications. They contain independent, reusable code. Using components you can split the user interface into separate parts. You can then reuse those parts and work with them independently.
State: In React you can use an object to store data representing the state of a component. This allows components to manage and update their data. A component's state determines how it renders and behaves.
Functional Components: React's Functional component is simply a JavaScript function that accepts props as an argument and returns a React element (JSX).
Props: You can use props—short for "properties"—to pass data from a parent component to a child component. Props are one of the integral parts of React and you can use props to perform several operations in React.
Hooks: React Hooks are built-in functions that allow you to manage state and other React features like lifecycle methods inside functional components. They can also help you to write concise and clear code. You'll soon see how you can manage state with the useState() hook.
Step 1: Setting Up the Project
After the successful installation of Nodejs, install and set up a React app using the below command.
Open your terminal and run the following command to get started:
This will create a new react app, ready for you to start building your project with. It will generate a file system structure with several files and folders.
Run the following command in the terminal to start the development server:
npm run start
That command should open a new tab in your browser, pointing to localhost:3000. All the changes that you'll make to the project will be automatically updated here.
Step 2: Creating the Skeleton of the Counter Application
A counter is nothing but a number with three buttons. One isand increment its value, another to decrement its value and the last one is to reset.
Open the src/App.js file and delete all the by-default code that's present there. Now, create a skeleton of the application using the following code:
The first statement imports the useState hook from the react module. Use it to create the count state and initialize it to 0. You can change the value of the count using the setCount function.
The incrementCount, decrementCount, and resetCount functions are later used to increase, decrease, and reset the value of the counter.
You may notice the curly brackets { } used around the count variable in the markup. This essentially lets the JSX parser know that it should treat the content inside those braces as JavaScript.
The application features a navigation bar that includes an active state, which can be used to navigate the homepage, the 404 error page, the error boundary page, the counter with a custom hook and the counter with a reducer page. Its functionality is to keep the app simple.
Step 3: Adding the Functionality to the Counter Application
You need to create three buttons to implement the functionality of the counter application: the decrement count button, increment count button, and reset button. When you click these buttons, the decrementCount, incrementCount, and resetCount functions will run. Update these functions in the App.js file with the following code:
The setCount function will update the state of the count.
These capabilities were implemented using both a custom hook and useReducer. This implementation approach resulted in the creation of two distinct pages, one for custom hook and the other for the useReducer.
Counter with useReducer
A reducer function was created to handle the increment, decrement, reset and setValue operations. This function serves as a decentralized location to manage the state transitions of the functionalities.
Once created, the reducer function was imported into the counter with reducer component, which utilized its functionality to manage the state of the counter app.
The r
This will ensure you can maintain it easily and can help to improve the overall performance of your application.