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!
Top comments (0)