ملخص: النماذج والمدخلات

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

التحدي

متوسط

ملخص الفصل. قم بإنشاء أداة اختيار اسم مستعار (nickname) باستخدام حلقة المدخلات الموجهة (controlled input) بالكامل: اكتب، شاهد التحديث المباشر، وامسح.

اجعل المدخل (id="nick") موجهًا باستخدام حالة nick، وتبدأ فارغة.
تعرض الفقرة (id="meter") النص N of 12 حيث تمثل N الطول الحالي لاسم المستعار (مثال: كتابة Coddy ← 5 of 12)، وهي قيمة مشتقة وليست مخزنة.
زر id="clear" يقوم بتفريغ الاسم المستعار، والحقل معه.

جرّب بنفسك

<!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النماذج المدخلات

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