Hello Everyone, in this post we will se how to create a simple todo app using reactjs, typescript with vite as our initializer
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:
$ 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
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
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.
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.
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.
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.
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.
Now let's create the addtask function that will be used every time the user clicks in the Add button.
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.
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.
Step 3: Style our App
For the style you can go to my gitHub 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.
Top comments (0)