مجلدات الميزات والمكوّنات المرئية مقابل المركبة
اعتمد مجلدات الميزات وقسّم المكوّنات: بدائيات واجهة صغيرة قابلة لإعادة الاستخدام مقابل مكوّنات مركبة خاصة بالميزة تنسّق الحالة والبيانات.
مجلدات الميزات والمكوّنات المرئية مقابل المركبة درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
لماذا تهم البنية؟
الهدف: تنظيم الشيفرة بحيث تتوسع.
- تجمع مجلدات الميزات الشيفرة ذات الصلة
- تُعد بدائيات واجهة المستخدم وحدات بناء مرئية صغيرة
- تربط المكوّنات المركبة هذه الوحدات معًا
مجلدات تتمحور حول الميزة
- features/checkout/ (المسارات والمكوّنات المركبة والخطافات والاختبارات)
- ui/ (البدائيات: Button وInput وCard)
- lib/ (الأدوات المساعدة)
- assets/ (الأيقونات والأنماط)
بدائية واجهة المستخدم: Button
أنشئ بدائية Button صغيرة: مرئية وقابلة لإعادة الاستخدام، ومن دون جلب بيانات.
<div id="root"></div>مكوّن مركب: QuantityCard
يربط المكوّن المركب البدائيات والحالة لتنفيذ مهمة تخص ميزة.
<div id="root"></div>مجلد الميزة قيد الاستخدام
في مجلد features/checkout، يركّب المكوّن CheckoutPanel البدائيات والمكوّنات المركبة.
<div id="root"></div>نصائح وقائمة تحقق
- حافظ على صغر البدائيات وقابليتها لإعادة الاستخدام
- دع المكوّنات المركبة تحتفظ بحالة الميزة
- فضّل مجلدات الميزات على الحاويات العامة الضخمة
اختبار البدائي مقابل المركب
خلاصة
خلاصة: نظّم الشيفرة حسب الميزة، وابنِ بدائيات صغيرة لواجهة المستخدم، ثم اجمعها في مكوّنات مركبة تملك حالة الميزة.
الأسئلة الشائعة
هل درس «مجلدات الميزات والمكوّنات المرئية مقابل المركبة» مجاني؟
نعم — نص درس «مجلدات الميزات والمكوّنات المرئية مقابل المركبة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «مجلدات الميزات والمكوّنات المرئية مقابل المركبة»؟
اعتمد مجلدات الميزات وقسّم المكوّنات: بدائيات واجهة صغيرة قابلة لإعادة الاستخدام مقابل مكوّنات مركبة خاصة بالميزة تنسّق الحالة والبيانات. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.
كم من الوقت يستغرق درس «مجلدات الميزات والمكوّنات المرئية مقابل المركبة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- مجلدات الميزات والمكوّنات المرئية مقابل المركبة
- اصطلاحات مجلد Hooks ووضع الاختبارات بجانب الشيفرة
- إرشادات إعادة الهيكلة