Creating a Simple TodoApp with React and TypeScript
Tags: react, typescript, vite
Published: 2022-02-22 15:44:22

Hello Everyone, in this post we will se how to create a simple todo app using reactjs, typescript with vite as our initializer

![Todo App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3icj3tge6m8y3dlxxa1x.gif)

## Pre-requisites

* Nodejs installed on your machine
* Basic knowledges of html, css
* Visual studio code

## Step 1: creating our app

go to your preferred folder (your projects folder)
open the terminal in there and write:
```bash
$ npm create vite@latest React-Todo -- --template react-ts 
$ cd React-Todo #enter directory
$ npm install #to install dependencies
$ code .
```

## Step 2: editing our app

Inside Visual studio code, our folder structure will be like this

![Folder Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4l3womd06y279s2is8rq.PNG)

Delete the selected elements because we wont need them.
Also, inside App.tsx we will remove all the unnecessary things and start everything from scratch.
Heres how the app will look

![Initial structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2573bqiyu7kr8l0qerp.PNG)

One thing to note is that the files extension are tsx or ts, which means they are typescript files.
Now we will format our App function to be as the typescript standard.
Change `function App(){` to `const App:React.FC  = () =>{`
React.FC indicates that the App is a [functional component.](https://reactjs.org/docs/components-and-props.html)

![Final Initial structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cw0qcfpgyvq74vlto37r.PNG)

Now let's create the elements that will be rendered in the browser.
We will have two divs inside the initial div. One will be the header that will contain the inputs and button that will permit us to add a todo.
The second div will be the list of todos and will allow us to delete a specific todo.

![Initial Header Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zxpvcnljk0h9nxenmh3.PNG) 

Now we need a way to retrive the data that are been passed in the input fields, for that we will use **useState**. 
First let's import it: `import {useState} from 'react'`
In this project we only have two inputs so we will have separate states for them.
Inside the App let's declare variables that catch the input states and let's add field **value** inside input tag.

![States](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3mf47h9g68cpe1171m7h.PNG)

Now let's create the todoList state, this state will have the above states that we created. Because those states have different types (string and number), we will have to use something called **Interface** that will have the types that todoList state will have.
For organization we will have the interface in another file and then import it to the App.
In the src folder, create a file with the name Interfaces.ts.

![Interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q73blbbasyjlxwykcw7m.PNG) 

![Importing and using Interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5wr3kbxanxrfsirzt1d.PNG)

Now it's time to handle the events, we want to store what the user is writing.
We will create a function **HandleChange** that will monitor the values in the input fields and store them.
For that we will use a react built-in called **ChangeEvent** that is of type HTMLInputElement.

**Note: Everything that the user input is string, we have to convert it to the type that we want. In this case the deadLine to number.**

![Handle Change](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2jx73de1r6xkf94w4wr.PNG)

Now let's create the **addtask** function that will be used every time the user clicks in the Add button.


![Add Task](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jakwvxf1djg3k3ttnfof.PNG)

We are done with the header for now, let's move to the todoList div. We will implement the methods for us to be able to see in the page all tasks that were introduced.
We will iterate through all the tasks and render them in the page. 
First lets create a component that will be responsible to render the tasks.
In src folder, create a folder named **Components** and inside create a file **TodoTask.tsx**
In this component we will have a interface that receives the one that we already created. We will also in this function handle the event when the user clicks in **X** button to delete a task.

![TodoTask Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3crkulzqlpxhntdhuy2.PNG)  

Now lets import it to the App file and create the completeTask method.
This function will receive the name of the task we want to delete (mark as completed) as a parameter and return all tasks except it.

![Complete Task](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8r79s7h5nyia1sw1mx8.PNG)

## Step 3: Style our App

For the style you can go to my [gitHub](https://github.com/Egnoel/React-TypeScript-Todo/blob/master/src/App.css) and copy and paste all the style to the file **App.css**

## Final thoughts

We now have a full front-end Todo app with React using typeScript.
We saw some basic things like states, components and interfaces. 
This is just the beginning, we can do many beautiful things with React.


Feel free to contact me:
[Instagram](https://www.instagram.com/egnoelneto/) 
[Twitter](https://twitter.com/Egnoel_Neto) 
[Linkedin](https://www.linkedin.com/in/egnoel-neto/) 
[GitHub](https://github.com/Egnoel)