مشاركة عبر

إعداد مختبر ل React على Linux

هام

سيتم إيقاف Azure Lab Services في 28 يونيو 2027. لمزيد من المعلومات، راجع دليل الإيقاف.

إشعار

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

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

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

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

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

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

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

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

إعداد خطة التمرين المعملي الإرشادات
صور السوق تمكين صورة "Ubuntu Server 18.04 LTS".

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

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

إعداد التمرين المعملي القيمة‬
أحجام الجهاز الظاهري صغير

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

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

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

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

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

  1. قم بتثبيت مستعرض الويب المفضل لديك.

  2. تثبيت Node.js.

    sudo apt install nodejs

  3. قم بتثبيت node مدير الحِزَم، والتي سيتم استخدامها لتثبيت React وRedux وJSX.

    sudo apt install npm

  4. ثبّت Visual Studio Code.

  5. تثبيت ملحق Reactive Native Tools ل Visual Studio Code.

  6. اختياريا، قم بتثبيت ملحقات للتطوير باستخدام Redux وJSX.

إنشاء تطبيق React هو طريقة مدعومة رسميا لإنشاء تطبيق React ولا يتطلب أي تكوين إضافي إذا كنت تستخدم npm 5.2 وما فوق. لمزيد من الإرشادات حول كيفية استخدام Create React App، راجع وثائق بدء الاستخدام الخاصة بهم.

يتم تثبيت المكونات الأخرى اللازمة لموقع ويب مستند إلى React باستخدام NPM في تطبيق معين. على سبيل المثال، أدخل الأوامر التالية لتثبيت مكتبات Redux وJSX:

npm install react-redux
npm install react-jsx

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

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

لتشغيل التطبيق في وضع التطوير، استخدم npm start الأمر المضمن. سيتم سرد عناوين URL المحلية وعناوين URL للشبكة في إخراج الأمر. لمزيد من المعلومات حول كيفية استخدام HTTPS بدلا من HTTP، راجع إنشاء تطبيق React: استخدام HTTPS في التطوير.

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

تحتوي إصدارات Ubuntu الرسمية على iptables مثبتة وستسمح بجميع نسبة استخدام الشبكة الواردة بشكل افتراضي. ومع ذلك، إذا كنت تستخدم جهازا ظاهريا يحتوي على جدار حماية أكثر تقييدا، أضف قاعدة واردة للسماح بنسبة استخدام الشبكة إلى خادم NodeJS. يستخدم المثال أدناه iptables للسماح بحركة المرور إلى المنفذ 3000.

sudo iptables -I INPUT -p tcp -m tcp --dport 3000 -j ACCEPT

هام

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

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

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

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

  • Last updated on