React.js: المكوّنات

مرحبًا، اسمي توني، وفي هذه الدروس ستتعرف على المكونات. في هذا الدرس، سوف نلقي نظرة على دوال ES6 plus مع JSX لتقديم أو تصيير المكونات. وأردت أن ألفت الانتباه إلى هذا الأمر لأنه مهم للغاية. في سيناريو العالم الحقيقي، لن تضع كل مكون فردي في مجلد واحد، لأنه كما يمكنك أن تتخيل، يمكن أن يصبح جامحًا بسرعة. ما الذي نسعى إليه بالنسبة للتطبيقات المهنية في الوضع في العالم الحقيقي هو شيء يبدو هكذا. وكما ترون، فهو لم يعد هيكلًا مسطحًا. جميع مكوناتنا موجودة داخل مجلد خاص بها، يسمى المكونات، ولكل مكون مجلد خاص به. بنية المجلد هي بحيث يكون تعريف المكون في ملف JS أو JSX، وحل التصميم، إذا لزم الأمر، موجود داخل ملف ملف CSS. الآن، في بيئة احترافية، سيكون هناك أيضًا ملف test. هنا أو ملف spec.، والذي قد يحتوي على اختبارات الوحدة. لن نقلق بشأن ذلك في الوقت الحالي، ولكن فقط لإعلامك، إذا رأيت هذا في العالم الحقيقي، من المحتمل جدًا أن تبدو الأمور هكذا. الآن، لأغراضنا، ما سنفعله هو أننا سنقوم بإنشاء تطبيق والذي سيحتفظ بقائمة بكل الأشياء التي يتعين علينا القيام بها في ذلك اليوم، وسيكون لدينا القدرة على إزالتها من قائمتنا واحدًا تلو الآخر بينما نأمل أن نكملها. هذا المكون بالذات سيكون مجرد قائمة بجميع المهام لدينا. الآن، أولًا، سنقوم باستيراد React من React. أنها مهمة جدا. React عالمية (عامة) للغاية. نحن في حاجة إليها لتطوير جميع تطبيقاتنا. وهنا، سنحصل على المكون الخاص بنا. يسمى المكون الذي نقوم ببنائه بقائمة المهام، وسوف يأخذ الوسيطات الثلاث التالية. المهام، دعنا نغلق هذا حتى لا يشكو. وبالتالي فإن المهام هي مجموعة السجلات، التي سنقوم باجتيازها وإخراج المهام واحدة تلو الأخرى. HandleCheck هي دالة سيتم تفعيلها عندما نضع علامة اختيار تتوافق مع كل مهمة من مهامنا. وHandleDelete هي دالة أخرى سيتم إطلاقها عندما نحاول بالفعل حذف مهمة من قائمتنا. الآن، كيف يمكننا التصيير الشرطي داخل React؟ سنقوم بالتصيير المشروط داخل React عدم استخدام عبارة if -else التقليدية لأن JSX التسميات لن تسمح بذلك سوف نستخدم بيان الثالثي Tertiary Stastement. ربما تكون قد شاهدت بيانًا ثالثيًا من قبل، وهذا هو تنسيقه. دعنا نفعل ذلك أعلاه حتى لا نفسد الدالة لدينا، كمثال فقط. لذا فإن الشرط الذي نختبره هو دائمًا الوسيطة الأولى في الهيكل. إذا كان هذا الشرط صحيحًا، فإذا كان جزء if من بياننا صحيحًا، فهذا هو الجزء من التعليمات البرمجية الذي سيتم تشغيله. وإذا كان خطأ، فهذا هو الجزء من التعليمات البرمجية الذي سيتم تشغيله. سنأخذ نفس الشيء ونقوم بتمديده إلى نظام React البيئي الخاص بنا لجعله يبدو هكذا. لذلك لدينا مجموعة السجلات ستكون عبارة عن قائمة غير مرتبة، وإذا كان طولها أقل من واحد، فلنجعل هذا أكثر قابلية للقراءة من الناحية البشرية ونقول أن طولها صفر. الثلاثي يساوي أمر بالغ الأهمية. إذا قمت بعمل ضعف يساوي الصفر، وهذا يعني أن هذا يساوي ذلك أيضًا. لذا فهو في الأساس يقارن فقط القيمة، لكنه لا يقارن النوع. لكننا لسنا نهتم بالحرف صفر. بل الرقم صفر. لذا، فإننا نقوم دائمًا بإجراء علامة يساوي ثلاثية للمقارنة. يجعلها من النوع الآمن. إذن ما سنفعله هنا هو أنه إذا لم يتم عرض أي شيء، سنقدم للمستخدم النص الذي يخبرهم بشكل أساسي، مهلا، لا يتم عرض أي شيء. لا يوجد حاليا أي شيء في جدول أعمالك. هل ترغب في إضافة حدث؟ وإذا ظهر شيء وهذا هو المكان الذي تصبح فيه الأمور مثيرة للاهتمام، وهذا هو المكان الذي سنقوم فيه بتكرار مجموعة السجلات التي نمررها كوسيطة أولى لهذه الدالة. دعنا نلقي نظرة على ما يبدو عليه ذلك. رمز الحذف. لنستورد أيقوناتي حتى لا تتذمر. سنقوم بذلك في الأعلى ونحذف مثالنا. إذن الجزء الآخر من الجملة الثالثة لدينا الآن لديه دالة الخريطة Map. هذه هي الدالة التي نمررها إلى دالة الخريطة Map، وما ستفعله هو أنها ستنتج لنا لغة HTML، والتي ستكون في الأساس عبارة عن LI أو عنصر قائمة للقائمة غير المرتبة التي أعلناها في بداية هذا. دعنا نعيد هذا خطوة واحدة إلى الوراء. ها نحن ذا. وكما ترون، نحن في الأساس نخرج هذا كعنصر واحد في كل مرة. سنكون قادرين على رؤية شكله بمجرد تشغيله فعليًا في الجزء التالي من درسنا. وكما ترون، فإننا نقوم بإخراج المهمة. هناك مربع اختيار يتوافق معه. وهنا النص هذا يقول في الواقع ما هي المهمة. وهذا هو الزر الذي يتيح لنا حذفها. مرة أخرى، نحن نحاول فقط تصور المهمة وكيف ستبدو. سنلقي نظرة على ذلك في الجزء التالي من دورتنا. الآن، أخيرًا، كل مكون على حدة، لا يمكننا أن ننسى القيام بذلك. نحن نقوم بتصدير المكون الذي أنشأناه للتو، ونحن نقوم بتصديره كإعداد افتراضي. الآن، ماذا يعني أننا نقوم بتصدير هذا كافتراضي؟ وهذا يعني أنه عندما نستهلكه داخل مكون التطبيق الخاص بنا والذي سيحتوي على تعريف لكامل التطبيق لدينا، سنقوم باستيراده بهذه الطريقة بدون الأقواس المتعرجة. الآن، لأننا نستورده كإعداد افتراضي، يمكننا حقًا أن نطلق عليه ما نريد، وأنها سوف لا تزال تعمل. إذا أردنا تصديرها كتصدير مسمى مثل هذا، سنكون قادرين على استيراده بأقواس متعرجة وبالاسم فقط على وجه التحديد. قد تسأل لماذا لم يتم ذلك؟ يبدو أكثر أمانا. حسنًا، لأنه في React، غالبًا ما نغلف الكائن الذي أنشأناه ببعض الدوال الأخرى. سنتناول ذلك لاحقًا، ولكن يمكننا في الواقع أن نقول شيئًا ما ونمنحه دالة إضافية، وظيفة منطقية. ولكن هذا هو السبب في الأساس وراء تسميته لا تتم عمليات التصدير والاستيراد داخل React أو Next .js أو أي شيء يعتمد على React كقاعدة. في درسنا التالي، سنلقي نظرة على ماهية خاصيات المكون، والغرض منها، وكيف يتم استخدامها. شكرا لمشاهدتك.