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

Name: React.js: المكوّنات
Author: Tony Davydets

ستغطي هذه الوحدة دوال ES6+ مع JSX لتقديم المكونات، وخاصيات المكونات، وحالة المكونات، والتي هي مفاهيم أساسية في React مكتبة JavaScript الشهيرة لبناء تطبيقات…

شاهد الدرس الأول مجانًا — احصل على وصول كامل إلى جميع الدروس الـ1.

اطلب عرضًا توضيحيًا تسجيل الدخول

دورة تدريبية: عند الطلب

مرحبًا، اسمي توني، وفي هذه الدروس ستتعرف على المكونات. في هذا الدرس، سوف نلقي نظرة على دوال 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 كقاعدة. في درسنا التالي، سنلقي نظرة على ماهية خاصيات المكون، والغرض منها، وكيف يتم استخدامها. شكرا لمشاهدتك.

مقدِّم الخدمة : Tony Davydets 1 الدروس · 18m باللغات: العربية, الألمانية, الإنجليزية, الإسبانية, الفرنسية, البرتغالية, Chinese

وصف الدورة

ستغطي هذه الوحدة دوال ES6+ مع JSX لتقديم المكونات، وخاصيات المكونات، وحالة المكونات، والتي هي مفاهيم أساسية في React مكتبة JavaScript الشهيرة لبناء تطبيقات الويب الحديثة.

مكونات React هي لبنات بناء تطبيق React. يمكن كتابة هذه المكونات كدوال ES6+ مع JSX والتي تتيح للمطورين كتابة كود أكثر إيجازًا وقابلة للقراءة. JSX هو امتداد بناء الجملة لـ JavaScript يسمح بكتابة عناصر تشبه HTML بالكود. مع JSX ، يمكن للمطورين إنشاء مكونات مخصصة يمكن تقديمها إلى DOM. الحالة هي ميزة تتيح مكونات React لتخزين البيانات التي يمكن أن تتغير بمرور الوقت. هذا يسمح بتحديثات ديناميكية وتفاعلية لبيانات المكون. يمكن تهيئة الحالة في مُنشئ (كونستركتور) أو باستخدام خطاف الحالةState Hook وهي ميزة تم تقديمها في React 16.8.

يعد فهم دوال ES6+ مع JSX وخاصيات المكون وحالة المكون ضرورية لبناء تطبيقات الويب الحديثة باستخدام React. تسمح هذه المفاهيم بمكونات قابلة لإعادة الاستخدام والتفاعلية التي يمكن تخصيصها ببيانات مختلفة.

ما ستتعلمه

استخدام وظائف ES6+ مع JSX لعرض مكونات React
كتابة صيغة JSX لإنشاء مكونات مخصصة يتم عرضها في DOM
تمرير البيانات إلى المكونات باستخدام props الخاصة بالمكون
إدارة حالة المكون لتخزين البيانات التي تتغير بمرور الوقت
تهيئة الحالة في constructor أو باستخدام state hook الذي تم تقديمه في React 16.8

النقاط الرئيسية

مكونات React هي لبنات البناء لتطبيق React ويمكن كتابتها كوظائف ES6+ باستخدام JSX.
JSX هو امتداد لصيغة JavaScript يتيح كتابة عناصر تشبه HTML في الكود البرمجي.
تسمح الحالة لمكونات React بتخزين البيانات التي يمكن أن تتغير بمرور الوقت، مما يتيح تحديثات ديناميكية وتفاعلية.
يمكن تهيئة الحالة في constructor أو باستخدام state hook، وهي ميزة تم تقديمها في React 16.8.
يتيح فهم وظائف ES6+ مع JSX، وprops المكون، وحالة المكون إنشاء مكونات تفاعلية وقابلة لإعادة الاستخدام يمكن تخصيصها ببيانات مختلفة.

الأسئلة الشائعة

ماذا تغطي وحدة React.js هذه؟

تغطي هذه الوحدة وظائف ES6+ مع JSX لعرض المكونات، وprops المكون، وحالة المكون، وهي مفاهيم أساسية في React، وهي مكتبة JavaScript لبناء تطبيقات الويب الحديثة.

ما هي JSX في React؟

JSX هي امتداد لصيغة JavaScript يتيح كتابة عناصر تشبه HTML في الكود البرمجي. وبواسطة JSX، يمكن للمطورين إنشاء مكونات مخصصة يمكن عرضها في DOM.

كيف يمكن ضبط الحالة في مكون React؟

يمكن تهيئة الحالة في constructor أو باستخدام state hook، وهي ميزة تم تقديمها في React 16.8. وتسمح الحالة للمكونات بتخزين البيانات التي يمكن أن تتغير بمرور الوقت.

لماذا تعد props المكون والحالة مهمتين؟

يعد فهم وظائف ES6+ مع JSX، وprops المكون، وحالة المكون أمراً ضرورياً لبناء تطبيقات الويب الحديثة باستخدام React، مما يسمح بمكونات تفاعلية وقابلة لإعادة الاستخدام يمكن تخصيصها ببيانات مختلفة.

ما هي الدروس المدرجة في هذه الوحدة؟

تتضمن الوحدة ثلاثة دروس: وظائف ES6+ مع JSX لعرض المكونات، وprops المكون، وحالة المكون.