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.
- and on the onSubmit function we have pushed the task value (local state) to tasks (global state array).
Create components/Todos.tsx
- which will accept global state tasks.
- and retrieve over through it.
Top comments (0)