Counter application with react and typescript

Let's build this counter application using react-typescript.We are going to use useReducer hook for this application.

Let's set up our application

$ cd Desktop
$ mkdir react-counter
$ cd react-counter

Now create a react app

$ npx create-react-app ./ --template typescript

You should see a brand new react application.Clean up all unnecessary files.You can use a different component but in my case i am going to use App.tsx component.

At first create a component App and export it defaultly

const App:React.FunctionComponent=()=>{
  return <div className='container'></div>
}

Now we are going to setup our useReducer hooks.Add this statement to your code

const [state, dispatch] = React.useReducer(counterReducer, initialState);

Now let's create our cunterReducer and initialState

First initialState..

const initialState = {
  count: 0,
};

And then counterReducer

type ActionsType = {
  type: string;
  payload?: number;
};

const counterReducer = (
  state: typeof initialState,
  action: ActionsType
): State => {

};

Now let's add some actionTypes and actionCreators

ActionTypes..

const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";
const RESET = "RESET";

and actionCreators..

const increment = (value: number) => {
  return {
    type: INCREMENT,
    payload: value,
  };
};

const decrement = (value: number) => {
  return {
    type: DECREMENT,
    payload: value,
  };
};

const reset = () => {
  return {
    type: RESET,
  };
};

Yeah i am using redux pattern.Now let's add some logic to our reducer.

 switch (action.type) {
    case INCREMENT:
      return { ...state, count: state.count + Number(action.payload) };
    case DECREMENT:
      return { ...state, count: state.count -Number(action.payload) };
    case RESET:
      return { ...state, count: 0 };
    default:
      return state;
  }

Now let's add some jsx to our application

<div className="container">
      <p>{state.count}</p>
      <div className="wrapper">
        <button onClick={() => dispatch(increment(2))}>increment</button>
        <button onClick={() => dispatch(decrement(2))}>decrement</button>
        <button onClick={() => dispatch(reset())}>reset</button>
      </div>
<div>

If you want those styles you can add these css code in index.css file

p {
  font-size: 2rem;
  font-weight: 600;
}
button {
  background: #004567;
  color: white;
  border: none;
  border-radius: 3px;
  padding: 20px;
  margin: 10px;
  font-size: 1.2rem;
  text-transform: capitalize;
}
.container {
  width: 500px;
  margin: 100px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

If you start your application you should see something on the screen a simple counter application working.

Now add a input element to add numbers randomly..

<input type="number" name="count" value={value} onChange={handleChange}/><button onClick={() = dispatch(increment(value as number))}>
       add
</button>

Now where do i get those value={value} and onChnage={handleChange} for that add following code at top of your component

const [value, setValue] = React.useState<number>();

and change handler handleChange

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(Number(e.target.value));
  };

you should keep all hooks at the top then functions

Now add these css code for your input element

input {
  padding: 10px;
  width: 300px;
}

Now if you got to your browser and refresh if it is needed,you should see same counter application as i have shown you at the top.Try to click buttons and check if it is working.

Thank you for being with me so long.See you.Bye!