Om Pharate

Creating a to-do application in ReactJS is a great first step towards upskilling. However, incorporating TypeScript into your project will also be beneficial for improving your TypeScript skills.

This blog post will teach you how to create a basic to-do app using TypeScript. The app will include essential features such as:

⚒️ Creating new tasks
❌ Deleting tasks
↕️ Updating tasks
✅ Marking tasks as complete

Getting Started With Vite.

npm create vite@latest

npm install

npm run dev

Now the basic folder structure will look like this.

Do not worry in case you have any additional files.
I have set up the tailwind CSS if you don't know how to set up tailwind CSS in React JS click here.

Here are the components/modules we are going to develop:

Navbar
Form
Todo List

Create components/Navbar.tsx

create a basic navbar with a title and about.

Attach the navbar in app.tsx

Create components/Form.tsx

Create this basic form having an input field and a button "Add".
and a use state for getting value from the input field.

However there is a problem in this code.

the problem with the typescript.
because we are using typescript we are supposed to tell the datatype or what type of value It will hold in future to state(task).
and our state is empty there it will be considered undefined only.
and below in the input field, we are assigning a string to the state in onChange.
but the task(state) value was supposed to be undefined.

fix:

the value it will hold must be a string.
which will come from the user input.

Add onClick functionality

Import Form in App.jsx

Create a global state of tasks array

create an array of tasks.
A task interface consists of a single task.
pass the setTasks to the Form component.
- accept task the setTask in Form component.
- the type of prop would be: React.Dispatch<React.SetStateAction<task[]>>
- in the typescript which type of props you are going to receive is required to mention.
- in this case, setTask is a State action.