شرح React Todo List TypeScript لبناء تطبيق مهام احترافي خطوة بخطوة
يُعد تطبيق React Todo List TypeScript من أهم المشاريع الأساسية التي يبدأ بها أي مطور يرغب في تعلم React بشكل عملي. فهو يجمع بين مفاهيم مهمة مثل إدارة الحالة (State)، والتعامل مع الأحداث (Events)، والتفاعل مع المستخدم، بالإضافة إلى تنظيم الكود باستخدام TypeScript.
في هذا المقال سنقوم بشرح كود تطبيق Todo List بشكل كامل خطوة بخطوة، مع توضيح كل جزء من أجزاء الكود، وكيفية عمله، ولماذا تم استخدامه بهذه الطريقة، مما يساعدك على فهم عميق لكيفية بناء تطبيقات React بشكل احترافي. :contentReference[oaicite:0]{index=0}
التقنيات المستخدمة في React Todo List TypeScript
React
مكتبة لبناء واجهات المستخدم تعتمد على Components.
TypeScript
يضيف أنواع بيانات (Types) للكود، مما يقلل الأخطاء.
useState
لإدارة حالة البيانات داخل المكون.
useRef
للوصول المباشر إلى عناصر DOM مثل input.
CSS Modules
لتنسيق المكونات بطريقة معزولة ومنظمة.
استيراد المكتبات
import { useRef, useState } from 'react';
import styles from "../styles/Todo.module.css";
في هذا الجزء:
– قمنا باستيراد useState لإدارة الحالة – واستيراد useRef للوصول إلى input – واستيراد ملف CSS Modules لتنسيق الصفحة
تعريف الحالة (State)
const [todos, setTodos] = useState<{ completed: boolean; text: string }[]>([]);
const refInput = useRef<HTMLInputElement>(null);
todos
مصفوفة تحتوي على المهام.
setTodos
دالة لتحديث المهام.
TypeScript Type
حددنا أن كل عنصر يحتوي على:
– text: نص المهمة – completed: حالة الإنجاز
refInput
مرجع لحقل الإدخال للوصول إليه مباشرة.
إضافة مهمة جديدة
const handlAddTodo = () => {
const text = refInput.current?.value ?? "";
const newItem = { completed: false, text };
setTodos([...todos, newItem]);
refInput.current!.value = "";
}
شرح الكود:
– نحصل على النص من input باستخدام ref – ننشئ عنصر جديد – نضيفه إلى القائمة باستخدام spread operator – نقوم بتفريغ حقل الإدخال
مهم: لا نقوم بتعديل المصفوفة مباشرة، بل ننشئ نسخة جديدة.
تحديد المهمة كمكتملة
const doneClick = (index: number) => {
const newTodos = [...todos];
newTodos[index].completed = !newTodos[index].completed;
setTodos(newTodos);
};
عند الضغط على المهمة:
– نقوم بنسخ المصفوفة – نغير حالة completed – نحدث الحالة
حذف مهمة
const deleteItem = (index: number) => {
const newTodos = [...todos];
newTodos.splice(index, 1);
setTodos(newTodos);
};
يتم:
– حذف العنصر باستخدام splice – تحديث الحالة
عرض المهام باستخدام map
{todos.map((item, index) => {
return (
<div className="item" key={index}>
<li
className={item.completed ? styles.completed : ""}
onClick={() => doneClick(index)}
>
{item.text}
</li>
<span onClick={() => deleteItem(index)}></span>
</div>
);
})}
شرح:
map()
تستخدم لعرض كل عنصر في القائمة.
key
مهم لتتبع العناصر داخل React.
className الشرطي
يضيف style.completed عند اكتمال المهمة.
onClick
لربط الأحداث بالدوال.
حقل الإدخال وزر الإضافة
<input ref={refInput} placeholder='Add a new todo' />
<button onClick={handlAddTodo}>Add Todo</button>
الكود كامل
import { useRef, useState } from 'react';
import styles from "../styles/Todo.module.css"; function TodoList() { const [todos, setTodos] = useState<{ completed: boolean; text: string }[]>([]);
const refInput = useRef(null); const handlAddTodo = () => {
const text = refInput.current?.value ?? "";
const newItem = { completed: false, text };
setTodos([...todos, newItem]);
refInput.current!.value = "";
} const doneClick = (index: number) => {
const newTodos = [...todos];
newTodos[index].completed = !newTodos[index].completed;
setTodos(newTodos);
}; const deleteItem = (index: number) => {
const newTodos = [...todos];
newTodos.splice(index, 1);
setTodos(newTodos);
}; return (Todo Page
{todos.map((item, index) => {
return (- doneClick(index)}> {item["text"]}
deleteItem(index)}> );
})}
);
} export default TodoList; – input مرتبط بـ useRef – الزر يستدعي دالة إضافة المهمة
شرح CSS Modules
.Todo {
border: 1px solid #ccc;
padding: 25px;
}
.todo-list {
display: flex;
flex-direction: column;
}
.completed {
text-decoration: line-through;
}
ميزة CSS Modules:
– منع تضارب الكلاسات – كل style خاص بالمكون فقط
كيف يعمل التطبيق بشكل كامل؟
– المستخدم يكتب مهمة – يضغط Add – يتم إضافتها إلى القائمة – يمكن الضغط عليها لتحديدها كمكتملة – يمكن حذفها
كل هذا يتم بدون إعادة تحميل الصفحة.
أفضل الممارسات في React Todo List TypeScript
– لا تعدل الحالة مباشرة – استخدم Types في TypeScript – قسم الكود إلى Components – استخدم key داخل map – استخدم CSS Modules لتنظيم التصميم
الخلاصة
– إدارة الحالة باستخدام useState – التعامل مع DOM باستخدام useRef – عرض البيانات باستخدام map – تطبيق التنسيق الشرطي – تنظيم التصميم باستخدام CSS Modules
هذا النوع من المشاريع هو الخطوة الأولى لبناء تطبيقات أكبر وأكثر تعقيدًا، مثل تطبيقات إدارة المهام أو أنظمة الإنتاجية.
إذا فهمت هذا المثال جيدًا، فأنت بالفعل قطعت شوطًا كبيرًا في تعلم React بشكل احترافي.
لمزيد من المقالات يمكنك مشاهده : شرح Strategy Design Pattern بالتفصيل مع مثال عملي في Java
