مفاهيم التوجيه من جانب العميل
تعلّم مفاهيم توجيه SPA: تربط المسارات بالواجهات، ويحدّث التنقل عنوان URL والواجهة دون إعادة تحميل كاملة؛ مع عرض تجريبي بسيط قائم على hash.
مفاهيم التوجيه من جانب العميل درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
ما التوجيه من جهة العميل؟
الهدف: تعرّف كيف يتيح التوجيه من جهة العميل للتطبيقات التبديل بين الشاشات دون إعادة تحميل الصفحة.
- SPA مقابل إعادة تحميل الصفحة بالكامل
- ربط المسار بالعرض
- تحديثات السجل
SPA مقابل MPA
SPA: صفحة HTML واحدة، وتبدّل JavaScript العروض. MPA: يرسل الخادم صفحة جديدة لكل عنوان URL. تبدو تطبيقات SPA أسرع لأن التنقل فيها يتجنب إعادة التحميل بالكامل.
المسارات والمعلمات والمسار النشط
يحدد المسار عرضًا معينًا، مثل /about. وتحمل المعلمات البيانات، مثل /users/42. ميّز الرابط الحالي بوصفه نشطًا لتوضيح الصفحة الحالية.
عرض توضيحي: توجيه بسيط
جهاز توجيه صغير يعتمد على hash: تحدّث الروابط #path؛ ويستمع التطبيق إلى hashchange ويصيّر العرض المطابق.
<div id="root"></div>
السجل والتنقل
تحدّث أجهزة التوجيه عنوان URL والسجل، ولذلك يعمل الزران السابق والتالي. وتتغير العروض فورًا دون إعادة تحميل المستند بالكامل.
نصائح وخطوات تالية
نصائح:
- اجعل الروابط النشطة واضحة.
- تعامل مع المسارات غير المعروفة (404).
- استخدم مكتبة لاحقًا للمسارات المتداخلة والمعلمات.
التحقق من مفهوم التوجيه
مراجعة
مراجعة: يربط التوجيه من جهة العميل المسارات بـالعروض، ويحدّث عنوان URL والسجل، ويتجنب إعادة التحميل بالكامل لتوفير تنقل سريع.
الأسئلة الشائعة
هل درس «مفاهيم التوجيه من جانب العميل» مجاني؟
نعم — نص درس «مفاهيم التوجيه من جانب العميل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «مفاهيم التوجيه من جانب العميل»؟
تعلّم مفاهيم توجيه SPA: تربط المسارات بالواجهات، ويحدّث التنقل عنوان URL والواجهة دون إعادة تحميل كاملة؛ مع عرض تجريبي بسيط قائم على hash. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.
كم من الوقت يستغرق درس «مفاهيم التوجيه من جانب العميل»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- مفاهيم التوجيه من جانب العميل
- المسارات المتداخلة ومعلمات المسار
- روابط التنقل والحالات النشطة