إعداد التمرين المعملي ل React على Windows

  • مقالة

إشعار

تشير هذه المقالة إلى الميزات المتوفرة في خطط المختبر، والتي حلت محل حسابات المختبر.

React هي مكتبة JavaScript شائعة لبناء واجهات المستخدم (UI). React هي طريقة تعريفية لإنشاء مكونات قابلة لإعادة الاستخدام لموقع الويب الخاص بك. هناك العديد من المكتبات الشائعة الأخرى لتطوير الواجهة الأمامية المستندة إلى JavaScript. سنستخدم بعض هذه المكتبات أثناء إنشاء مختبرنا. Redux هي مكتبة توفر حاوية حالة يمكن التنبؤ بها لتطبيقات JavaScript وغالبا ما تستخدم مجاملة ل React. JSX هو ملحق بناء جملة مكتبة ل JavaScript غالبا ما يستخدم مع React لوصف الشكل الذي يجب أن تبدو عليه واجهة المستخدم. NodeJS هي طريقة ملائمة لتشغيل خادم ويب لتطبيق React الخاص بك.

ستوضح هذه المقالة كيفية تثبيت Visual Studio 2019 لبيئة التطوير الخاصة بك، والأدوات والمكتبات اللازمة لفئة تطوير ويب React.

تكوين المختبر

لإعداد هذا المختبر، تحتاج إلى اشتراك Azure وخطة مختبر للبدء. في حال لم يكن لديك اشتراك Azure، فأنشئ حساباً مجانيّاً قبل البدء.

إعدادات خطة التمرين المعملي

بمجرد حصولك على اشتراك Azure، يمكنك إنشاء خطة مختبر جديدة في Azure Lab Services. لمزيد من المعلومات حول إنشاء خطة مختبر جديدة، راجع البرنامج التعليمي حول كيفية إعداد خطة مختبر. يمكنك أيضا استخدام خطة مختبر موجودة.

قم بتمكين إعدادات خطة المختبر كما هو موضح في الجدول التالي. لمزيد من المعلومات حول كيفية تمكين صور Azure Marketplace، راجع تحديد صور Azure Marketplace المتوفرة لمنشئي المختبر.

إعداد حساب المختبر الإرشادات
صورة Marketplace تمكين صورة "Visual Studio 2019 Community (أحدث إصدار) على صورة Windows Server 2019 (x64)".

إعدادات المختبر

للحصول على إرشادات حول كيفية إنشاء مختبر، راجع البرنامج التعليمي: إعداد مختبر. استخدم الإعدادات التالية عند إنشاء المختبر.

إعداد التمرين المعملي القيمة‬
أحجام الجهاز الظاهري المتوسطه

نوصي باختبار أحمال العمل الخاصة بك لمعرفة ما إذا كانت هناك حاجة إلى حجم أكبر. لمزيد من المعلومات حول كل حجم، راجع حجم الجهاز الظاهري.

تكوين جهاز القالب

توضح الخطوات الواردة في هذا القسم كيفية إكمال ما يلي لإعداد قالب الجهاز الظاهري:

  1. تثبيت أدوات التطوير.
  2. تثبيت ملحقات مصحح الأخطاء لمستعرض الويب الخاص بك.
  3. تحديث إعدادات جدار الحماية.

تثبيت أدوات التطوير

تحتوي صورة "مجتمع Visual Studio 2019 (أحدث إصدار) على Windows Server 2019 (x64)" بالفعل على حمل عمل تطوير Node.js المطلوب مثبتا ل Visual Studio 2019.

  1. قم بتثبيت مستعرض الويب المفضل لديك. تحتوي الصورة على Internet Explorer مثبت بشكل افتراضي.
  2. انتقل إلى موقع Node.js على الويب وحدد الزر Download . يمكنك استخدام أحدث إصدار من الخدمة طويلة المدى (LTS) أو الإصدار الحالي مع أحدث الميزات أو إصدار سابق. سيؤدي تثبيت NodeJS أيضا إلى تثبيت Node مدير الحِزَم، والتي سيتم استخدامها لتثبيت React وRedux وJSX.
  3. قم بتحديث Visual Studio 2019 إلى أحدث إصدار، إذا لزم الأمر.

يتم تثبيت المكونات الأخرى اللازمة لموقع ويب مستند إلى React باستخدام NPM في تطبيق معين. لإضافة حزم NPM، راجع إدارة حزم NPM في Visual Studio.

على سبيل المثال، إذا كنت تستخدم Node.js Interactive Window في مشروع، أدخل الأوامر التالية لتثبيت مكتبات React وRedux وJSX:

.npm install react
.npm install react-dom
.npm install react-redux
.npm install react-jsx

لإنشاء أول Node.js باستخدام تطبيق React في Visual Studio، راجع البرنامج التعليمي: إنشاء تطبيق Node.js وReact في Visual Studio.

تثبيت ملحقات مصحح الأخطاء

قم بتثبيت ملحقات React Developer Tools للمستعرض الخاص بك حتى تتمكن من فحص مكونات React وتسجيل معلومات الأداء.

تحديث إعدادات جدار الحماية

بشكل افتراضي، سيتم حظر حركة المرور الواردة إلى خادم Node.js الخاص بك. إذا كنت ترغب في الوصول إلى موقع الويب الخاص بالطالب أثناء تشغيله، أضف قاعدة جدار حماية مرتبطة للسماح بنسبة استخدام الشبكة. انظر إلى خاصية مشروع منفذ التطبيق لمعرفة المنفذ الذي سيتم استخدامه أثناء تصحيح الأخطاء. يستخدم المثال أدناه New-NetFirewallRule PowerShell cmdlet للسماح بالوصول إلى المنفذ 1337.

New-NetFirewallRule -DisplayName "Allow access to Port 1337" -Direction Inbound -LocalPort 1337 -Protocol TCP -Action Allow

هام

يجب على المعلمين استخدام قالب VM أو جهاز ظاهري معملي آخر للوصول إلى موقع الويب الخاص بالطالب.

التكلفة

دعونا نغطي مثالا لتقدير التكلفة لهذه الفئة. لنفترض أن لديك صفا من 25 طالبا. لكل طالب 20 ساعة من الوقت المجدول للفصل الدراسي. يتم منح 10 ساعات حصة أخرى للواجب المنزلي أو الواجبات خارج وقت الفصل الدراسي المجدول لكل طالب. كان حجم الجهاز الظاهري الذي اخترناه متوسطا، وهو 55 وحدة مختبر.

  • 25 طالبا × (20 ساعة مجدولة + 10 ساعات حصة) × 55 وحدة مختبر × دولار أمريكي 0.01 دولار أمريكي في الساعة = 412.50 دولار أمريكي

هام

تقدير التكلفة هو لأغراض المثال فقط. للحصول على معلومات التسعير الحالية، راجع تسعير Azure Lab Services.

الخطوات التالية

يمكن الآن نشر صورة القالب إلى المختبر. لمزيد من المعلومات، راجع نشر القالب VM.

أثناء إعداد المختبر، راجع المقالات التالية: