Implementing Counter App

React.js, more commonly known as React, it's a free open-source JavaScript library. The React.js framework library was developed by Facebook.

In React, you develop your applications by creating reusable components. These components are individual pieces of a final interface, which, when assembled, form the application’s entire user interface. This makes React applications very easy to update and maintain.

Requirements for Implementing a Counter App in React.js

• Node.js installed
• Code editor
• React
• Netlify

Our initial step in developing our counter application is to establish a new React.js project. There are numerous techniques to do this, though the most effortless option is to utilize the create-react-app tool. This tool sets up a new project along with the essential dependencies and configuration files, enabling us to rapidly start constructing our app. This is most certainly a commendable approach and we are certain that it will provide a smooth and successful implementation.

To do this, simply run the below command in your terminal

npx create-react-app my-app

The above code will create an react app which you can run on your local server by running the below code.

cd my-app
npm start

Secondly, we will create a new file in our project called "useCounter.js". Within this file, we will define our custom hook by utilizing the useState hook to keep track of the current count. This hook will enable us to keep track of the count in our application, allowing us to update and manipulate the count as needed.

import { useReducer } from "react";

const useCounter = () => {
  const ACTIONS = {
    ADD: "add",
    REDUCE: "reduce",
    RESET: "reset",
    SET_VALUE: "setValue",
  };

  function setValue(value, count) {
    let num = Number(value);
    if (String(num) === "NaN" || value === "") {
      return count;
    }
    return num;
  }

  function reducer(count, action) {
    switch (action.type) {
      case ACTIONS.SET_VALUE:
        return setValue(action.payload, count);
      case ACTIONS.ADD:
        return ++count;
      case ACTIONS.REDUCE:
        return --count;
      case ACTIONS.RESET:
        return 0;
      default:
        return count;
    }
  }
  const [count, dispatch] = useReducer(reducer, 0);

  return { count, dispatch, ACTIONS };
};
export default useCounter;

Our custom hook is used to define the initial count to be 0 and provide four different functions to interact with the count: increment, decrement, reset, and setValue. The setCount function provided by useState is used to update the count accordingly. To make use of our custom hook, we will create a new component called “Counter” that will display the current count in the UI. This will allow us to easily keep track of the count and interact with it using the four functions provided in the custom hook.

import React from "react";
import useCounter from "./useCounter";
import "../Styles/Counter.css";
// import { Helmet } from "react-helmet-async";

export default function Counter() {
  const { count, dispatch, ACTIONS } = useCounter();

  return (
    <div>
{/* 
    <Helmet>
      <title>Counter</title>
      <meta name="description" content="Counter page" />
    </Helmet> */}
      <div className="counter-container">
        <input
          type="text"
          placeholder="Count Value"
          onChange={(e) =>
            dispatch({ type: ACTIONS.SET_VALUE, payload: e.target.value })
          }
        />
        <h2>Count : {count}</h2>
        <div>
          <button
            className="add-btn"
            onClick={() => {
              dispatch({ type: ACTIONS.ADD });
            }}
          >
            Increase
          </button>
          <button
            className="dlt-btn"
            onClick={() => {
              dispatch({ type: ACTIONS.REDUCE });
            }}
          >
            Decrease
          </button>
        </div>

        <button
          onClick={() => {
            dispatch({ type: ACTIONS.RESET });
          }}
        >
          Reset
        </button>
      </div>
    </div>
  );
}

Once the core functionality was established, we moved on to styling the application. We employed CSS to provide the app with a distinct look and feel, and we were able to customize the appearance to our exact specifications. The appropriate CSS class and import have already been implemented in the code.

Conclusion

Overall, the process of constructing a counter app with React.js was an immensely rewarding experience. Despite the occasional roadblock, we were able to surmount them and create a fully functional and aesthetically pleasing program.

Github Url: https://github.com/Jizzyjay/AltSchool-Second-Exam
Netlify Url: https://altexam.netlify.app/