Menu

Tech

ابدأ التعلم

العربية

ملخص: الشروط والمصفوفات

جزء من قسم الأساسيات في رحلة React على Coddy — الدرس 38 من 42.

التحدي

متوسط

ملخص الفصل: قم بإنشاء لوحة مهام من البيانات، باستخدام كل ما تعلمته في هذا الفصل.

يحدد المكون مصفوفة tasks. داخل <ul id="done-list">، قم بعمل render لعنصر <li> واحد لكل مهمة تكون حالة الـ done لها صحيحة: استخدم filter أولاً، ثم map.
يعرض كل عنصر <li> الـ text الخاص بالمهمة ويستخدم الـ id الخاص بها كـ key.
أعلى القائمة، استخدم && لعمل render لعنصر <span> مع id="badge" يعرض النص 2 done (قم بإنشاء الرقم من length الخاصة بالمصفوفة التي تم تطبيق الفلترة عليها!)، ولكن فقط عندما تكون هناك مهمة واحدة على الأقل حلت حالة الـ done لها.

جرّب بنفسك

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>

جميع دروس الأساسيات

1التعرف على React

ما هو React؟مكونك الأول قاعدة الأب الواحد JSX ليس HTML ملخص: التعرف على React

4الـ Props

ما هي الـ Props؟تمرين تمرير الـ Props خاصيتان (Two Props)المكون نفسه، بيانات جديدة خاصية Children Prop ملخص: الـ Props

7الشروط والمصفوفات

العرض الشرطي الثلاثي (Ternary Rendering)العرض باستخدام &&عرض قائمة أهمية المفاتيح (Keys)التصفية ثم التعيين (Filter, Then Map)ملخص: الشروط والمصفوفات

2تعبيرات JSX

الأقواس المعقوفة العمليات الرياضية داخل الأقواس الأقواس في السمات استدعاء الدوال في JSX ملخص: تعبيرات JSX

5الحالة والأحداث

ما هي الحالة (State)؟عداد النقرات العد بخطوات التبديل باستخدام الحالة حالة مستقلة ملخص: الحالة والأحداث

8مشروع: بطاقة الملف الشخصي

الخطوة 1: هيكل البطاقة الخطوة 2: بطاقة مع Props الخطوة 3: زر الإعجاب الخطوة 4: تبديل المتابعة

3المكونات

لبنات البناء المكون الثاني الخاص بك إعادة استخدام المكونات تجميع صفحة ملخص: المكونات

6النماذج المدخلات

المدخلات المدارة تكرار المدخلات عداد الحروف زر المسح ملخص: النماذج والمدخلات