Menu

Tech

ابدأ التعلم

العربية

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

جزء من قسم الأساسيات في رحلة 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النماذج المدخلات

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