مارس مهاراتك في React باستخدام نموذج التطبيق الكلاسيكي هذا سهل الفهم.

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

اتبع عملية إنشاء قائمة مهام بسيطة باستخدام React ، وعزز فهمك لأساسيات React.

المتطلبات الأساسية لإنشاء قائمة مهام

قبل أن تبدأ هذا المشروع ، هناك عدة متطلبات. يجب أن يكون لديك فهم أساسي لما يلي ، HTML ، CSS ، JavaScript ، ES6، و React. يجب أن يكون لديك Node.js و npm ، مدير حزم JavaScript. تحتاج أيضًا إلى محرر كود ، مثل Visual Studio Code.

إليك CSS التي سيستخدمها هذا المشروع:

/ * styles.css * /
.برنامج {
خط العائلة: بلا الرقيق;
عرض: ثني;
تبرير المحتوى: مركز;
محاذاة العناصر: مركز;
ارتفاع: 100ه;
}
.لكى يفعل {
لون الخلفية: قمح;
محاذاة النص: مركز;
عرض: 50%;
حشوة: 20مقصف;
مربع الظل: rgba(0, 0, 0, 0.24) 0مقصف 3مقصف 8مقصف;
هامِش: آلي;
}


ماي {
قائمة على غرار نوع: لا أحد;
حشوة: 10مقصف;
هامِش: 0;
}


زر {
عرض: 70مقصف;
ارتفاع: 35مقصف;
لون الخلفية: بني رملي;
حدود: لا أحد;
حجم الخط: 15مقصف;
وزن الخط: 800;
نصف قطر الحد: 4مقصف;
مربع الظل: rgba(0, 0, 0, 0.24) 0مقصف 3مقصف 8مقصف;
}







instagram viewer



.مدخل {
حدود: لا أحد;
عرض: 340مقصف;
ارتفاع: 35مقصف;
نصف قطر الحد: 9مقصف;
محاذاة النص: مركز;
مربع الظل: rgba(0, 0, 0, 0.24) 0مقصف 3مقصف 8مقصف;
}


.قمة {
عرض: ثني;
تبرير المحتوى: مركز;
فجوة: 12مقصف;
}


لي {
عرض: ثني;
تبرير المحتوى: مسافات متساوية;
محاذاة العناصر: مركز;
حشوة: 10مقصف;
}
لي:قبل {
محتوى: "*";
الهامش الأيمن: 5مقصف;
}

1. إعداد بيئة المشروع

تتضمن هذه المرحلة جميع الأوامر والملفات اللازمة لإعداد المشروع. للبدء ، قم بإنشاء مشروع React جديد. افتح Terminal وقم بتشغيل هذا الأمر:

npx إنشاء قائمة مهام التطبيق

يستغرق هذا بضع دقائق لتثبيت جميع الملفات المطلوبة والحزم أيضًا. يقوم بإنشاء تطبيق React جديد يسمى todo-list. بمجرد أن ترى شيئًا كهذا فأنت على الطريق الصحيح:

انتقل إلى دليل مشروعك الذي تم إنشاؤه حديثًا باستخدام هذا الأمر:

قائمة المهام على القرص المضغوط

قم بتشغيل مشروعك محليًا باستخدام هذا الأمر:

بدء npm

ثم اعرض المشروع في متصفحك على http://localhost: 3000/.

في مجلد src الخاص بمشروعك ، هناك بضعة ملفات لا تحتاجها. احذف هذه الملفات: App.css, App.test.js, logo.svg, reportWebVitals.js, setupTests.js.

تأكد من أنك تبحث عن عبارات الاستيراد في الملفات المتاحة وقم بإزالة أي إشارات إلى الملفات المحذوفة.

2. قم بإنشاء مكون TodoList

هذا هو المكون الذي سنقوم بتنفيذ جميع الرموز اللازمة لقائمة المهام. قم بإنشاء ملف باسم "TodoList.js" في مجلد src الخاص بك. ثم لاختبار أن كل شيء يعمل كما ينبغي ، أضف الكود التالي:

يستورد تتفاعل من'تتفاعل';
مقدار ثابت TodoList = () => {
يعود (




مرحبًا بالعالم </h2>
 </div>
 );
};


يصدّرتقصير عمل قائمة؛

افتح ملف App.js الخاص بك ، وقم باستيراد مكون TodoList ، وقم بعرضه داخل مكون التطبيق. سيبدو شيئا من هذا القبيل:

يستورد تتفاعل من'تتفاعل';
يستورد"./styles.css"
يستورد عمل قائمة من'./عمل قائمة';
مقدار ثابت التطبيق = () => {
يعود (





 </div>
 );
};
يصدّرتقصير برنامج؛

انتقل إلى المستعرض المحلي الذي يحتوي على المضيف المحلي: 3000 قيد التشغيل وتحقق لترى "Hello World" مكتوبًا بجرأة. الامور جيدة؟ إلى الخطوة التالية.

3. التعامل مع الإدخال وتغيير المدخلات

تمكنك هذه الخطوة من تشغيل حدث عندما تكتب مهمة في مربع الإدخال. استورد الخطاف useState من حزمة React الخاصة بك. useState هو خطاف React يسمح لك بإدارة الحالة بكفاءة.

يستورد رد فعل ، {useState} من'تتفاعل';

استخدم الخطاف useState لإنشاء متغير حالة باسم "inputTask" بقيمة أولية لسلسلة فارغة. بالإضافة إلى ذلك ، قم بتعيين وظيفة "setInputTask" لتحديث قيمة "inputTask" بناءً على إدخال المستخدم.

مقدار ثابت [inputTask، setInputTask] = useState ("");

قم بإنشاء دالة تسمى “handleInputChange” ، مع الأخذ في الاعتبار معلمة الحدث. يجب أن تقوم بتحديث حالة inputTask باستخدام الدالة setInputTask. قم بالوصول إلى قيمة هدف الحدث باستخدام event.target.value. سيتم تشغيل هذا كلما تغيرت قيمة حقل الإدخال.

مقدار ثابت handleInputChange = (حدث) => {
 setInputTask (event.target.value) ،
};

قم بإرجاع عنصرين من JSX. الأول هو العنوان الذي يقرأ "My Todo-List" ، يمكنك أن تقرر أي عنوان تريده. قم بتضمين بعض السمات لعناصر الإدخال الخاصة بك. اكتب = "نص": هذا يحدد نوع الإدخال كنص ، القيمة = {inputTask}: يربط هذا قيمة حقل الإدخال بمتغير حالة inputTask ، مما يضمن أنه يعكس القيمة الحالية.onChange = {handleInputChange}: هذا يستدعي وظيفة handleInputChange عندما تتغير قيمة حقل الإدخال ، محدثًا حالة الإدخال.

"لكى يفعل">
قائمة المهام الخاصة بي </h1>
"قمة">
"مدخل" اكتب ="نص" القيمة = {inputTask}
 onChange = {handleInputChange} placeholder ="أدخل مهمة" />

المضي قدما ، قم بإنشاء زر سيضيف المهمة المدخلة إلى القائمة.

في هذه المرحلة ، هذا هو الشكل الذي ستبدو عليه مخرجات المتصفح.

4. إضافة وظائف إلى زر "إضافة"

استخدم ال useState ربط لإنشاء متغير حالة يسمى "قائمة" بقيمة أولية لمصفوفة فارغة. يخزن المتغير "setList" مجموعة المهام بناءً على مدخلات المستخدم.

مقدار ثابت [list، setList] = useState ([]) ؛

قم بإنشاء handleAddTodo لوظيفة يتم تشغيلها عندما ينقر المستخدم على زر "إضافة" لإضافة مهمة جديدة. يأخذ المعلمة todo ، التي تمثل المهمة الجديدة التي أدخلها المستخدم. بعد ذلك ، قم بإنشاء كائن newTask بمعرف فريد تم إنشاؤه باستخدام Math.random () ، وخاصية todo التي تحتوي على نص الإدخال.

من الآن فصاعدًا ، قم بتحديث حالة القائمة باستخدام عامل الانتشار [… list] لإنشاء مصفوفة جديدة بالمهام الموجودة في القائمة. إلحاق newTask بنهاية المصفوفة. هذا يضمن أننا لا نغير مصفوفة الحالة الأصلية. أخيرًا ، قم بإعادة تعيين حالة inputTask إلى سلسلة فارغة ، ومسح حقل الإدخال عندما ينقر المستخدم على الزر.

مقدار ثابت handleAddTodo = (لكى يفعل) => {
مقدار ثابت newTask = {
 بطاقة تعريف: رياضيات.عشوائي()،
 ما يجب القيام به: ما يجب القيام به
 };
 setList ([... list، newTask])؛
 setInputTask ('');
};

تشمل عند النقر السمة إلى عنصر الزر مع النص "إضافة". عند النقر فوقه ، يقوم بتشغيل ملف مقبض وظيفة ، والتي تضيف مهمة جديدة إلى حالة القائمة

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

5. أضف زر الحذف

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

داخل الوظيفة ، استخدم التابع filter في مصفوفة القائمة لإنشاء مصفوفة جديدة newList تستبعد المهمة ذات المعرف المطابق. يتكرر أسلوب التصفية خلال كل عنصر في مصفوفة القائمة ويعيد مصفوفة جديدة تحتوي فقط على العناصر التي تفي بالشرط المحدد. في هذه الحالة ، تحقق مما إذا كان معرف كل مهمة يساوي المعرف الذي تم تمريره كمعامل. قم بتحديث حالة القائمة عن طريق استدعاء setList (newList) ، والتي تعين الحالة إلى المصفوفة المصفاة الجديدة ، مما يؤدي إلى إزالة المهمة بشكل فعال مع المعرف المطابق من القائمة.

مقدار ثابت handleDeleteTodo = (بطاقة تعريف) => {
مقدار ثابت newList = list.filter ((لكى يفعل) =>
 todo.id! == معرف
 );
 setList (newList) ؛ 
};

استخدم التابع map للتكرار فوق كل عنصر في مصفوفة القائمة وإرجاع مصفوفة جديدة. ثم قم بإنشاء ملف

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

    • الوصول إلى خاصية todo لكل كائن todo. أخيرًا ، قم بإنشاء زر عند النقر عليه ، يقوم بتشغيل وظيفة handleDeleteTodo بمعرف المهمة المقابلة كمعامل ، مما يسمح لنا بحذف المهمة من القائمة.

    <ماي>
    {list.map ((لكى يفعل) => (
    <لياسم الطبقة="مهمة"مفتاح={todo.id}>
     {todo.todo}
    <زرعند النقر={() => handleDeleteTodo (todo.id)}> حذفزر>
    لي>
    ))}
    ماي>

    هكذا يجب أن تبدو شفرتك النهائية كما يلي:

    يستورد رد فعل ، {useState} من'تتفاعل';
    مقدار ثابت TodoList = () => {
    مقدار ثابت [inputTask، setInputTask] = useState ('');
    مقدار ثابت [قائمة، setList] = useState ([]) ،
    

    مقدار ثابت handleAddTodo = () => {
    مقدار ثابت newTask = {
     بطاقة تعريف: رياضيات.عشوائي()،
     ما يجب القيام به: inputTask
     };
    

     اعد القائمة([...قائمة، مهمة جديدة])؛
     setInputTask ('');
     };
    

    مقدار ثابت handleDeleteTodo = (بطاقة تعريف) => {
    مقدار ثابت newList = list.filter ((لكى يفعل) => todo.id! == معرف) ؛
     setList (newList) ؛
     };
    

    مقدار ثابت handleInputChange = (حدث) => {
    setInputTask(حدث.هدف.قيمة);
     };
    

    يعود (
    <شعبةاسم الطبقة="لكى يفعل">
    

    إلى-يفعلقائمة

    

    <شعبةاسم الطبقة="قمة">
    <مدخلاسم الطبقة="مدخل"يكتب="نص"قيمة={inputTask}
     onChange = {handleInputChange} placeholder ="أدخل مهمة" />
    

    <زراسم الطبقة="btn"عند النقر={handleAddTodo}>يضيفزر>
    شعبة>
    

    <ماي>
     {list.map ((لكى يفعل) => (
    <لياسم الطبقة="مهمة"مفتاح={todo.id}>
     {todo.todo}
    <زرعند النقر={() => handleDeleteTodo (todo.id)}>
    يمسح
    زر>
    لي>
     ))}
    ماي>
    شعبة>
     );
    };
    يصدّرتقصير عمل قائمة؛

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

    تهانينا ، لقد قمت بإنشاء قائمة مهام تضيف وتحذف المهام. يمكنك الذهاب إلى أبعد من ذلك بإضافة التصميم والمزيد من الوظائف.

    استخدم مشروعات العالم الحقيقي لتتعلم رد الفعل

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