إنشاء وتشغيل مشروع React باستخدام ServBay
ما هو React؟
React هو مكتبة جافا سكريبت مفتوحة المصدر تُطوّر وتُدار من قبل Meta (المعروفة سابقاً بـ Facebook) ومجتمعها، ومخصصة لبناء واجهات المستخدم التفاعلية. يعتمد React على مبدأ تقسيم واجهة المستخدم إلى مكونات مستقلة قابلة لإعادة الاستخدام، مما يمكّن المطورين من إنشاء واجهات معقدة وقابلة للصيانة بسهولة، سواء كانت تطبيقات الويب ذات الصفحة الواحدة (SPA) أو تطبيقات ويب كبيرة.
من المميزات الأساسية لـ React: أسلوب البرمجة التصريحي، آلية التحديث الفعّالة للـDOM الافتراضي، ودعم المجتمع الهائل.
أهم ميزات وفوائد React
- تطوير قائم على المكونات: تقسيم واجهة المستخدم إلى مكونات مستقلة؛ هذا يعزز إعادة استخدام الكود وسهولة الصيانة.
- عرض تصريحي: فقط وصف حالة الواجهة، وReact يتولى تحديث الـDOM تلقائياً ليناسب الحالة، مما يبسط منطق تطوير الواجهة.
- DOM افتراضي (Virtual DOM): الحفاظ على تمثيل افتراضي للـDOM في الذاكرة، وتقليل التغييرات المباشرة للـDOM الحقيقي لتحسين الأداء بشكل ملحوظ.
- تدفق بيانات أحادي الاتجاه: تدفق البيانات من الأعلى للأسفل، ما يجعل تتبع وفهم تغيرات الحالة في التطبيق أكثر سهولة ووضوحاً.
- JSX: امتداد للغة جافا سكريبت يُمكّن كتابة بنية شبيهة بـHTML داخل الشيفرة، مما يسهل قراءة الكود.
- منظومة قوية: دعم مجتمعي هائل ومكتبات خارجية غنية (مثل React Router، Redux/Zustand/MobX، Material UI وغيرهم) لتغطية إدارة الحالة، التوجيه، ومكونات الواجهة.
باستخدام React، يمكن للمطورين بناء تطبيقات ويب حديثة وعالية الأداء بسرعة وكفاءة.
إعداد بيئة تطوير وإنتاج React باستخدام ServBay
ServBay هو بيئة تطوير ويب محلية قوية تقدم العديد من الحزم البرمجية لمستخدمي macOS وWindows، من ضمنها Node.js. في هذا الدليل، نشرح خطوة بخطوة كيفية استغلال بيئة Node.js في ServBay وميزة "المواقع الإلكترونية" (Websites) لإنشاء، إعداد وتشغيل مشروع React، بما يشمل إعداد البروكسي العكسي في وضع التطوير وخدمة الملفات الثابتة في وضع الإنتاج.
المتطلبات الأساسية
قبل البدء، تأكد من تنفيذ المتطلبات التالية:
- تثبيت ServBay: يجب أن يكون ServBay مثبتاً ويعمل بنجاح على جهازك.
- تثبيت حزمة Node.js: قم بتثبيت حزمة Node.js من خلال واجهة ServBay أو عبر سطر الأوامر. يمكنك الرجوع إلى دليل تثبيت Node.js عبر ServBay للحصول على خطوات مفصلة. ServBay يدير إصدار Node.js وبيئة التشغيل تلقائياً.
إنشاء مشروع React
سنستخدم أداة البناء الحديثة Vite لإنشاء مشروع React بسرعة وكفاءة. Vite يوفر سرعة تشغيل عالية وتحديث نمطي سريع (HMR)، ويُعتبر الخيار الرائد حالياً لإنشاء مشاريع React (بدلاً من أداة create-react-app
التقليدية).
افتح الطرفية وانتقل إلى مجلد المواقع الإلكترونية
افتح تطبيق الطرفية. مجلد مواقع ServBay الافتراضي الموصى به هو:
macOS:
bashcd /Applications/ServBay/www
1Windows:
cmdcd C:\ServBay\www
1إنشاء مشروع React جديد باستخدام Vite
نفذ الأمر التالي لإنشاء مشروع جديد باسم
servbay-react-demo
واختَر قالب React:bashnpx create-vite servbay-react-demo --template react
1npx
مشغل حزم npm، يُتيح تنفيذ أدوات عبر سطر الأوامر مباشرة بدون تثبيتها عالمياً، ويضمن استخدام أحدث إصدار دائماً.create-vite
هو أداة إنشاء المشاريع الرسمية الخاصة بـVite.servbay-react-demo
اسم مجلد مشروعك.--template react
تعني استخدام قالب React لإنشاء هيكل المشروع الأولي.
اتبع التعليمات الظاهرة لإكمال إنشاء المشروع.
ادخل إلى مجلد المشروع وثبت التبعيات
انتقل إلى مجلد المشروع الجديد وثبت جميع التبعيات المطلوبة باستخدام npm:
bashcd servbay-react-demo npm install
1
2- يمكنك أيضاً استخدام
yarn install
أوpnpm install
إذا كنت تفضل Yarn أو pnpm كمدير حزم.
- يمكنك أيضاً استخدام
تعديل محتوى مشروع React (اختياري)
للتحقق من نجاح الإعداد، يمكنك تعديل الصفحة الرئيسية للمشروع بسهولة.
افتح ملف
src/App.jsx
أوsrc/App.tsx
استخدم محرر الكود المفضل لديك وافتح الملف
src/App.jsx
(إذا اخترت قالب جافا سكريبت) أو الملفsrc/App.tsx
(إذا اخترت قالب TypeScript).تعديل المحتوى
عدّل الجزء المسؤول عن عرض المحتوى ليُظهر العبارة "Hello ServBay!":
javascript// ... استيرادات أخرى ... import './App.css'; function App() { // ... كود آخر ... return ( <> {/* ... عناصر أخرى ... */} <h1>Hello ServBay!</h1> {/* ... عناصر أخرى ... */} </> ); } export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15احفظ الملف.
بدء وضع التطوير
خلال مرحلة التطوير، غالباً ما يتم تشغيل خادم تطوير محلي يوفر ميزات مثل التحديث الفوري (HMR)، مما يجعل تجربة التطوير أفضل. يمكن لـServBay إعداد بروكسي عكسي لتحويل الطلبات الخارجية إلى هذا الخادم.
تشغيل خادم التطوير عبر الطرفية
من مجلد المشروع
servbay-react-demo
، نفذ الأمر التالي لتشغيل خادم Vite على منفذ خاص (مثلاً: 8585):bashnpm run dev -- --port 8585
1npm run dev
يشغّل سكريبتdev
المٌعرف فيpackage.json
، وهو غالباً مخصص لتشغيل خادم Vite.-- --port 8585
يحدد المنفذ الذي سيعمل عليه الخادم.
بعد بدء الخادم، ستظهر في الطرفية عادةً عناوين محلية مثل
http://localhost:8585
. ابق نافذة الطرفية مفتوحة ولا تغلق الخادم.إعداد بروكسي عكسي عبر ServBay
من واجهة ServBay، انتقل إلى قسم المواقع (Websites). اضغط زر الإضافة لإنشاء إعداد جديد:
- الاسم (Name):
ServBay React Dev
(اسم وصفي) - النطاق (Domain):
servbay-react-dev.servbay.demo
(نطاق تجريبي مرتبط بعلامة ServBay) - نوع الموقع (Site Type): اختر
بروكسي عكسي (Reverse Proxy)
- IP البروكسي (Proxy IP):
127.0.0.1
(الخادم يعمل محلياً) - منفذ البروكسي (Proxy Port):
8585
(نفس المنفذ المُحدد للخادم)
احفظ الإعدادات، وسيقوم ServBay تلقائياً بتكوين الخادم الداخلي (Caddy أو Nginx) لتحويل طلبات النطاق
servbay-react-dev.servbay.demo
إلىhttp://127.0.0.1:8585
.لمزيد من التفاصيل حول إضافة المواقع في ServBay، راجع دليل إدارة المواقع في ServBay.
- الاسم (Name):
زيارة موقع التطوير عبر المتصفح
افتح المتصفح وادخل النطاق الذي أنشأته:
https://servbay-react-dev.servbay.demo
.- بفضل ServBay، تم إعداد شهادة SSL تلقائياً (موقعة من ServBay User CA أو ServBay Public CA)، لذا يمكنك زيارة الموقع محلياً عبر HTTPS بأمان. لمزيد من المعلومات حول SSL في ServBay، راجع استخدام SSL لتأمين موقعك.
- الآن، عند تعديل وحفظ ملفات المشروع في محرر الكود، يجب أن يتحدث الموقع تلقائياً في المتصفح، بفضل ميزة التحديث الفوري (HMR).
بناء نسخة الإنتاج
عندما يصبح مشروعك جاهزاً للنشر، تحتاج إلى إنتاج نسخة محسّنة يتم تقديمها كملفات ثابتة.
بناء مشروع الإنتاج عبر الطرفية
في مجلد المشروع
servbay-react-demo
، نفذ الأمر التالي لإجراء البناء:bashnpm run build
1هذا الأمر يشغّل سكريبت
build
فيpackage.json
. سيفوم Vite بتجميع وتحسين شيفرة المشروع وتحويلها إلى ملفات ثابتة (HTML، CSS، JavaScript، وموارد ساكنة) تذهب عادةً إلى مجلدdist
في جذر المشروع. بعد اكتمال البناء، ستظهر رسالة نجاح في الطرفية.إعداد خدمة الملفات الثابتة عبر ServBay
يحتوي مجلد
dist
على ملفات يمكن تقديمها مباشرة عبر الخادم. في ServBay، أنشئ إعداد موقع ثابت جديد:انتقل إلى واجهة ServBay، إلى قسم المواقع (Websites). اضغط زر الإضافة لإنشاء إعداد جديد:
- الاسم (Name):
ServBay React Prod
(اسم وصفي) - النطاق (Domain):
servbay-react.servbay.demo
(نطاق إنتاجي مميز) - نوع الموقع (Site Type): اختر
ثابت (Static)
- دليل الجذر للموقع (Website Root Directory): أشِر إلى مجلد
dist
الناتج بعد البناء:- macOS:
/Applications/ServBay/www/servbay-react-demo/dist
- Windows:
C:\ServBay\www\servbay-react-demo\dist
- macOS:
احفظ الإعدادات، وسيقوم ServBay بتكوين الخادم لتقديم الملفات مباشرةً من مجلد
dist
.- الاسم (Name):
زيارة موقع الإنتاج عبر المتصفح
افتح المتصفح وادخل النطاق الذي أنشأته:
https://servbay-react.servbay.demo
.الآن تستعرض النسخة النهائية والمبنية من الموقع، مع توفير حماية SSL تلقائياً بفضل ServBay.
الخلاصة
عبر هذه الخطوات، أنشأت بنجاح مشروع React في بيئة ServBay المحلية، مع إعداد بروكسي عكسي لوضع التطوير وخدمة ملفات ثابتة لوضع الإنتاج. ServBay يبسط عملية بناء وإعداد بيئة التطوير المحلية، ويدعم macOS وWindows، خاصةً بفضل دعمه المدمج لـNode.js، إعدادات المواقع المرنة (بروكسي عكسي وملفات ثابتة)، وميزة SSL التلقائية التي تُسهّل حياة مطوري React بشكل كبير. يمكنك الآن مواصلة تطوير واختبار ونشر تطبيقات React الخاصة بك بسهولة وثقة.