Hey there,
This is my first React JS article where I'll explain how we can create component for Increasing and Decreasing Counter using ReactJS and TypeScript.

Here we go.

TypeScript is the tightly coupled language developed by Microsoft. Most of the developers uses TypeScript for making the app more readable and more user friendly. Yes, at the of the day it'll convert it into pure JavaScript but whenever new reader read your code it should not be un-understandable.

Whatever features TypeScript has those we can use it while developing the app.
Features like
interfaces
enums
services
types and many more....

These features give us flexibility to consume our logic not only in single component but any component which is the part of your application. "Reusability" is only key point we have to keep in mind while using this feature.

So, let's start to build small application using React + TypeScript.

1] Create new application using React js and template will Typescript
=> npx create-react-app react-counter-app --template typescript

2] Open your project using command prompt by entering "code ."

3] Now, it's time to clean unwanted stuff from your existing component like App.tsx.

  • From Explorer click to App. tsx and clear all the code which is inside return().

4] Now create a new component. It's a good practice you create a new folder to keep your components and make sure those folder names are understandable.

  • Let's create a new folder under src and name it as "components"

  • Right click to "components" folder -> New File -> counter.tsx -> hit enter, and your new file is ready.

5] Write the below code first to create Counter Component

Image description

Here, Counter is the name the React Component which inherits React.FC.
FC means Function Component. We created the arrow function which'll return some HTML code. And html code we'll write under .

Note: You can use any tag but that tag to be used as a parent tag.

6] Now, create 2 html buttons under .

Image description

7] Now, when user clicks on Increment / Decrement button then we have to show changing value on the page. And that's why we require hook to hold the new value and re-render the current component. Using "useState()" hook we can achieve this.

Let's define "useState" on top of return(). Here, I am also using interface to make this code more readable.

Here, is the complete code of Counter Component

Image description

Points to know
A] Imports and Interfaces

import { useState } from "react";
interface ICounter {
initialValue: number;
}

  • "useState" is a React hook used for managing state in functional components

  • ICounter is a TypeScript interface defining the type for the initialValue prop, which ensures the counter starts with a number.

B] Component Definition
const Counter: React.FC = ({ initialValue }) => {});

  • Counter is a functional component (React.FC) with a prop defined by the ICounter interface.

  • initialValue is destructured from the component's props

C] State Hook
const [counter, setCounter] = useState(initialValue);

  • useState initializes counter with the value of initialValue
  • setCounter is the function used to update the counter value.

D] Counter Handler Function
const handlerCounter = (opr: string) => {
opr === "+" ? setCounter(counter + 1) : setCounter(counter - 1);
}

  • A function named handlerCounter takes an operation (opr) as an argument.
  • If the opr argument is "+", the counter state increments by 1. Otherwise, it decrements by 1.

E] Render Section

Image description

Image description

F] default export:
export default Counter;

This exports the** Counter component** so it can be imported and used in other files.

Up to this stage we created our "Counter Component". Now, let's use it is some other component. In our case we have App.tsx which is default component. Open that file from src folder and write below code to use Counter Component in it.

Image description

Here, we consumed component in App.tsx and passed "initialValue" as a prop to it. This property is required for this because we used ICounter interface in our component.

And that's it!!! Save everything and run your application by entering
*npm run start *
into your terminal and you'll get Counter component on your UI.

Conclusion:
In this article we learned how to use TypeScript in React JS and interfaces which widely used in almost all applications. And how to use created component in another component [App.tsx or any .tsx file] and using props we passed some value to it.

Final Output:
On Clicking on "Increment" button

Image description

On clicking on "Decrement" button

Image description

You can also set condition to keep the value up to ZERO only when user clicks on Decrement button and reached to ZERO and keep clicking on it. In this case you can assign the value as ZERO.

Thanks!!!