إنشاء تطبيق قائمة مهام باستخدام React: دليل شامل ومفصل

في عالم تطوير الويب، تُعد مكتبة React واحدة من أكثر الأدوات شعبية لبناء واجهات المستخدم التفاعلية وسريعة الاستجابة. ومن بين المشاريع النموذجية التي تساعد المطورين على فهم وتطبيق مفاهيم React الأساسية والمتقدمة، يأتي تطبيق قائمة المهام (To-Do List) كأحد التطبيقات التعليمية التي تجمع بين البساطة والعمق في نفس الوقت. في هذا المقال، سنستعرض بشكل مفصل كيفية إنشاء تطبيق قائمة مهام باستخدام React، مع التركيز على هيكلة المشروع، إدارة الحالة، التفاعل مع المستخدم، وأفضل الممارسات المتبعة لضمان تطبيق احترافي وفعّال.

مقدمة عن React وأهمية بناء تطبيق قائمة مهام

React هي مكتبة جافاسكريبت مفتوحة المصدر تركز على بناء واجهات المستخدم بطريقة مكونية (Component-Based)، مما يتيح إعادة استخدام المكونات بسهولة وفصل منطق العرض عن منطق التطبيق. تطبيق قائمة المهام هو نموذج مثالي لفهم كيفية التعامل مع المكونات، إدارة الحالة (State Management)، والتعامل مع الأحداث (Event Handling) داخل React.

هذا التطبيق البسيط في مظهره يمكنه استيعاب الكثير من المفاهيم الأساسية والعمليات الحياتية في تطوير التطبيقات، مثل إدخال البيانات، التفاعل مع المستخدم، تحديث الواجهة بشكل ديناميكي، وتنظيم البيانات وعرضها بطريقة منظمة.

الأدوات والبيئة المطلوبة

قبل البدء في تطوير التطبيق، يجب توفير البيئة والأدوات المناسبة التي تتيح العمل بكفاءة مع React:

1. Node.js و npm: لتثبيت حزمة create-react-app التي تسهل بدء مشاريع React بسرعة.

2. create-react-app: أداة لإنشاء هيكل مشروع React جاهز للاستخدام.

3. محرر نصوص: مثل VS Code، يوفر أدوات مساعدة لكتابة وتنسيق الكود.

4. متصفح حديث: يدعم React ويحتوي على أدوات مطور (Developer Tools).

خطوات إنشاء مشروع React جديد

لبدء المشروع، يتم استخدام create-react-app من خلال سطر الأوامر:

bash
CopyEdit
npx create-react-app todo-app
cd todo-app
npm start

بهذا يكون لديك مشروع React جاهز للعمل، وستظهر الصفحة الافتراضية في المتصفح على العنوان http://localhost:3000/.

هيكلة التطبيق: مكونات رئيسية لتطبيق قائمة المهام

تطبيق قائمة المهام يعتمد بشكل رئيسي على مجموعة من المكونات التي تتعاون مع بعضها البعض لتقديم تجربة مستخدم سلسة. هذه المكونات تشمل:

• App: المكون الرئيسي الذي يحتوي على باقي المكونات.

• TodoInput: مكون مسؤول عن إدخال مهمة جديدة.

• TodoList: مكون يعرض قائمة المهام.

• TodoItem: مكون يعرض مهمة واحدة مع إمكانية تعديلها أو حذفها.

• TodoFooter: مكون يعرض عدد المهام المتبقية وبعض العمليات الثانوية مثل تصفية المهام.

إدارة الحالة في React: استخدام useState

من أهم المفاهيم في React هي إدارة الحالة (State Management)، وهي التي تسمح للتطبيق بتتبع التغيرات في البيانات وعكسها على الواجهة. في تطبيق قائمة المهام، يتم استخدام الحالة لتخزين قائمة المهام الحالية، نص المهمة التي يتم إدخالها، وحالة كل مهمة (مكتملة أم لا).

jsx
CopyEdit
import React, { useState } from 'react';

function App() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  // باقي الكود
}

كتابة مكون إدخال المهمة (TodoInput)

هذا المكون يتضمن حقل نصي وزر لإضافة المهمة الجديدة إلى القائمة. يجب أن يكون هناك تحكم كامل في قيمة الحقل (Controlled Component) لضمان تحديث الحالة بشكل دقيق.

jsx
CopyEdit
function TodoInput({ inputValue, setInputValue, addTodo }) {
  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputValue.trim() !== '') {
      addTodo(inputValue);
      setInputValue('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="أدخل مهمة جديدة"
      />
      <button type="submit">إضافةbutton>
    form>
  );
}

كتابة مكون عرض قائمة المهام (TodoList) ومهامها الفرعية (TodoItem)

مكون TodoList يقوم بعرض جميع المهام المخزنة في الحالة. كل مهمة يتم عرضها باستخدام مكون TodoItem الذي يسمح بعرض المهمة وحذفها أو تعديلها.

jsx
CopyEdit
function TodoList({ todos, toggleComplete, deleteTodo }) {
  return (
    <ul>
      {todos.map((todo) => (
        <TodoItem
          key={todo.id}
          todo={todo}
          toggleComplete={toggleComplete}
          deleteTodo={deleteTodo}
        />
      ))}
    ul>
  );
}

function TodoItem({ todo, toggleComplete, deleteTodo }) {
  return (
    <li style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => toggleComplete(todo.id)}
      />
      {todo.text}
      <button onClick={() => deleteTodo(todo.id)}>حذفbutton>
    li>
  );
}

إضافة وظائف إدارة المهام في المكون الرئيسي (App)

يتم إضافة الوظائف التي تتعامل مع إضافة مهمة جديدة، حذف مهمة، وتغيير حالة المهمة (مكتملة أو غير مكتملة).

jsx
CopyEdit
function App() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = (text) => {
    const newTodo = {
      id: Date.now(),
      text,
      completed: false,
    };
    setTodos([newTodo, ...todos]);
  };

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

  const deleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  return (
    <div>
      <h1>قائمة المهامh1>
      <TodoInput
        inputValue={inputValue}
        setInputValue={setInputValue}
        addTodo={addTodo}
      />
      <TodoList
        todos={todos}
        toggleComplete={toggleComplete}
        deleteTodo={deleteTodo}
      />
    div>
  );
}

تحسين تجربة المستخدم: إضافة ميزات متقدمة

1. تصفية المهام

إضافة إمكانية عرض جميع المهام، المهام المكتملة فقط، أو المهام غير المكتملة، مما يسهل على المستخدم التركيز على المهام المطلوبة.

jsx
CopyEdit
function TodoFooter({ filter, setFilter, remaining }) {
  return (
    <div>
      <span>{remaining} مهمة متبقيةspan>
      <button onClick={() => setFilter('all')}>الكلbutton>
      <button onClick={() => setFilter('active')}>النشطةbutton>
      <button onClick={() => setFilter('completed')}>المكتملةbutton>
    div>
  );
}

2. تخزين المهام محلياً (Local Storage)

لتجنب فقدان المهام بعد تحديث الصفحة، يمكن استخدام Local Storage لتخزين المهام واسترجاعها عند تحميل التطبيق.

jsx
CopyEdit
import { useEffect } from 'react';

function App() {
  // ...الحالة والوظائف كما في السابق

  useEffect(() => {
    const storedTodos = JSON.parse(localStorage.getItem('todos'));
    if (storedTodos) {
      setTodos(storedTodos);
    }
  }, []);

  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  // باقي الكود
}

إضافة خاصية تحرير المهام

لجعل التطبيق أكثر تفاعلية، يمكن إضافة إمكانية تعديل نص المهمة مباشرة من الواجهة، وذلك بإضافة حالة تعديل لكل مهمة.

jsx
CopyEdit
function TodoItem({ todo, toggleComplete, deleteTodo, editTodo }) {
  const [isEditing, setIsEditing] = useState(false);
  const [editText, setEditText] = useState(todo.text);

  const handleEdit = () => {
    if (isEditing && editText.trim() !== '') {
      editTodo(todo.id, editText);
    }
    setIsEditing(!isEditing);
  };

  return (
    <li style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => toggleComplete(todo.id)}
      />
      {isEditing ? (
        <input
          type="text"
          value={editText}
          onChange={(e) => setEditText(e.target.value)}
        />
      ) : (
        todo.text
      )}
      <button onClick={handleEdit}>{isEditing ? 'حفظ' : 'تعديل'}button>
      <button onClick={() => deleteTodo(todo.id)}>حذفbutton>
    li>
  );
}

وفي المكون الرئيسي:

jsx
CopyEdit
const editTodo = (id, newText) => {
  setTodos(
    todos.map((todo) => (todo.id === id ? { ...todo, text: newText } : todo))
  );
};

تحسينات إضافية على واجهة المستخدم (UI/UX)

استخدام CSS لتجميل التطبيق

تقديم تصميم بسيط ومرتب مع ألوان مناسبة، تباعد جيد، وأزرار واضحة يمكن أن يرفع من جودة تجربة المستخدم.

css
CopyEdit
body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  padding: 20px;
}

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

form {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

input[type="text"] {
  padding: 10px;
  font-size: 16px;
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px 15px;
  margin-left: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  background: white;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

الجدول التوضيحي لهيكلة المكونات والوظائف

أفضل الممارسات في بناء تطبيقات React

• استخدام المكونات الصغيرة والمخصصة: تجزئة الواجهة إلى مكونات صغيرة يسهل إدارتها وصيانتها.

• إدارة الحالة بشكل فعال: استخدام Hooks مثل useState وuseEffect بذكاء لتقليل التعقيد.

• تخزين البيانات المحلية: عبر Local Storage لضمان حفظ البيانات بين الجلسات.

• تنظيم الأكواد: فصل المكونات في ملفات مستقلة لسهولة التوسع.

• اختبار التطبيق: استخدام أدوات مثل Jest وReact Testing Library للتأكد من أن الوظائف تعمل كما هو متوقع.

• تحسين الأداء: تجنب إعادة الرندر غير الضرورية، واستخدام React.memo عند الحاجة.

خاتمة تقنية

إن بناء تطبيق قائمة مهام باستخدام React يمثل مشروعًا عمليًا متكاملاً يجمع بين المفاهيم النظرية والتطبيقية لتطوير واجهات المستخدم الحديثة. يتيح هذا المشروع فهمًا معمقًا لكيفية هيكلة المكونات، إدارة الحالة، التعامل مع الأحداث، وتحسين تجربة المستخدم باستخدام تقنيات الويب المتقدمة. كما أن التطبيق يمكن تطويره لاحقًا ليشمل ميزات متقدمة مثل التزامن مع قواعد البيانات، دعم المستخدمين المتعددين، وإمكانيات التنبيه والتذكير، مما يجعله قاعدة متينة للتعلم والتطوير في مجال React وتطبيقات الويب.

المصادر

1. React Documentation – https://reactjs.org/docs/getting-started.html

2. Local Storage Guide – https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

بهذا الشكل، يكون المقال قد غطى موضوع إنشاء تطبيق قائمة مهام باستخدام React بشكل مفصل وعميق، مع التركيز على الجوانب البرمجية والتقنية المهمة، بما يتناسب مع متطلبات المقالات العلمية والمهنية.