Speed Coding: Todo List App in Typescript & React
In this tutorial, we will create a simple Todo List application using Typescript and React. We will be using the create-react-app tool to quickly set up our project and then implement the functionality of adding and removing todo items.
Setting Up the Project
First, we need to create a new React project using create-react-app. Open your terminal and run the following command:
npx create-react-app todo-list-app --template typescript
This will create a new React project with Typescript support.
Coding the Todo List App
Now, navigate to the newly created project directory and open it in your code editor. We will start by creating a new file called Todo.tsx to hold our Todo component.
import React, { useState } from 'react';
const Todo = () => {
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');
const addTodo = () => {
if (inputValue) {
setTodos([...todos, inputValue]);
setInputValue('');
}
};
const removeTodo = (index: number) => {
const newTodos = todos.filter((_, i) => i !== index);
setTodos(newTodos);
};
return (
/>
-
{todos.map((todo, index) => (
-
{todo}
))}
);
};
export default Todo;
This Todo component will handle the logic for adding and removing todo items.
Adding the Todo List to the App
Next, open the App.tsx file and update it to include the Todo component.
import React from 'react';
import './App.css';
import Todo from './Todo';
function App() {
return (
Todo List App
);
}
export default App;
Running the Application
Finally, to see our Todo List app in action, run the following command in your terminal:
npm start
This will start a development server and open the application in your web browser.
That’s it! You have successfully created a simple Todo List application using Typescript and React. Feel free to customize and expand the functionality of the app to suit your needs.
