إشعار
يتطلب الوصول إلى هذه الصفحة تخويلاً. يمكنك محاولة تسجيل الدخول أو تغيير الدلائل.
يتطلب الوصول إلى هذه الصفحة تخويلاً. يمكنك محاولة تغيير الدلائل.
هام
سيتم إيقاف Azure Lab Services في 28 يونيو 2027. لمزيد من المعلومات، راجع دليل الإيقاف.
إشعار
تشير هذه المقالة إلى الميزات المتوفرة في خطط المختبر، والتي حلت محل حسابات المختبر.
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)". |
إعدادات المختبر
للحصول على إرشادات حول كيفية إنشاء مختبر، راجع البرنامج التعليمي: إعداد مختبر. استخدم الإعدادات التالية عند إنشاء المختبر.
| إعداد التمرين المعملي | القيمة |
|---|---|
| أحجام الجهاز الظاهري | متوسط |
نوصي باختبار أحمال العمل الخاصة بك لمعرفة ما إذا كانت هناك حاجة إلى حجم أكبر. لمزيد من المعلومات حول كل حجم، راجع حجم الجهاز الظاهري.
تكوين جهاز القالب
توضح الخطوات الواردة في هذا القسم كيفية إكمال ما يلي لإعداد قالب الجهاز الظاهري:
- تثبيت أدوات التطوير.
- تثبيت ملحقات مصحح الأخطاء لمستعرض الويب الخاص بك.
- تحديث إعدادات جدار الحماية.
تثبيت أدوات التطوير
تحتوي صورة "Visual Studio 2019 Community (أحدث إصدار) على Windows Server 2019 (x64)" بالفعل على حمل عمل تطوير Node.js المطلوب مثبتا ل Visual Studio 2019.
- قم بتثبيت مستعرض الويب المفضل لديك. تحتوي الصورة على Internet Explorer مثبت بشكل افتراضي.
- انتقل إلى موقع Node.js على الويب وحدد الزر تنزيل . يمكنك استخدام أحدث إصدار من الخدمة طويلة المدى (LTS) أو الإصدار الحالي مع أحدث الميزات أو إصدار سابق. سيؤدي تثبيت NodeJS أيضا إلى تثبيت Node مدير الحِزَم، والتي سيتم استخدامها لتثبيت React وRedux وJSX.
- قم بتحديث 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 وتسجيل معلومات الأداء.
- الوظيفة الإضافية React Developer Tools ل Microsoft Edge
- ملحق React Developer Tools Chrome
- الوظيفة الإضافية React Developer Tools FireFox
تحديث إعدادات جدار الحماية
بشكل افتراضي، سيتم حظر نسبة استخدام الشبكة الواردة إلى خادم Node.js. إذا كنت ترغب في الوصول إلى موقع الويب الخاص بالطالب أثناء تشغيله، أضف قاعدة جدار حماية مرتبطة للسماح بنسبة استخدام الشبكة. انظر إلى خاصية مشروع منفذ التطبيق لمعرفة المنفذ الذي سيتم استخدامه أثناء تصحيح الأخطاء. يستخدم المثال أدناه New-NetFirewallRule PowerShell cmdlet للسماح بالوصول إلى المنفذ 1337.
New-NetFirewallRule -DisplayName "Allow access to Port 1337" -Direction Inbound -LocalPort 1337 -Protocol TCP -Action Allow
هام
يجب على المعلمين استخدام قالب VM أو جهاز ظاهري معملي آخر للوصول إلى موقع الويب الخاص بالطالب.
الخطوات التالية
يمكن الآن نشر صورة القالب إلى المختبر. لمزيد من المعلومات، راجع نشر القالب VM.
أثناء إعداد المختبر، راجع المقالات التالية: