كيفية تثبيت واستخدام رياكت على نظام لينكس : دليل خطوة بخطوة

React هي مكتبة JavaScript شهيرة لبناء واجهات المستخدم، وقد تم تطويرها وصيانتها بواسطة Facebook. تسمح لك بإنشاء مكونات واجهة المستخدم القابلة لإعادة الاستخدام وإدارة حالة تطبيقك بطريقة أكثر كفاءة وتنظيمًا مقارنة بتقنيات تطوير الويب التقليدية.

في هذا الدليل، سنقوم بشرح عملية تثبيت React على نظام Linux، وتحديدًا Ubuntu 20.04/22.04 أو CentOS/RHEL 7. سنغطي الخطوات التالية:

1. تثبيت Node.js و npm
2. إنشاء تطبيق React جديد
3. تشغيل خادم التطوير
4. بناء التطبيق للإنتاج
5. تقديم التطبيق باستخدام خادم ويب

قبل أن نبدأ، من المهم أن نلاحظ أن React هو مجرد مكتبة لبناء واجهات المستخدم، وغالبًا ما يتم استخدامها بالتزامن مع أدوات ومكتبات أخرى لإنشاء تطبيق ويب كامل. على سبيل المثال، يمكنك استخدام React مع إطار عمل backend مثل Express.js أو مكتبة إدارة الحالة مثل Redux.

ومع ذلك، لأغراض هذا الدليل، سنركز على أساسيات تشغيل React على نظام Linux.

المتطلبات الأولية

قبل أن نبدأ، يجب أن يكون لديك ما يلي مثبتًا على نظامك:

• محاكي نصي (مثل Gnome Terminal أو Konsole)
• محرر نصوص (مثل Sublime Text أو Atom أو Visual Studio Code)
• Git (اختياري، ولكن يُنصح به لإدارة رمز تطبيقك)

يجب أيضًا أن يكون لديك فهم أساسي لسطر الأوامر في Linux وأن تكون مرتاحًا باستخدام الأوامر مثل cd و ls و mkdir.

تثبيت Node.js و npm

Node.js هو بيئة تشغيل JavaScript تتيح لك تشغيل رمز JavaScript خارج متصفح الويب. يتعين استخدامه لتشغيل تطبيقات React، وكذلك العديد من أدوات تطوير الويب الحديثة الأخرى.

npm (مدير حزم Node) هو مدير حزم لـ Node.js يتيح لك تثبيت وإدارة مكتبات وتبعيات الطرف الثالث بسهولة.

لتثبيت Node.js و npm على Ubuntu 20.04، قم بتشغيل الأوامر التالية:

$ sudo apt update
$ sudo apt install nodejs npm

على CentOS 7، يمكنك تثبيت Node.js و npm باستخدام الأوامر التالية:

$ sudo yum update
$ sudo yum install nodejs npm

بمجرد الانتهاء من التثبيت، يمكنك التحقق من أن Node.js و npm قد تم تثبيتهما عبر التحقق من إصداراتهما:

$ node --version
v18.19.0
$ npm --version  
10.2.3

يرجى ملاحظة أن الإصدارات الدقيقة قد تختلف حسب وقت قراءة هذا الدليل.

إنشاء تطبيق React جديد

الآن بعد أن قمنا بتثبيت Node.js و npm، يمكننا إنشاء تطبيق React جديد باستخدام أداة create-react-app. هذه هي أداة سطر الأوامر التي تقوم بإعداد مشروع React جديد بأنبوب بناء مُعين وخادم تطوير مُكوَّن مُسبقًا.

لإنشاء تطبيق React جديد، افتح محاكي النصوص الخاص بك وانتقل إلى الدليل الذي تريد فيه إنشاء مشروعك. ثم، قم بتشغيل الأمر التالي:

$ npx create-react-app my-app

استبدل my-app باسم مشروعك.سيقوم هذا الأمر بإنشاء دليل جديد باسم my-app وإعداد تطبيق React أساسي داخله. يتم تكوين التطبيق مُسبقًا مع خادم تطوير ونص بناء وهيكل ملفات أساسي.

عند اكتمال تشغيل الأمر، يمكنك الت

نقل إلى دليل مشروعك الجديد:

$ cd my-app

تشغيل خادم التطوير

الآن بعد أن تم إنشاء تطبيق React الخاص بك، يمكنك بدء تشغيل خادم التطوير لرؤية تطبيقك بالعمل.

لبدء خادم التطوير، قم بتشغيل الأمر التالي:

$ npm start

سيقوم هذا الأمر بتجميع تطبيقك وبدء خادم تطوير محلي على http://localhost:3000. سيقوم أيضًا تلقائيًا بفتح متصفح الويب الافتراضي لديك على هذا العنوان.

يجب أن ترى الآن صفحة React الافتراضية بنص “تحرير src/App.js وحفظ لإعادة التحميل.” هذا هو التطبيق الافتراضي لـ React الذي تم إنشاؤه بواسطة create-react-app.

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

بناء التطبيق للإنتاج

عندما تكون جاهزًا لنشر تطبيق React الخاص بك، ستحتاج إلى بناء نسخة جاهزة للإنتاج من التطبيق.

لبناء تطبيقك للإنتاج، قم بتشغيل الأمر التالي:

$ npm run build

سيقوم هذا الأمر بتجميع تطبيقك وإخراج نسخة ثابتة من التطبيق في دليل build الخاص بمشروعك.

يحتوي دليل build على جميع الملفات اللازمة لتقديم تطبيقك على خادم ويب، بما في ذلك:

• index.html: الملف الرئيسي HTML الذي يحمل تطبيقك
• static/: دليل يحتوي على أصول تطبيقك الثابتة (مثل ملفات CSS وJavaScript)

تقديم التطبيق باستخدام خادم ويب

الآن بعد أن لديك نسخة جاهزة للإنتاج من تطبيقك، يمكنك تقديمها باستخدام خادم ويب.

هناك العديد من خوادم الويب المختلفة التي يمكنك استخدامها لتقديم تطبيقك React، ولكن لأغراض هذا الدليل، سنستخدم حزمة serve من npm.

لتثبيت حزمة serve، قم بتشغيل الأمر التالي في محاكي النصوص الخاص بك:

$ npm install -g serve

تقوم الكلمة -g بتثبيت الحزمة على نطاق عالمي، حتى تتمكن من استخدام أمر serve من أي مكان على نظامك.

بمجرد تثبيت الحزمة، يمكنك بدء خادم الويب عن طريق تشغيل الأمر التالي في الدليل الرئيسي لمشروعك:

$ serve -s build

تحدد الكلمة -s الدليل للخدمة، والذي في هذه الحالة هو الدليل build.

سيبدأ هذا الأمر خادم ويب على http://localhost:5000 افتراضيًا. يمكنك الوصول إلى تطبيقك عن طريق التنقل إلى هذا العنوان في متصفح الويب الخاص بك.

إذا كنت ترغب في تقديم تطبيقك على منفذ مختلف، يمكنك تحديد رقم المنفذ باستخدام الكلمة -l:

$ serve -s build -l 8080

سيبدأ هذا الأمر خادم الويب على http://localhost:8080.

يرجى ملاحظة أن هذا مجرد خادم ويب أساسي لتقديم ملفات ثابتة، وقد لا يكون مناسبًا لبيئة إنتاج. للحصول على حلاً أكثر قوة، قد ترغب في النظر في استخدام خادم ويب مخصص مثل Apache أو Nginx.

خلاصة

في هذا الدليل، قد قمنا بتغطية أساسيات تثبيت React على نظام Linux باستخدام Ubuntu 20.04 أو CentOS 7. قمنا بشرح عملية تثبيت Node.js و npm، إنشاء تطبيق React جديد، تشغيل خادم التطوير، بناء التطبيق للإنتاج، وتقديم التطبيق باستخدام خادم ويب.

هناك العديد من المواضيع المتقدمة التي يمكنك استكشافها مع استمرار العمل مع React، مثل إدارة الحالة وتوجيه الصفحات واختبار التطبيق. ومع ذلك، يجب أن يوفر لك هذا الدليل أساسًا قويًا للبداية في تطوير React على نظام Linux الخاص بك.