React Todo List App Tutorial

Introduction

In this tutorial, we’ll build a basic Todo List application using React, Axios, and the DummyAPI’s Todos Endpoint. This app will allow users to toggle the completion status of todo items.

Step 1: Set Up the React Project with Bun

First, ensure you have Bun installed. Then create a new React project:

bun create react-app todo-app
cd todo-app
bun install

Step 2: Install Axios

Install Axios for making API requests:

bun add axios

Step 3: Create the TodoList Component

Create a new component for the Todo List in the src/components/TodoList directory with TodoList.js and TodoList.css files.

TodoList.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './TodoList.css';

const TodoList = () => {
    const [todos, setTodos] = useState([]);

    useEffect(() => {
        axios.get('https://dummyapi.online/api/todos')
            .then(response => setTodos(response.data))
            .catch(error => console.error('Error:', error));
    }, []);

    const toggleTodo = (id) => {
        setTodos(todos.map(todo =>
            todo.id === id ? { ...todo, completed: !todo.completed } : todo
        ));
    };

    return (
        <div className="todo-list">
            <h1>My Todo List</h1>
            <ul>
                {todos.map(todo => (
                    <li
                      key={todo.id}
                      className={`todo-item ${todo.completed ? 'completed' : ''}`}
                      onClick={() => toggleTodo(todo.id)}
                    >
                        {todo.title}
                        <span className="todo-status">
                            {todo.completed ? 'Completed' : 'Pending'}
                        </span>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default TodoList;

TodoList.css

.todo-list {
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.todo-list h1 {
    color: #333;
    text-align: center;
}

.todo-item {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.todo-item.completed {
    background: #d4edda;
    text-decoration: line-through;
}

.todo-status {
    font-size: 0.9em;
    color: #666;
}

Step 4: Update the App Component

Include the TodoList component in your App.js:

import React from 'react';
import './App.css';
import TodoList from './components/TodoList/TodoList';

function App() {
    return (
        <div className="App">
            <TodoList />
        </div>
    );
}

export default App;

Step 5: Run the Application

Start your application using Bun:

bun start

Conclusion

You now have a basic React Todo List app that fetches data from the DummyAPI Todos endpoint and allows users to toggle the completion status of todo items.