Projet complet : Todo App

Dans ce projet pratique, nous allons créer une application de gestion de tâches (Todo App) complète en utilisant React et toutes les connaissances acquises dans les tutoriels précédents.

Structure du projet

todo-app/
├── src/
│   ├── components/
│   │   ├── TodoList.jsx
│   │   ├── TodoItem.jsx
│   │   ├── TodoForm.jsx
│   │   ├── TodoFilter.jsx
│   │   └── TodoStats.jsx
│   ├── hooks/
│   │   └── useTodos.js
│   ├── context/
│   │   └── TodoContext.jsx
│   ├── utils/
│   │   └── localStorage.js
│   ├── styles/
│   │   └── TodoApp.css
│   └── App.jsx
├── public/
│   └── index.html
└── package.json

Configuration initiale

npx create-react-app todo-app
cd todo-app
npm install @mui/material @emotion/react @emotion/styled

Création des composants

TodoItem.jsx

import React from 'react';
import { ListItem, ListItemText, IconButton, Checkbox } from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';

function TodoItem({ todo, onToggle, onDelete }) {
  return (
    <ListItem>
      <Checkbox
        checked={todo.completed}
        onChange={() => onToggle(todo.id)}
        color="primary"
      />
      <ListItemText
        primary={todo.text}
        style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
      />
      <IconButton onClick={() => onDelete(todo.id)} color="error">
        <DeleteIcon />
      </IconButton>
    </ListItem>
  );
}

export default TodoItem;