مشروع متكامل: تطبيق Todo App

في هذا المشروع العملي، سننشئ تطبيقًا متكاملًا لإدارة المهام (Todo App) باستخدام React وجميع المعارف التي اكتسبناها في الدروس السابقة.

هيكل المشروع

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

الإعداد الأولي

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

إنشاء المكوّنات

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;